diff --git a/.cypress/integration/4_trace_analytics_dashboard.spec.js b/.cypress/integration/4_trace_analytics_dashboard.spec.js
new file mode 100644
index 0000000000..38441914db
--- /dev/null
+++ b/.cypress/integration/4_trace_analytics_dashboard.spec.js
@@ -0,0 +1,394 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+
+import { testDataSet, delay, setTimeFilter, jaegerTestDataSet } from '../utils/constants';
+
+describe('Dump test data', () => {
+  it('Indexes test data', () => {
+    const dumpDataSet = (mapping_url, data_url, index) => {
+      cy.request({
+        method: 'POST',
+        failOnStatusCode: false,
+        url: 'api/console/proxy',
+        headers: {
+          'content-type': 'application/json;charset=UTF-8',
+          'osd-xsrf': true,
+        },
+        qs: {
+          path: `${index}`,
+          method: 'PUT',
+        },
+      });
+
+      cy.request(mapping_url).then((response) => {
+        cy.request({
+          method: 'POST',
+          form: true,
+          url: 'api/console/proxy',
+          headers: {
+            'content-type': 'application/json;charset=UTF-8',
+            'osd-xsrf': true,
+          },
+          qs: {
+            path: `${index}/_mapping`,
+            method: 'POST',
+          },
+          body: response.body,
+        });
+      });
+
+      cy.request(data_url).then((response) => {
+        cy.request({
+          method: 'POST',
+          form: true,
+          url: 'api/console/proxy',
+          headers: {
+            'content-type': 'application/json;charset=UTF-8',
+            'osd-xsrf': true,
+          },
+          qs: {
+            path: `${index}/_bulk`,
+            method: 'POST',
+          },
+          body: response.body,
+        });
+      });
+    };
+
+    testDataSet.forEach(({ mapping_url, data_url, index }) =>
+      dumpDataSet(mapping_url, data_url, index)
+    );
+  });
+});
+
+describe('Testing dashboard table empty state', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/home', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    cy.wait(delay * 3);
+  });
+
+  it('Renders empty state', () => {
+    cy.contains(' (0)').should('exist');
+    cy.contains('No matches').should('exist');
+  });
+});
+
+describe('Testing dashboard table', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/home', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Renders the dashboard table', () => {
+    cy.contains(' (10)').should('exist');
+    cy.contains('client_cancel_order').should('exist');
+    cy.contains('166.44').should('exist');
+    cy.contains('7.14%').should('exist');
+  });
+
+  it('Has working breadcrumbs', () => {
+    cy.get('.euiBreadcrumb').contains('Dashboard').click();
+    cy.get('.euiTitle').contains('Dashboard').should('exist');
+    cy.get('.euiBreadcrumb').contains('Trace analytics').click();
+    cy.get('.euiTitle').contains('Dashboard').should('exist');
+    cy.get('.euiBreadcrumb').contains('Observability').click();
+    cy.get('.euiTitle').contains('Event analytics').should('exist');
+  });
+
+  it('Adds the percentile filters', () => {
+    cy.contains(' >= 95 percentile').click({ force: true });
+    cy.wait(delay);
+    cy.contains(' >= 95 percentile').click({ force: true });
+    cy.wait(delay);
+
+    cy.contains('Latency percentile within trace group: >= 95th').should('exist');
+    cy.contains(' (7)').should('exist');
+    cy.contains('318.69').should('exist');
+
+    cy.contains(' < 95 percentile').click({ force: true });
+    cy.wait(delay);
+    cy.contains(' < 95 percentile').click({ force: true });
+    cy.wait(delay);
+
+    cy.contains('Latency percentile within trace group: < 95th').should('exist');
+    cy.contains(' (8)').should('exist');
+    cy.contains('383.05').should('exist');
+  });
+
+  it('Opens latency trend popover', () => {
+    setTimeFilter(true);
+    cy.get('.euiButtonIcon[aria-label="Open popover"]').first().click();
+    cy.get('text.ytitle[data-unformatted="Hourly latency (ms)"]').should('exist');
+  });
+
+  it('Redirects to traces table with filter', () => {
+    cy.wait(delay);
+    cy.get('.euiLink').contains('13').click();
+    cy.wait(delay);
+
+    cy.get('h2.euiTitle').contains('Traces').should('exist');
+    cy.contains(' (13)').should('exist');
+    cy.contains('client_create_order').should('exist');
+
+    cy.get('.euiSideNavItemButton__label').contains('Trace analytics').click();
+    cy.wait(delay);
+
+    cy.contains('client_create_order').should('exist');
+  });
+});
+
+describe('Testing plots', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/home', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Renders service map', () => {
+    // plotly scale texts are in attribute "data-unformatted"
+    cy.get('text.ytitle[data-unformatted="Latency (ms)"]').should('exist');
+    cy.get('text[data-unformatted="200"]').should('exist');
+    cy.get('.vis-network').should('exist');
+
+    cy.get('.euiButton__text[title="Error rate"]').click();
+    cy.get('text.ytitle[data-unformatted="Error rate"]').should('exist');
+    cy.get('text[data-unformatted="10%"]').should('exist');
+
+    cy.get('.euiButton__text[title="Throughput"]').click();
+    cy.get('text.ytitle[data-unformatted="Throughput"]').should('exist');
+    cy.get('text[data-unformatted="50"]').should('exist');
+
+    cy.get('input[type="search"]').eq(1).focus().type('payment{enter}');
+  });
+
+  it('Renders plots', () => {
+    cy.get('text.ytitle[data-unformatted="Error rate (%)"]').should('exist');
+    cy.get('text.annotation-text[data-unformatted="Now: 14.81%"]').should('exist');
+    cy.get('text.ytitle[data-unformatted="Throughput (n)"]').should('exist');
+    cy.get('text.annotation-text[data-unformatted="Now: 108"]').should('exist');
+  });
+});
+
+describe('Latency by trace group table', () =>{
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/home', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Verify columns in Latency by trace group table along with pagination functionality', () => {
+    cy.get('span.panel-title').eq(0).should('exist');
+    cy.get('[data-test-subj="tableHeaderCell_dashboard_trace_group_name_0"]').should('exist');
+    cy.get('[data-test-subj="tableHeaderCell_dashboard_latency_variance_1"]').should('exist');
+    cy.get('[data-test-subj="tableHeaderCell_dashboard_average_latency_2"]').should('exist');
+    cy.get('[data-test-subj="tableHeaderCell_24_hour_latency_trend_3"]').should('exist');
+    cy.get('[data-test-subj="tableHeaderCell_dashboard_error_rate_4"]').should('exist');
+    cy.get('[data-test-subj="tableHeaderCell_dashboard_traces_5"]').should('exist');
+    cy.get('[data-test-subj="tablePaginationPopoverButton"]').click();
+    cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiContextMenu__icon').eq(0).should('exist').click();
+    cy.get('[data-test-subj="pagination-button-next"]').should('exist').click();
+    cy.get('button[data-test-subj="dashboard-table-trace-group-name-button"]').contains('mysql').should('exist');
+  });
+
+  it('Sorts the Latency by trace group table', () => {
+    cy.get('span[title*="Trace group name"]').click();
+    cy.get('[data-test-subj="dashboard-table-trace-group-name-button"]').eq(0).contains('/**').should('exist');
+    cy.wait(delay);
+  });
+
+  it('Verify tooltips in Latency by trace group table', () => {
+    cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.euiIcon-isLoaded.eui-alignTop').eq(0).trigger('mouseover');
+    cy.contains('Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.').should('be.visible');
+    cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.euiIcon-isLoaded.eui-alignTop').eq(1).trigger('mouseover');
+    cy.contains('Range of latencies for traces within a trace group in the selected time range.').should('be.visible');
+    cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.euiIcon-isLoaded.eui-alignTop').eq(2).trigger('mouseover');
+    cy.contains('Average latency of traces within a trace group in the selected time range.').should('be.visible');
+    cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.euiIcon-isLoaded.eui-alignTop').eq(3).trigger('mouseover');
+    cy.contains('24 hour time series view of hourly average, hourly percentile, and hourly range of latency for traces within a trace group.').should('be.visible');
+    cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.euiIcon-isLoaded.eui-alignTop').eq(4).trigger('mouseover');
+    cy.contains('Error rate based on count of trace errors within a trace group in the selected time range.').should('be.visible');
+    cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.euiIcon-isLoaded.eui-alignTop').eq(5).trigger('mouseover');
+    cy.contains('Count of traces with unique trace identifiers in the selected time range.').should('be.visible');
+  });
+
+  it('Verify Search engine on Trace dashboard', () => {
+    cy.get('.euiFieldSearch.euiFieldSearch--fullWidth').click().type('client_pay_order');
+    cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click();
+    cy.wait(delay);
+    cy.get('.euiTableCellContent.euiTableCellContent--alignRight.euiTableCellContent--overflowingContent').contains('211.04').should('exist');
+    cy.get('button[data-test-subj="dashboard-table-trace-group-name-button"]').click();
+    cy.get('.euiBadge.euiBadge--hollow.euiBadge--iconRight.globalFilterItem').click();
+    cy.get('.euiIcon.euiIcon--medium.euiContextMenu__arrow').click();
+    cy.get('.euiContextMenuPanelTitle').contains('Edit filter').should('exist');
+    cy.get('.euiButton.euiButton--primary.euiButton--fill').click();
+    cy.get('.euiBadge.euiBadge--hollow.euiBadge--iconRight.globalFilterItem').click();
+    cy.get('.euiContextMenuItem__text').eq(1).contains('Exclude results').click();
+    cy.get('.euiTextColor.euiTextColor--danger').should('exist');
+    cy.get('.euiBadge.euiBadge--hollow.euiBadge--iconRight.globalFilterItem').click();
+    cy.get('.euiContextMenuItem__text').eq(1).contains('Include results').click();
+    cy.get('.euiBadge.euiBadge--hollow.euiBadge--iconRight.globalFilterItem').click();
+    cy.get('.euiContextMenuItem__text').eq(2).contains('Temporarily disable').click();
+    cy.get('.euiBadge.euiBadge--iconRight.globalFilterItem.globalFilterItem-isDisabled').should('exist').click();
+    cy.get('.euiContextMenuItem__text').eq(2).contains('Re-enable').click();
+    cy.get('.euiBadge.euiBadge--hollow.euiBadge--iconRight.globalFilterItem').click();
+    cy.get('.euiContextMenuItem__text').eq(3).contains('Delete').click();
+  });
+});
+
+describe('Testing filters on trace analytics page', { scrollBehavior: false }, () =>{
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/home', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Verify Change all filters', () =>{
+    cy.get('[data-test-subj="global-filter-button"]').click();
+    cy.get('.euiContextMenuPanelTitle').contains('Change all filters').should('exist');
+    cy.get('.euiContextMenuItem__text').eq(0).contains('Enable all');
+    cy.get('.euiContextMenuItem__text').eq(1).contains('Disable all');
+    cy.get('.euiContextMenuItem__text').eq(2).contains('Invert inclusion');
+    cy.get('.euiContextMenuItem__text').eq(3).contains('Invert enabled/disabled');
+    cy.get('.euiContextMenuItem__text').eq(4).contains('Remove all');
+  })
+
+  it('Verify Add filter section', () => {
+    cy.get('[data-test-subj="addfilter"]').contains('+ Add filter').click();
+    cy.get('.euiPopoverTitle').contains('Add filter').should('exist');
+    cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap--noWrap').eq(0).trigger('mouseover').click();
+    cy.get('.euiComboBoxOption__content').eq(1).click();
+    cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap--noWrap').eq(1).trigger('mouseover').click();
+    cy.get('.euiComboBoxOption__content').eq(2).click();
+    cy.get('.euiButton.euiButton--primary.euiButton--fill').contains('Save').click();
+    cy.get('.euiBadge__content').should('exist').click();
+    cy.get('.euiIcon.euiIcon--medium.euiContextMenu__arrow').click();
+    cy.get('[data-test-subj="filter-popover-cancel-button"]').contains('Cancel').click();
+    cy.get('.euiIcon.euiIcon--small.euiIcon--inherit.euiBadge__icon').click();
+  })
+});
+
+describe('Dump jaeger test data', () => {
+  it('Indexes test data', () => {
+    const dumpDataSet = (mapping_url, data_url, index) => {
+      cy.request({
+        method: 'POST',
+        failOnStatusCode: false,
+        url: 'api/console/proxy',
+        headers: {
+          'content-type': 'application/json;charset=UTF-8',
+          'osd-xsrf': true,
+        },
+        qs: {
+          path: `${index}`,
+          method: 'PUT',
+        },
+      });
+
+      cy.request(mapping_url).then((response) => {
+        cy.request({
+          method: 'POST',
+          form: true,
+          url: 'api/console/proxy',
+          headers: {
+            'content-type': 'application/json;charset=UTF-8',
+            'osd-xsrf': true,
+          },
+          qs: {
+            path: `${index}/_mapping`,
+            method: 'POST',
+          },
+          body: response.body,
+        });
+      });
+
+      cy.request(data_url).then((response) => {
+        cy.request({
+          method: 'POST',
+          form: true,
+          url: 'api/console/proxy',
+          headers: {
+            'content-type': 'application/json;charset=UTF-8',
+            'osd-xsrf': true,
+          },
+          qs: {
+            path: `${index}/_bulk`,
+            method: 'POST',
+          },
+          body: response.body,
+        });
+      });
+    };
+
+    jaegerTestDataSet.forEach(({ mapping_url, data_url, index }) =>
+      dumpDataSet(mapping_url, data_url, index)
+    );
+  });
+});
+
+describe('Testing switch mode to jaeger', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/home', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+    cy.get("[data-test-subj='indexPattern-switch-link']").click();
+    cy.get("[data-test-subj='jaeger-mode']").click();
+  });
+
+  it('Verifies errors mode columns and data', () => {
+    cy.contains('redis,GetDriver').should('exist');
+    cy.contains('14.7').should('exist');
+    cy.contains('100%').should('exist');
+    cy.contains('7').should('exist');
+    cy.contains('Service and Operation Name').should('exist');
+    cy.contains('Average latency (ms)').should('exist');
+    cy.contains('Error rate').should('exist');
+    cy.contains('Traces').should('exist');
+  });
+
+  it('Verifies traces links to traces page', () => {
+    cy.wait(delay);
+    cy.get('.euiLink').contains('7').click();
+    cy.wait(delay);
+
+    cy.get('h2.euiTitle').contains('Traces').should('exist');
+    cy.contains(' (7)').should('exist');
+    cy.get("[data-test-subj='filterBadge']").eq(0).contains('process.serviceName: redis')
+    cy.get("[data-test-subj='filterBadge']").eq(1).contains('operationName: GetDriver');  
+  })
+
+  it('Switches to throughput mode and verifies columns and data', () => {
+    cy.get("[data-test-subj='throughput-toggle']").click();
+    cy.contains('frontend,HTTP GET /dispatch').should('exist');
+    cy.contains('711.38').should('exist');
+    cy.contains('0%').should('exist');
+    cy.contains('8').should('exist');
+    cy.contains('Service and Operation Name').should('exist');
+    cy.contains('Average latency (ms)').should('exist');
+    cy.contains('Error rate').should('exist');
+    cy.contains('Traces').should('exist');
+  });
+});
diff --git a/.cypress/integration/5_trace_analytics_services.spec.js b/.cypress/integration/5_trace_analytics_services.spec.js
new file mode 100644
index 0000000000..66ca860b13
--- /dev/null
+++ b/.cypress/integration/5_trace_analytics_services.spec.js
@@ -0,0 +1,324 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+
+import { delay, SERVICE_NAME, SERVICE_SPAN_ID, setTimeFilter, verify_traces_spans_data_grid_cols_exists, count_table_row } from '../utils/constants';
+
+describe('Testing services table empty state', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/services', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    cy.wait(delay * 3);
+  });
+
+  it('Renders empty state', () => {
+    cy.contains(' (0)').should('exist');
+    cy.contains('No matches').should('exist');
+  });
+});
+
+describe('Testing services table', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/services', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Renders the services table', () => {
+    cy.contains(' (8)').should('exist');
+    cy.contains('analytics-service, frontend-client, recommendation').should('exist');
+    cy.contains('186.95').should('exist');
+    cy.contains('14.29%').should('exist');
+  });
+
+  it('Searches correctly', () => {
+    cy.get('input[type="search"]').first().focus().type(`${SERVICE_NAME}{enter}`);
+    cy.get('.euiButton__text').contains('Refresh').click();
+    cy.contains(' (1)').should('exist');
+    cy.contains('3.57%').should('exist');
+  });
+
+  it('Verify columns in Services table', () => {
+    cy.get('.euiFlexItem.euiFlexItem--flexGrow10 .panel-title').contains('Services').should('exist');
+    cy.get('.euiTableCellContent__text[title="Name"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Average latency (ms)"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Error rate"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Throughput"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="No. of connected services"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Connected services"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Traces"]').should('exist');
+    cy.get('[data-test-subj="tablePaginationPopoverButton"]').click();
+    cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiContextMenu__icon').eq(0).should('exist').click();
+    cy.get('[data-test-subj="pagination-button-next"]').should('exist').click();
+    cy.get('.euiLink.euiLink--primary').contains('order').should('exist');
+  })
+
+  it('Navigate from Services to Traces', () => {
+    cy.get('.euiTableCellContent__text[title="Traces"]').should('exist');
+    cy.contains('74').should('exist').click();
+    cy.get('.euiText.euiText--medium .panel-title').should('exist');
+    cy.get('.euiBadge__childButton[data-test-subj="filterBadge"]').should('exist');
+  })
+});
+
+describe('Testing service view empty state', () => {
+  beforeEach(() => {
+    // exception is thrown on loading EuiDataGrid in cypress only, ignore for now
+    cy.on('uncaught:exception', (err, runnable) => {
+      if (err.message.includes('ResizeObserver loop'))
+        return false;
+    });
+    cy.visit(`app/observability-dashboards#/trace_analytics/services/${SERVICE_NAME}`, {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+  });
+
+  it('Renders service view empty state', () => {
+    cy.contains('frontend-client').should('exist');
+    cy.get('.euiText').contains('0').should('exist');
+    cy.get('.euiText').contains('-').should('exist');
+  });
+});
+
+describe('Testing service view', () => {
+  beforeEach(() => {
+    // exception is thrown on loading EuiDataGrid in cypress only, ignore for now
+    cy.on('uncaught:exception', (err, runnable) => {
+      if (err.message.includes('ResizeObserver loop'))
+        return false;
+    });
+    cy.visit(`app/observability-dashboards#/trace_analytics/services`, {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+    cy.get('input[type="search"]').first().focus().type(`${SERVICE_NAME}`);
+    cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="service-link"]').eq(0).click();
+  });
+
+  it('Renders service view', () => {
+    cy.get('h2.euiTitle').contains(SERVICE_NAME).should('exist');
+    cy.contains('178.6').should('exist');
+    cy.contains('3.57%').should('exist');
+    cy.get('div.vis-network').should('exist');
+  });
+
+  it('Has working breadcrumbs', () => {
+    cy.get('.euiBreadcrumb').contains(SERVICE_NAME).click();
+    cy.wait(delay);
+    cy.get('h2.euiTitle').contains(SERVICE_NAME).should('exist');
+    cy.get('.euiBreadcrumb').contains('Services').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Services').should('exist');
+    cy.get('.euiBreadcrumb').contains('Trace analytics').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Dashboard').should('exist');
+    cy.get('.euiBreadcrumb').contains('Observability').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Event analytics').should('exist');
+  });
+
+  it('Renders spans data grid, flyout, filters', () => {
+    cy.get("[data-test-subj='spanId-link']").contains(SERVICE_SPAN_ID).trigger('mouseover', { force: true });
+    cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true });
+    cy.wait(delay);
+    cy.contains('Span detail').should('exist');
+    cy.contains('Span attributes').should('exist');
+    cy.get('.euiTextColor').contains('Span ID').trigger('mouseover');
+    cy.get('.euiButtonIcon[aria-label="span-flyout-filter-icon"').click({ force: true });
+    cy.wait(delay);
+    cy.get('.euiBadge__text').contains('spanId: ').should('exist');
+    cy.get('[data-test-subj="euiFlyoutCloseButton"]').click({ force: true });
+    cy.contains('Spans (1)').should('exist');
+  });
+});
+
+describe('Testing Service map', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/services', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Render Service map', () => {
+    cy.get('.euiText.euiText--medium .panel-title').contains('Service map');
+    cy.get('[data-test-subj="latency"]').should('exist');
+    cy.get('.ytitle').contains('Latency (ms)');
+    cy.get('[data-text = "Error rate"]').click();
+    cy.contains('60%');
+    cy.get('[data-text = "Throughput"]').click();
+    cy.contains('100');
+    cy.get('.euiText.euiText--medium').contains('Focus on').should('exist');
+    cy.get('[placeholder="Service name"]').focus().type('database{enter}');
+  })
+});
+
+describe('Testing traces Spans table verify table headers functionality', () => {
+  beforeEach(() => {
+    cy.on('uncaught:exception', (err, runnable) => {
+      if (err.message.includes('ResizeObserver loop'))
+        return false;
+    });
+    cy.visit('app/observability-dashboards#/trace_analytics/services', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Renders the spans table and verify columns headers', () => {
+    cy.contains(' (8)').should('exist');
+    cy.contains('analytics-service, frontend-client, recommendation').should('exist');
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    cy.get('.panel-title').contains('Spans').should('exist');
+    cy.get('.panel-title-count').contains('8').should('exist');
+    verify_traces_spans_data_grid_cols_exists();
+  });
+
+  it('Toggle columns and verify the columns hidden text verify rows', () => {
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    cy.get('[data-test-subj = "dataGridColumnSelectorButton"]').click();
+    cy.get('.euiSwitch.euiSwitch--compressed.euiSwitch--mini .euiSwitch__button').eq(3).click();
+    cy.get('[data-test-subj = "dataGridColumnSelectorButton"]').click().should('have.text', '2 columns hidden');
+    count_table_row(8);
+  });
+
+  it('Show all button Spans table', () => {
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    cy.get('[data-test-subj = "dataGridColumnSelectorButton"]').click();
+    cy.get('.euiPopoverFooter .euiFlexItem.euiFlexItem--flexGrowZero').eq(0).should('have.text', 'Show all').click();
+    cy.get('.euiDataGrid__focusWrap').click().should('exist');
+    verify_traces_spans_data_grid_cols_exists();
+  });
+
+  it('Hide all button Spans table', () => {
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    cy.get('[data-test-subj = "dataGridColumnSelectorButton"]').click();
+    cy.get('.euiPopoverFooter .euiFlexItem.euiFlexItem--flexGrowZero').eq(1).should('have.text', 'Hide all').click();
+    cy.get('.euiDataGrid__focusWrap').click().should('exist');
+    cy.get('[data-test-subj="dataGridColumnSelectorPopover"]').should('have.text', '10 columns hidden');
+  });
+
+  it('Render Spans table and change data table Density', () => {
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    verify_traces_spans_data_grid_cols_exists();
+    cy.get('.euiButtonEmpty__text').contains('Density').click();
+    cy.get('.euiButtonContent__icon').eq(5).click();
+    cy.get('.euiButtonContent__icon').eq(6).click();
+    cy.get('.euiButtonContent__icon').eq(7).click();
+  });
+
+  it('Render Spans table and and click on sort', () => {
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    verify_traces_spans_data_grid_cols_exists();
+    cy.get('[data-test-subj="dataGridColumnSortingButton"]').contains('Sort fields').should('exist').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection"]').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-spanId').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-parentSpanId"]').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-traceId"]').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-traceGroup').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-durationInNanos"]').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-startTime"]').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-endTime').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-status.code"]').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection"]').click();
+    cy.get('[data-test-subj="dataGridColumnSortingButton"]').should('have.text', '8 fields sorted');
+    cy.get('[data-test-subj="dataGridColumnSortingButton"]').should('exist').click();
+  });
+});
+
+
+describe('Testing traces Spans table and verify columns functionality', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/services', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Renders the spans table and click on first span to verify details', () => {
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    verify_traces_spans_data_grid_cols_exists();
+    cy.get('.euiLink--primary').eq(4).click();
+    cy.get('[data-test-subj="spanDetailFlyout"] .euiTitle.euiTitle--medium').contains('Span detail').should('exist');
+    cy.get('.euiFlyoutBody .panel-title').contains('Overview').should('exist');
+    cy.get('.euiTextColor.euiTextColor--subdued').contains('Span ID').should('exist');
+    cy.get('[data-test-subj="parentSpanId"]').contains('d03fecfa0f55b77c').should('exist');
+    cy.get('.euiFlyoutBody__overflowContent .panel-title').contains('Span attributes').should('exist');
+    cy.get('.euiDescriptionList__description .euiFlexItem').eq(0).trigger('mouseover').click();
+    cy.get('[aria-label="span-flyout-filter-icon"]').click();
+    cy.get('.euiFlyout__closeButton.euiFlyout__closeButton--inside').click();
+    cy.get('.euiBadge__content .euiBadge__text').contains('spanId: 277a5934acf55dcf').should('exist');
+    cy.wait(delay);
+    count_table_row(1);
+    cy.get('[aria-label="remove current filter"]').click();
+    cy.wait(delay);
+    count_table_row(8);
+  });
+
+  it('Render Spans table and verify Column functionality', () => {
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    verify_traces_spans_data_grid_cols_exists();
+    cy.get('.euiDataGridHeaderCell__content').contains('Span ID').click();
+    cy.get('.euiListGroupItem__label').contains('Hide column').click();
+    cy.get('.euiDataGridHeaderCell__content').contains('Trace ID').click();
+    cy.get('.euiListGroupItem__label').contains('Sort A-Z').click();
+    cy.get('.euiDataGridHeaderCell__content').contains('Trace group').click();
+    cy.get('.euiListGroupItem__label').contains('Move left').click();
+  });
+});
+
+
+describe('Testing switch mode to jaeger', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/services', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+    cy.get("[data-test-subj='indexPattern-switch-link']").click();
+    cy.get("[data-test-subj='jaeger-mode']").click();
+  });
+
+  it('Verifies columns and data', () => {
+    cy.contains('customer').should('exist');
+    cy.contains('310.29').should('exist');
+    cy.contains('0%').should('exist');
+    cy.contains('Name').should('exist');
+    cy.contains('Average latency (ms)').should('exist');
+    cy.contains('Error rate').should('exist');
+    cy.contains('Throughput').should('exist');
+    cy.contains('Traces').should('exist');
+  });
+
+  it('Verifies traces links to traces page with filter applied', () => {
+    cy.wait(delay);
+    cy.get('.euiLink').contains('7').click();
+    cy.wait(delay);
+
+    cy.get('h2.euiTitle').contains('Traces').should('exist');
+    cy.contains(' (7)').should('exist');
+    cy.get("[data-test-subj='filterBadge']").eq(0).contains('process.serviceName: customer')
+  })
+});
\ No newline at end of file
diff --git a/.cypress/integration/6_trace_analytics_traces.spec.js b/.cypress/integration/6_trace_analytics_traces.spec.js
new file mode 100644
index 0000000000..8943991ff7
--- /dev/null
+++ b/.cypress/integration/6_trace_analytics_traces.spec.js
@@ -0,0 +1,190 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+
+import { delay, setTimeFilter, SPAN_ID, TRACE_ID } from '../utils/constants';
+
+describe('Testing traces table empty state', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/traces', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    cy.wait(delay * 3);
+  });
+
+  it('Renders empty state', () => {
+    cy.contains(' (0)').should('exist');
+    cy.contains('No matches').should('exist');
+  });
+});
+
+describe('Testing traces table', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/traces', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Renders the traces table', () => {
+    cy.contains(' (108)').should('exist');
+    cy.contains('03/25/2021 10:23:45').should('exist');
+    cy.contains('03f9c770db5ee2f1caac0...').should('exist');
+    cy.contains('224.99').should('exist');
+
+    // test data contains output from data-prepper 0.8, which doesn't have fields denormalized
+    // Trace Analytics should be able to handle the discrepancy if some fields cannot be parsed
+    cy.contains('Invalid date').should('exist');
+    cy.contains('-').should('exist');
+  });
+
+  it('Sorts the traces table', () => {
+    cy.get('.euiTableRow').first().contains('-').should('exist');
+    cy.get('.euiTableCellContent').contains('Trace group').click();
+    cy.get('.euiTableRow').first().contains('/%2A%2A').should('exist');
+  });
+
+  it('Searches correctly', () => {
+    cy.get('input[type="search"]').focus().type(`${TRACE_ID}{enter}`);
+    cy.get('.euiButton__text').contains('Refresh').click();
+    cy.contains(' (1)').should('exist');
+    cy.contains('03/25/2021 10:21:22').should('exist');
+  });
+});
+
+describe('Testing trace view', () => {
+  beforeEach(() => {
+    cy.visit(`app/observability-dashboards#/trace_analytics/traces`, {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+    cy.get('input[type="search"]').focus().type(`${TRACE_ID}`);
+    cy.get('.euiButton__text').contains('Refresh').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="trace-link"]').eq(0).click();
+  });
+
+  it('Renders the trace view', () => {
+    cy.contains('43.75%').should('exist');
+    cy.contains('42.58%').should('exist');
+    cy.contains('03/25/2021 10:21:22').should('exist');
+    cy.contains(TRACE_ID).should('exist');
+
+    cy.get('div.js-plotly-plot').should('have.length.gte', 2);
+    cy.get('text[data-unformatted="database <br>mysql.APM "]').should('exist');
+    cy.contains(`"${SPAN_ID}"`).should('exist');
+  });
+
+  it('Has working breadcrumbs', () => {
+    cy.get(`.euiBreadcrumb[href="#/trace_analytics/traces/${TRACE_ID}"]`).click();
+    cy.wait(delay);
+    cy.get('h2.euiTitle').contains(TRACE_ID).should('exist');
+    cy.get('.euiBreadcrumb[href="#/trace_analytics/traces"]').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Traces').should('exist');
+    cy.get('.euiBreadcrumb[href="#/trace_analytics/home"]').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Dashboard').should('exist');
+    cy.get('.euiBreadcrumb[href="observability-dashboards#/"]').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Event analytics').should('exist');
+  });
+
+  it('Renders data grid, flyout and filters', () => {
+    cy.get('.euiButton__text[title="Span list"]').click({ force: true });
+    cy.contains('2 columns hidden').should('exist');
+
+    cy.wait(delay);
+    cy.get('.euiLink').contains(SPAN_ID).trigger('mouseover', { force: true });
+    cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true });
+    cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true }); // first click doesn't go through eui data grid
+    cy.wait(delay);
+    cy.contains('Span detail').should('exist');
+    cy.contains('Span attributes').should('exist');
+    cy.get('.euiTextColor').contains('Span ID').trigger('mouseover');
+    cy.get('.euiButtonIcon[aria-label="span-flyout-filter-icon"').click({ force: true });
+    cy.wait(delay);
+
+    cy.get('.euiBadge__text').contains('spanId: ').should('exist');
+    cy.contains('Spans (1)').should('exist');
+  });
+});
+
+describe('Testing traces table', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/traces', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Renders the traces table and verify Table Column, Pagination and Rows Data ', () => {
+    cy.get('.euiTableCellContent__text').contains('Trace ID').should('exist');
+    cy.get('.euiTableCellContent__text').contains('Trace group').should('exist');
+    cy.get('.euiTableCellContent__text').contains('Latency (ms)').should('exist');
+    cy.get('.euiTableCellContent__text').contains('Percentile in trace group').should('exist');
+    cy.get('.euiTableCellContent__text').contains('Errors').should('exist');
+    cy.get('.euiTableCellContent__text').contains('Last updated').should('exist');
+    cy.get('[data-test-subj="pagination-button-next"]').click();
+    cy.contains('client_pay_order').should('exist');
+    cy.get('[data-test-subj="pagination-button-previous"]').click();
+    cy.contains('224.99').should('exist');
+    cy.get('.euiButtonEmpty').contains('5').click();
+    cy.contains('690d3c7af1a78cf89c43e...').should('exist');
+    cy.contains('5be8370207cbb002a165d...').click();
+    cy.contains('client_create_order').should('exist');
+    cy.get('path[style*="rgb(116, 146, 231)"]').should('exist');
+    cy.go('back');
+    cy.wait(delay);
+    cy.get('.euiButtonEmpty__text').contains('Rows per page').click();
+    cy.get('.euiContextMenuItem__text').contains('15 rows').click();
+    let expected_row_count=15;
+    cy.get('.euiTable--auto')
+    .find("tr")
+    .then((row) => {
+      let total=row.length-1;
+      expect(total).to.equal(expected_row_count);
+    });
+  });
+});
+
+describe('Testing switch mode to jaeger', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/traces', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+    cy.get("[data-test-subj='indexPattern-switch-link']").click();
+    cy.get("[data-test-subj='jaeger-mode']").click();
+  });
+
+  it('Verifies columns and data', () => {
+    cy.contains('08ee9fd9bf964384').should('exist');
+    cy.contains('0.012').should('exist');
+    cy.contains('No').should('exist');
+    cy.contains('01/24/2023 08:33:35').should('exist');
+    cy.contains('Latency (ms)').should('exist');
+    cy.contains('Trace ID').should('exist');
+    cy.contains('Errors').should('exist');
+    cy.contains('Last updated').should('exist');
+  });
+
+  it('Verifies Trace View', () => {
+    cy.contains('08ee9fd9bf964384').click();
+    cy.contains("Time spent by service").should('exist');
+    cy.get("[data-test-subj='span-gantt-chart-panel']").should('exist');
+  })
+});
diff --git a/.cypress/utils/constants.js b/.cypress/utils/constants.js
new file mode 100644
index 0000000000..4f9487ceb0
--- /dev/null
+++ b/.cypress/utils/constants.js
@@ -0,0 +1,137 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const delay = 1500;
+export const COMMAND_TIMEOUT_LONG = 10000;
+
+// trace analytics
+export const TRACE_ID = '8832ed6abbb2a83516461960c89af49d';
+export const SPAN_ID = 'a673bc074b438374';
+export const SERVICE_NAME = 'frontend-client';
+export const SERVICE_SPAN_ID = '7df5609a6d104736';
+
+export const testDataSet = [
+  {
+    mapping_url: 'https://raw.githubusercontent.com/opensearch-project/dashboards-observability/main/.cypress/utils/otel-v1-apm-service-map-mappings.json',
+    data_url: 'https://raw.githubusercontent.com/opensearch-project/dashboards-observability/main/.cypress/utils/otel-v1-apm-service-map.json',
+    index: 'otel-v1-apm-service-map',
+  },
+  {
+    mapping_url: 'https://raw.githubusercontent.com/opensearch-project/dashboards-observability/main/.cypress/utils/otel-v1-apm-span-000001-mappings.json',
+    data_url: 'https://raw.githubusercontent.com/opensearch-project/dashboards-observability/main/.cypress/utils/otel-v1-apm-span-000001.json',
+    index: 'otel-v1-apm-span-000001',
+  },
+  {
+    mapping_url: 'https://raw.githubusercontent.com/opensearch-project/dashboards-observability/main/.cypress/utils/otel-v1-apm-span-000001-mappings.json',
+    data_url: 'https://raw.githubusercontent.com/opensearch-project/dashboards-observability/main/.cypress/utils/otel-v1-apm-span-000002.json',
+    index: 'otel-v1-apm-span-000002',
+  },
+]
+
+export const jaegerTestDataSet = [
+  {
+    mapping_url: 'https://raw.githubusercontent.com/opensearch-project/dashboards-observability/main/.cypress/utils/jaeger-service-2023-01-24-mappings.json',
+    data_url: 'https://raw.githubusercontent.com/opensearch-project/dashboards-observability/main/.cypress/utils/jaeger-service-2023-01-24.json',
+    index: 'jaeger-service-2023-01-24',
+  },
+  {
+    mapping_url: 'https://raw.githubusercontent.com/opensearch-project/dashboards-observability/main/.cypress/utils/jaeger-span-2023-01-24-mappings.json',
+    data_url: 'https://raw.githubusercontent.com/opensearch-project/dashboards-observability/main/.cypress/utils/jaeger-span-2023-01-24.json',
+    index: 'jaeger-span-2023-01-24',
+  },
+]
+
+export const setTimeFilter = (setEndTime = false, refresh = true) => {
+  const startTime = 'Mar 25, 2021 @ 10:00:00.000';
+  const endTime = 'Mar 25, 2021 @ 11:00:00.000';
+  cy.get('button.euiButtonEmpty[aria-label="Date quick select"]').click();
+  cy.get('.euiQuickSelect__applyButton').click();
+  cy.get('.euiSuperDatePicker__prettyFormatLink').click();
+  cy.get(
+    'button.euiDatePopoverButton--start[data-test-subj="superDatePickerstartDatePopoverButton"]'
+  ).click();
+  cy.get('.euiTab__content').contains('Absolute').click();
+  cy.get('input[data-test-subj="superDatePickerAbsoluteDateInput"]')
+    .focus()
+    .type('{selectall}' + startTime, { force: true });
+  if (setEndTime) {
+    cy.wait(delay);
+    cy.get(
+      'button.euiDatePopoverButton--end[data-test-subj="superDatePickerendDatePopoverButton"]'
+    ).click();
+    cy.wait(delay);
+    cy.get('.euiTab__content').contains('Absolute').click();
+    cy.get('input[data-test-subj="superDatePickerAbsoluteDateInput"]')
+      .focus()
+      .type('{selectall}' + endTime, { force: true });
+  }
+  if (refresh) cy.get('.euiButton__text').contains('Refresh').click();
+  cy.wait(delay);
+};
+
+// notebooks
+export const TEST_NOTEBOOK = 'Test Notebook';
+export const SAMPLE_URL = 'https://github.com/opensearch-project/sql/tree/main/sql-jdbc';
+export const NOTEBOOK_TEXT = 'Use Notebooks to interactively and collaboratively develop rich reports backed by live data. Common use cases for notebooks includes creating postmortem reports, designing run books, building live infrastructure reports, or even documentation.';
+export const OPENSEARCH_URL = 'https://opensearch.org/docs/latest/observability-plugin/notebooks/';
+export const MARKDOWN_TEXT = `%md
+# Heading 1
+
+#### List and links
+
+* 1
+* 2
+* [SQL JDBC](${SAMPLE_URL})
+
+---
+#### Code block
+* Explain SQL
+\`\`\`
+POST _plugins/_sql/_explain
+{
+  "query": "SELECT * FROM my-index LIMIT 50"
+}
+\`\`\`
+
+#### Table
+| a1 | b1 | c1 | d1 |
+|----|----|----|----|
+| a2 | b2 | c2 | d2 |
+| a3 | b3 | c3 | d3 |
+`
+
+export const SQL_QUERY_TEXT = `%sql
+select * from opensearch_dashboards_sample_data_flights limit 20
+`
+
+export const PPL_QUERY_TEXT = `%ppl
+source=opensearch_dashboards_sample_data_flights
+`
+
+export const supressResizeObserverIssue = () => {
+  // exception is thrown on loading EuiDataGrid in cypress only, ignore for now
+  cy.on('uncaught:exception', (err, runnable) => {
+    if (err.message.includes('ResizeObserver loop')) return false;
+  });
+};
+
+export const verify_traces_spans_data_grid_cols_exists = () => {
+  cy.get('.euiDataGridHeaderCell__content').contains('Span ID').should('exist');
+  cy.get('.euiDataGridHeaderCell__content').contains('Trace ID').should('exist');
+  cy.get('.euiDataGridHeaderCell__content').contains('Operation').should('exist');
+  cy.get('.euiDataGridHeaderCell__content').contains('Duration').should('exist');
+  cy.get('.euiDataGridHeaderCell__content').contains('Start time').should('exist');
+  cy.get('.euiDataGridHeaderCell__content').contains('End time').should('exist');
+  cy.get('.euiDataGridHeaderCell__content').contains('Errors').should('exist');
+}
+
+export const count_table_row = (expected_row_count) => {
+  cy.get('.euiDataGridHeader [role="columnheader"]').then($el => {
+    let colmun_header_count = Cypress.$($el).length;
+    let table_grid_cell_count = Cypress.$('[data-test-subj="dataGridRowCell"]').length;
+    const total_row_count = table_grid_cell_count / colmun_header_count;
+    expect(total_row_count).to.equal(expected_row_count)
+  });
+}
diff --git a/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap b/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap
new file mode 100644
index 0000000000..8489eec0a0
--- /dev/null
+++ b/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap
@@ -0,0 +1,1159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Search bar components renders date picker 1`] = `
+<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"
+>
+  <EuiFlexGroup
+    className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+    gutterSize="s"
+    responsive={false}
+  >
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+    >
+      <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="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+            >
+              <EuiQuickSelectPopover
+                applyTime={[Function]}
+                className="euiFormControlLayout__prepend"
+                commonlyUsedRanges={
+                  Array [
+                    Object {
+                      "end": "now/d",
+                      "label": "Today",
+                      "start": "now/d",
+                    },
+                    Object {
+                      "end": "now/w",
+                      "label": "This week",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now/M",
+                      "label": "This month",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now/y",
+                      "label": "This year",
+                      "start": "now/y",
+                    },
+                    Object {
+                      "end": "now-1d/d",
+                      "label": "Yesterday",
+                      "start": "now-1d/d",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Week to date",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Month to date",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Year to date",
+                      "start": "now/y",
+                    },
+                  ]
+                }
+                dateFormat=""
+                end="now"
+                isAutoRefreshOnly={false}
+                isDisabled={false}
+                isPaused={true}
+                key="0/.0"
+                recentlyUsedRanges={Array []}
+                refreshInterval={0}
+                start="now-5m"
+              >
+                <EuiPopover
+                  anchorClassName="euiQuickSelectPopover__anchor"
+                  anchorPosition="downLeft"
+                  button={
+                    <EuiButtonEmpty
+                      aria-label="Date quick select"
+                      className="euiFormControlLayout__prepend"
+                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                      iconSide="right"
+                      iconType="arrowDown"
+                      isDisabled={false}
+                      onClick={[Function]}
+                      size="xs"
+                      textProps={
+                        Object {
+                          "className": "euiQuickSelectPopover__buttonText",
+                        }
+                      }
+                    >
+                      <EuiIcon
+                        type="calendar"
+                      />
+                    </EuiButtonEmpty>
+                  }
+                  closePopover={[Function]}
+                  display="inlineBlock"
+                  hasArrow={true}
+                  isOpen={false}
+                  ownFocus={true}
+                  panelPaddingSize="m"
+                >
+                  <div
+                    className="euiPopover euiPopover--anchorDownLeft"
+                  >
+                    <div
+                      className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                    >
+                      <EuiButtonEmpty
+                        aria-label="Date quick select"
+                        className="euiFormControlLayout__prepend"
+                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                        iconSide="right"
+                        iconType="arrowDown"
+                        isDisabled={false}
+                        onClick={[Function]}
+                        size="xs"
+                        textProps={
+                          Object {
+                            "className": "euiQuickSelectPopover__buttonText",
+                          }
+                        }
+                      >
+                        <button
+                          aria-label="Date quick select"
+                          className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                          data-test-subj="superDatePickerToggleQuickMenuButton"
+                          disabled={false}
+                          onClick={[Function]}
+                          type="button"
+                        >
+                          <EuiButtonContent
+                            className="euiButtonEmpty__content"
+                            iconSide="right"
+                            iconSize="s"
+                            iconType="arrowDown"
+                            textProps={
+                              Object {
+                                "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                              }
+                            }
+                          >
+                            <span
+                              className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                            >
+                              <EuiIcon
+                                className="euiButtonContent__icon"
+                                color="inherit"
+                                size="s"
+                                type="arrowDown"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                              <span
+                                className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                              >
+                                <EuiIcon
+                                  type="calendar"
+                                >
+                                  <EuiIconEmpty
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                    focusable="false"
+                                    role="img"
+                                    style={null}
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                      focusable="false"
+                                      height={16}
+                                      role="img"
+                                      style={null}
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    />
+                                  </EuiIconEmpty>
+                                </EuiIcon>
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonEmpty>
+                    </div>
+                  </div>
+                </EuiPopover>
+              </EuiQuickSelectPopover>
+              <div
+                className="euiFormControlLayout__childrenWrapper"
+              >
+                <EuiDatePickerRange
+                  className="euiDatePickerRange--inGroup"
+                  endDateControl={<div />}
+                  iconType={false}
+                  isCustom={true}
+                  startDateControl={<div />}
+                >
+                  <div
+                    className="euiDatePickerRange euiDatePickerRange--inGroup"
+                  >
+                    <button
+                      className="euiSuperDatePicker__prettyFormat"
+                      data-test-subj="superDatePickerShowDatesButton"
+                      disabled={false}
+                      onClick={[Function]}
+                    >
+                      Last 5 minutes
+                      <span
+                        className="euiSuperDatePicker__prettyFormatLink"
+                      >
+                        <EuiI18n
+                          default="Show dates"
+                          token="euiSuperDatePicker.showDatesButtonLabel"
+                        >
+                          Show dates
+                        </EuiI18n>
+                      </span>
+                    </button>
+                  </div>
+                </EuiDatePickerRange>
+                <EuiFormControlLayoutIcons />
+              </div>
+            </div>
+          </EuiFormControlLayout>
+        </div>
+      </EuiFlexItem>
+    </div>
+  </EuiFlexGroup>
+</EuiSuperDatePicker>
+`;
+
+exports[`Search bar components renders search bar 1`] = `
+<SearchBar
+  appConfigs={Array []}
+  endTime="now"
+  filters={Array []}
+  mode="data_prepper"
+  page="dashboard"
+  query="test"
+  refresh={[MockFunction]}
+  setEndTime={[MockFunction]}
+  setFilters={[MockFunction]}
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+>
+  <EuiFlexGroup
+    gutterSize="s"
+  >
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+    >
+      <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={[MockFunction]}
+            placeholder="Trace ID, trace group name, service name"
+            value="test"
+          >
+            <EuiFormControlLayout
+              compressed={false}
+              fullWidth={true}
+              icon="search"
+              isLoading={false}
+            >
+              <div
+                className="euiFormControlLayout euiFormControlLayout--fullWidth"
+              >
+                <div
+                  className="euiFormControlLayout__childrenWrapper"
+                >
+                  <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="test"
+                    />
+                  </EuiValidatableControl>
+                  <EuiFormControlLayoutIcons
+                    compressed={false}
+                    icon="search"
+                    isLoading={false}
+                  >
+                    <div
+                      className="euiFormControlLayoutIcons"
+                    >
+                      <EuiFormControlLayoutCustomIcon
+                        size="m"
+                        type="search"
+                      >
+                        <span
+                          className="euiFormControlLayoutCustomIcon"
+                        >
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiFormControlLayoutCustomIcon__icon"
+                            size="m"
+                            type="search"
+                          >
+                            <EuiIconEmpty
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                              focusable="false"
+                              role="img"
+                              style={null}
+                            >
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </EuiIconEmpty>
+                          </EuiIcon>
+                        </span>
+                      </EuiFormControlLayoutCustomIcon>
+                    </div>
+                  </EuiFormControlLayoutIcons>
+                </div>
+              </div>
+            </EuiFormControlLayout>
+          </EuiFieldSearch>
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+        style={
+          Object {
+            "maxWidth": "40vw",
+          }
+        }
+      >
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
+          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",
+                },
+              ]
+            }
+            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}
+            >
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+              >
+                <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="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                      >
+                        <EuiQuickSelectPopover
+                          applyTime={[Function]}
+                          className="euiFormControlLayout__prepend"
+                          commonlyUsedRanges={
+                            Array [
+                              Object {
+                                "end": "now/d",
+                                "label": "Today",
+                                "start": "now/d",
+                              },
+                              Object {
+                                "end": "now/w",
+                                "label": "This week",
+                                "start": "now/w",
+                              },
+                              Object {
+                                "end": "now/M",
+                                "label": "This month",
+                                "start": "now/M",
+                              },
+                              Object {
+                                "end": "now/y",
+                                "label": "This year",
+                                "start": "now/y",
+                              },
+                              Object {
+                                "end": "now-1d/d",
+                                "label": "Yesterday",
+                                "start": "now-1d/d",
+                              },
+                              Object {
+                                "end": "now",
+                                "label": "Week to date",
+                                "start": "now/w",
+                              },
+                              Object {
+                                "end": "now",
+                                "label": "Month to date",
+                                "start": "now/M",
+                              },
+                              Object {
+                                "end": "now",
+                                "label": "Year to date",
+                                "start": "now/y",
+                              },
+                            ]
+                          }
+                          dateFormat=""
+                          end="now"
+                          isAutoRefreshOnly={false}
+                          isDisabled={false}
+                          isPaused={true}
+                          key="0/.0"
+                          recentlyUsedRanges={Array []}
+                          refreshInterval={0}
+                          start="now-5m"
+                        >
+                          <EuiPopover
+                            anchorClassName="euiQuickSelectPopover__anchor"
+                            anchorPosition="downLeft"
+                            button={
+                              <EuiButtonEmpty
+                                aria-label="Date quick select"
+                                className="euiFormControlLayout__prepend"
+                                data-test-subj="superDatePickerToggleQuickMenuButton"
+                                iconSide="right"
+                                iconType="arrowDown"
+                                isDisabled={false}
+                                onClick={[Function]}
+                                size="xs"
+                                textProps={
+                                  Object {
+                                    "className": "euiQuickSelectPopover__buttonText",
+                                  }
+                                }
+                              >
+                                <EuiIcon
+                                  type="calendar"
+                                />
+                              </EuiButtonEmpty>
+                            }
+                            closePopover={[Function]}
+                            display="inlineBlock"
+                            hasArrow={true}
+                            isOpen={false}
+                            ownFocus={true}
+                            panelPaddingSize="m"
+                          >
+                            <div
+                              className="euiPopover euiPopover--anchorDownLeft"
+                            >
+                              <div
+                                className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                              >
+                                <EuiButtonEmpty
+                                  aria-label="Date quick select"
+                                  className="euiFormControlLayout__prepend"
+                                  data-test-subj="superDatePickerToggleQuickMenuButton"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  isDisabled={false}
+                                  onClick={[Function]}
+                                  size="xs"
+                                  textProps={
+                                    Object {
+                                      "className": "euiQuickSelectPopover__buttonText",
+                                    }
+                                  }
+                                >
+                                  <button
+                                    aria-label="Date quick select"
+                                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiButtonContent
+                                      className="euiButtonEmpty__content"
+                                      iconSide="right"
+                                      iconSize="s"
+                                      iconType="arrowDown"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                      >
+                                        <EuiIcon
+                                          className="euiButtonContent__icon"
+                                          color="inherit"
+                                          size="s"
+                                          type="arrowDown"
+                                        >
+                                          <EuiIconArrowDown
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                            focusable="false"
+                                            role="img"
+                                            style={null}
+                                          >
+                                            <svg
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                              focusable="false"
+                                              height={16}
+                                              role="img"
+                                              style={null}
+                                              viewBox="0 0 16 16"
+                                              width={16}
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            >
+                                              <path
+                                                d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                fillRule="non-zero"
+                                              />
+                                            </svg>
+                                          </EuiIconArrowDown>
+                                        </EuiIcon>
+                                        <span
+                                          className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                        >
+                                          <EuiIcon
+                                            type="calendar"
+                                          >
+                                            <EuiIconCalendar
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={null}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              >
+                                                <path
+                                                  d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                  fillRule="evenodd"
+                                                />
+                                              </svg>
+                                            </EuiIconCalendar>
+                                          </EuiIcon>
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonEmpty>
+                              </div>
+                            </div>
+                          </EuiPopover>
+                        </EuiQuickSelectPopover>
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <EuiDatePickerRange
+                            className="euiDatePickerRange--inGroup"
+                            endDateControl={<div />}
+                            iconType={false}
+                            isCustom={true}
+                            startDateControl={<div />}
+                          >
+                            <div
+                              className="euiDatePickerRange euiDatePickerRange--inGroup"
+                            >
+                              <button
+                                className="euiSuperDatePicker__prettyFormat"
+                                data-test-subj="superDatePickerShowDatesButton"
+                                disabled={false}
+                                onClick={[Function]}
+                              >
+                                Last 5 minutes
+                                <span
+                                  className="euiSuperDatePicker__prettyFormatLink"
+                                >
+                                  <EuiI18n
+                                    default="Show dates"
+                                    token="euiSuperDatePicker.showDatesButtonLabel"
+                                  >
+                                    Show dates
+                                  </EuiI18n>
+                                </span>
+                              </button>
+                            </div>
+                          </EuiDatePickerRange>
+                          <EuiFormControlLayoutIcons />
+                        </div>
+                      </div>
+                    </EuiFormControlLayout>
+                  </div>
+                </EuiFlexItem>
+              </div>
+            </EuiFlexGroup>
+          </EuiSuperDatePicker>
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <EuiButton
+            data-click-metric-element="trace_analytics.refresh_button"
+            data-test-subj="superDatePickerApplyTimeButton"
+            iconType="refresh"
+            onClick={[MockFunction]}
+          >
+            <EuiButtonDisplay
+              baseClassName="euiButton"
+              data-click-metric-element="trace_analytics.refresh_button"
+              data-test-subj="superDatePickerApplyTimeButton"
+              disabled={false}
+              element="button"
+              iconType="refresh"
+              isDisabled={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              <button
+                className="euiButton euiButton--primary"
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                disabled={false}
+                onClick={[MockFunction]}
+                style={
+                  Object {
+                    "minWidth": undefined,
+                  }
+                }
+                type="button"
+              >
+                <EuiButtonContent
+                  className="euiButton__content"
+                  iconSide="left"
+                  iconType="refresh"
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
+                >
+                  <span
+                    className="euiButtonContent euiButton__content"
+                  >
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      color="inherit"
+                      size="m"
+                      type="refresh"
+                    >
+                      <EuiIconEmpty
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                        focusable="false"
+                        role="img"
+                        style={null}
+                      >
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                          focusable="false"
+                          height={16}
+                          role="img"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </EuiIconEmpty>
+                    </EuiIcon>
+                    <span
+                      className="euiButton__text"
+                    >
+                      Refresh
+                    </span>
+                  </span>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonDisplay>
+          </EuiButton>
+        </div>
+      </EuiFlexItem>
+    </div>
+  </EuiFlexGroup>
+  <EuiSpacer
+    size="s"
+  >
+    <div
+      className="euiSpacer euiSpacer--s"
+    />
+  </EuiSpacer>
+  <Filters
+    appConfigs={Array []}
+    filters={Array []}
+    mode="data_prepper"
+    page="dashboard"
+    setFilters={[MockFunction]}
+  >
+    <EuiFlexGroup
+      alignItems="center"
+      gutterSize="xs"
+      responsive={false}
+      style={
+        Object {
+          "minHeight": 32,
+        }
+      }
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+        style={
+          Object {
+            "minHeight": 32,
+          }
+        }
+      >
+        <EuiFlexItem
+          grow={false}
+        >
+          <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]}
+                data-test-subj="global-filter-button"
+                display="inlineBlock"
+                hasArrow={true}
+                isOpen={false}
+                ownFocus={true}
+                panelPaddingSize="none"
+                withTitle={true}
+              >
+                <div
+                  className="euiPopover euiPopover--anchorRightUp"
+                  data-test-subj="global-filter-button"
+                  withTitle={true}
+                >
+                  <div
+                    className="euiPopover__anchor"
+                  >
+                    <EuiButtonIcon
+                      aria-label="Change all filters"
+                      iconType="filter"
+                      onClick={[Function]}
+                      title="Change all filters"
+                    >
+                      <button
+                        aria-label="Change all filters"
+                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                        disabled={false}
+                        onClick={[Function]}
+                        title="Change all filters"
+                        type="button"
+                      >
+                        <EuiIcon
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          color="inherit"
+                          size="m"
+                          type="filter"
+                        >
+                          <EuiIconEmpty
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                      </button>
+                    </EuiButtonIcon>
+                  </div>
+                </div>
+              </EuiPopover>
+            </GlobalFilterButton>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <AddFilterButton>
+              <EuiPopover
+                anchorPosition="downLeft"
+                button={
+                  <EuiButtonEmpty
+                    onClick={[Function]}
+                    size="xs"
+                  >
+                    + Add filter
+                  </EuiButtonEmpty>
+                }
+                closePopover={[Function]}
+                data-test-subj="addfilter"
+                display="inlineBlock"
+                hasArrow={true}
+                isOpen={false}
+                ownFocus={true}
+                panelPaddingSize="m"
+                withTitle={true}
+              >
+                <div
+                  className="euiPopover euiPopover--anchorDownLeft"
+                  data-test-subj="addfilter"
+                  withTitle={true}
+                >
+                  <div
+                    className="euiPopover__anchor"
+                  >
+                    <EuiButtonEmpty
+                      onClick={[Function]}
+                      size="xs"
+                    >
+                      <button
+                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <EuiButtonContent
+                          className="euiButtonEmpty__content"
+                          iconSide="left"
+                          iconSize="s"
+                          textProps={
+                            Object {
+                              "className": "euiButtonEmpty__text",
+                            }
+                          }
+                        >
+                          <span
+                            className="euiButtonContent euiButtonEmpty__content"
+                          >
+                            <span
+                              className="euiButtonEmpty__text"
+                            >
+                              + Add filter
+                            </span>
+                          </span>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonEmpty>
+                  </div>
+                </div>
+              </EuiPopover>
+            </AddFilterButton>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </Filters>
+</SearchBar>
+`;
diff --git a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filters.test.tsx.snap b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filters.test.tsx.snap
new file mode 100644
index 0000000000..3d483d4dd2
--- /dev/null
+++ b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filters.test.tsx.snap
@@ -0,0 +1,186 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Filter component renders filters 1`] = `
+<Filters
+  appConfigs={Array []}
+  filters={Array []}
+  page="dashboard"
+  setFilters={[MockFunction]}
+>
+  <EuiFlexGroup
+    alignItems="center"
+    gutterSize="xs"
+    responsive={false}
+    style={
+      Object {
+        "minHeight": 32,
+      }
+    }
+  >
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+      style={
+        Object {
+          "minHeight": 32,
+        }
+      }
+    >
+      <EuiFlexItem
+        grow={false}
+      >
+        <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]}
+              data-test-subj="global-filter-button"
+              display="inlineBlock"
+              hasArrow={true}
+              isOpen={false}
+              ownFocus={true}
+              panelPaddingSize="none"
+              withTitle={true}
+            >
+              <div
+                className="euiPopover euiPopover--anchorRightUp"
+                data-test-subj="global-filter-button"
+                withTitle={true}
+              >
+                <div
+                  className="euiPopover__anchor"
+                >
+                  <EuiButtonIcon
+                    aria-label="Change all filters"
+                    iconType="filter"
+                    onClick={[Function]}
+                    title="Change all filters"
+                  >
+                    <button
+                      aria-label="Change all filters"
+                      className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Change all filters"
+                      type="button"
+                    >
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        color="inherit"
+                        size="m"
+                        type="filter"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </div>
+              </div>
+            </EuiPopover>
+          </GlobalFilterButton>
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <AddFilterButton>
+            <EuiPopover
+              anchorPosition="downLeft"
+              button={
+                <EuiButtonEmpty
+                  onClick={[Function]}
+                  size="xs"
+                >
+                  + Add filter
+                </EuiButtonEmpty>
+              }
+              closePopover={[Function]}
+              data-test-subj="addfilter"
+              display="inlineBlock"
+              hasArrow={true}
+              isOpen={false}
+              ownFocus={true}
+              panelPaddingSize="m"
+              withTitle={true}
+            >
+              <div
+                className="euiPopover euiPopover--anchorDownLeft"
+                data-test-subj="addfilter"
+                withTitle={true}
+              >
+                <div
+                  className="euiPopover__anchor"
+                >
+                  <EuiButtonEmpty
+                    onClick={[Function]}
+                    size="xs"
+                  >
+                    <button
+                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiButtonContent
+                        className="euiButtonEmpty__content"
+                        iconSide="left"
+                        iconSize="s"
+                        textProps={
+                          Object {
+                            "className": "euiButtonEmpty__text",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButtonEmpty__content"
+                        >
+                          <span
+                            className="euiButtonEmpty__text"
+                          >
+                            + Add filter
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </button>
+                  </EuiButtonEmpty>
+                </div>
+              </div>
+            </EuiPopover>
+          </AddFilterButton>
+        </div>
+      </EuiFlexItem>
+    </div>
+  </EuiFlexGroup>
+</Filters>
+`;
diff --git a/public/components/trace_analytics/components/common/filters/filters.tsx b/public/components/trace_analytics/components/common/filters/filters.tsx
new file mode 100644
index 0000000000..aa2cc086cb
--- /dev/null
+++ b/public/components/trace_analytics/components/common/filters/filters.tsx
@@ -0,0 +1,324 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiBadge,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiContextMenu,
+  EuiContextMenuPanelDescriptor,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiTextColor,
+} from '@elastic/eui';
+import { TraceAnalyticsMode } from 'public/components/trace_analytics/home';
+import React, { useMemo, useState } from 'react';
+import { FilterEditPopover } from './filter_edit_popover';
+import { getFilterFields, getValidFilterFields } from './filter_helpers';
+
+export interface FilterType {
+  field: string;
+  operator: string;
+  value: any;
+  inverted: boolean;
+  disabled: boolean;
+  custom?: any;
+  locked?: boolean;
+}
+
+export interface FiltersProps {
+  filters: FilterType[];
+  appConfigs?: FilterType[];
+  setFilters: (filters: FilterType[]) => void;
+  mode: TraceAnalyticsMode;
+}
+
+interface FiltersOwnProps extends FiltersProps {
+  page: 'dashboard' | 'traces' | 'services' | 'app';
+}
+
+export function Filters(props: FiltersOwnProps) {
+  // set a filter at an index. if newFilter doesn't exist, remove filter at the index
+  // if index doesn't exist, append newFilter to the end
+  const setFilter = (newFilter: FilterType, index: number) => {
+    const newFilters = [...props.filters];
+    if (newFilter) newFilters.splice(index, 1, newFilter);
+    else newFilters.splice(index, 1);
+    props.setFilters(newFilters);
+  };
+
+  const validFilterFields = useMemo(() => getValidFilterFields(props.mode, props.page), [props.page, props.mode]);
+  const filterFieldOptions = useMemo(
+    () => getFilterFields(props.mode, props.page).map((field) => ({ label: field })),
+    [props.page]
+  );
+
+  const globalPopoverPanels = [
+    {
+      id: 0,
+      title: 'Change all filters',
+      items: [
+        {
+          name: 'Enable all',
+          icon: <EuiIcon type="eye" size="m" />,
+          onClick: () => {
+            props.setFilters(
+              props.filters.map((filter) => ({
+                ...filter,
+                disabled: filter.locked ? filter.disabled : false,
+              }))
+            );
+          },
+        },
+        {
+          name: 'Disable all',
+          icon: <EuiIcon type="eyeClosed" size="m" />,
+          onClick: () => {
+            props.setFilters(
+              props.filters.map((filter) => ({
+                ...filter,
+                disabled: filter.locked ? filter.disabled : true,
+              }))
+            );
+          },
+        },
+        {
+          name: 'Invert inclusion',
+          icon: <EuiIcon type="invert" size="m" />,
+          onClick: () => {
+            props.setFilters(
+              // if filter.custom.query exists, it's a customized filter and "inverted" is alwasy false
+              props.filters.map((filter) => ({
+                ...filter,
+                inverted: filter.locked
+                  ? filter.inverted
+                  : filter.custom?.query
+                  ? false
+                  : !filter.inverted,
+              }))
+            );
+          },
+        },
+        {
+          name: 'Invert enabled/disabled',
+          icon: <EuiIcon type="eye" size="m" />,
+          onClick: () => {
+            props.setFilters(
+              props.filters.map((filter) => ({
+                ...filter,
+                disabled: filter.locked ? filter.disabled : !filter.disabled,
+              }))
+            );
+          },
+        },
+        {
+          name: 'Remove all',
+          icon: <EuiIcon type="trash" size="m" />,
+          onClick: () => {
+            props.setFilters([]);
+          },
+        },
+      ],
+    },
+  ];
+
+  const getFilterPopoverPanels = (
+    filter: FilterType,
+    index: number,
+    closePopover: () => void
+  ): EuiContextMenuPanelDescriptor[] => [
+    {
+      id: 0,
+      items: [
+        {
+          name: 'Edit filter',
+          icon: <EuiIcon type="invert" size="m" />,
+          disabled: !!filter.custom?.query || validFilterFields.indexOf(filter.field) === -1,
+          panel: 1,
+        },
+        {
+          name: `${filter.inverted ? 'Include' : 'Exclude'} results`,
+          icon: <EuiIcon type={filter.inverted ? 'plusInCircle' : 'minusInCircle'} size="m" />,
+          disabled: !!filter.custom?.query || validFilterFields.indexOf(filter.field) === -1,
+          onClick: () => {
+            filter.inverted = !filter.inverted;
+            setFilter(filter, index);
+          },
+        },
+        {
+          name: filter.disabled ? 'Re-enable' : 'Temporarily disable',
+          icon: <EuiIcon type={filter.disabled ? 'eye' : 'eyeClosed'} size="m" />,
+          disabled: validFilterFields.indexOf(filter.field) === -1,
+          onClick: () => {
+            filter.disabled = !filter.disabled;
+            setFilter(filter, index);
+          },
+        },
+        {
+          name: 'Delete',
+          icon: <EuiIcon data-test-subj="deleteFilterIcon" type="trash" size="m" />,
+          onClick: () => setFilter(null, index),
+        },
+      ],
+    },
+    {
+      id: 1,
+      width: 430,
+      title: 'Edit filter',
+      content: (
+        <div style={{ margin: 15 }}>
+          <FilterEditPopover
+            filterFieldOptions={filterFieldOptions}
+            filter={filter}
+            index={index}
+            setFilter={setFilter}
+            closePopover={closePopover}
+          />
+        </div>
+      ),
+    },
+  ];
+
+  const GlobalFilterButton = () => {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    return (
+      <EuiPopover
+        isOpen={isPopoverOpen}
+        closePopover={() => setIsPopoverOpen(false)}
+        button={
+          <EuiButtonIcon
+            onClick={() => setIsPopoverOpen(true)}
+            iconType="filter"
+            title="Change all filters"
+            aria-label="Change all filters"
+          />
+        }
+        anchorPosition="rightUp"
+        panelPaddingSize="none"
+        withTitle
+        data-test-subj='global-filter-button'
+      >
+        <EuiContextMenu initialPanelId={0} panels={globalPopoverPanels} />
+      </EuiPopover>
+    );
+  };
+
+  const AddFilterButton = () => {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const button = (
+      <EuiButtonEmpty
+        size="xs"
+        onClick={() => {
+          setIsPopoverOpen(true);
+        }}
+      >
+        + Add filter
+      </EuiButtonEmpty>
+    );
+
+    return (
+      <EuiPopover
+        button={button}
+        isOpen={isPopoverOpen}
+        closePopover={() => setIsPopoverOpen(false)}
+        anchorPosition="downLeft"
+        data-test-subj="addfilter"
+        withTitle
+      >
+        <EuiPopoverTitle>{'Add filter'}</EuiPopoverTitle>
+        <FilterEditPopover
+          filterFieldOptions={filterFieldOptions}
+          index={props.filters.length}
+          setFilter={setFilter}
+          closePopover={() => setIsPopoverOpen(false)}
+        />
+      </EuiPopover>
+    );
+  };
+
+  const renderFilters = () => {
+    const FilterBadge = ({ filter, index }: { filter: FilterType; index: number }) => {
+      const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+      const disabled = filter.locked || filter.disabled;
+      const className =
+        'globalFilterItem' +
+        (disabled ? ' globalFilterItem-isDisabled' : '') +
+        (filter.inverted ? ' globalFilterItem-isExcluded' : '');
+      const value =
+        typeof filter.value === 'string'
+          ? filter.value
+          : Array.isArray(filter.value)  // combo box
+          ? filter.value[0].label
+          : `${filter.value.from} to ${filter.value.to}`;  // range selector
+      const filterLabel = filter.inverted ? (
+        <>
+          <EuiTextColor color={disabled ? 'default' : 'danger'}>{'NOT '}</EuiTextColor>
+          <EuiTextColor color="default">{`${filter.field}: ${value}`}</EuiTextColor>
+        </>
+      ) : (
+        `${filter.field}: ${value}`
+      );
+
+      const badge = (
+        <EuiBadge
+          className={className}
+          onClick={() => setIsPopoverOpen(true)}
+          onClickAriaLabel="Open filter settings"
+          color={disabled ? '#e7e9f0' : 'hollow'}
+          iconType="cross"
+          iconSide="right"
+          iconOnClick={() => {
+            setFilter(null, index);
+          }}
+          iconOnClickAriaLabel="Remove filter"
+          data-test-subj="filterBadge"
+        >
+          {filterLabel}
+        </EuiBadge>
+      );
+      return (
+        <EuiFlexItem grow={false} key={`filter-${index}`}>
+          <EuiPopover
+            data-test-subj={`${filter.value}FilterBadge`}
+            isOpen={isPopoverOpen}
+            closePopover={() => setIsPopoverOpen(false)}
+            panelPaddingSize="none"
+            button={badge}
+          >
+            <EuiContextMenu
+              initialPanelId={0}
+              panels={getFilterPopoverPanels(filter, index, () => setIsPopoverOpen(false))}
+            />
+          </EuiPopover>
+        </EuiFlexItem>
+      );
+    };
+
+    return (
+      <>
+        {props.filters.length > 0
+          ? props.filters.map((filter, i) => <FilterBadge filter={filter} index={i} key={i} />)
+          : null}
+      </>
+    );
+  };
+
+  const filterComponents = useMemo(() => renderFilters(), [props.filters]);
+
+  return (
+    <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false} style={{ minHeight: 32 }}>
+      <EuiFlexItem grow={false}>
+        <GlobalFilterButton />
+      </EuiFlexItem>
+      {filterComponents}
+      <EuiFlexItem grow={false}>
+        <AddFilterButton />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
new file mode 100644
index 0000000000..452952c19a
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
@@ -0,0 +1,6228 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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": "Dashboard",
+      },
+    ]
+  }
+  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": "Dashboard",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  dataPrepperIndicesExist={true}
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  mode="data_prepper"
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
+  page="dashboard"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
+  }
+  query=""
+  setEndTime={[MockFunction]}
+  setFilters={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+>
+  <EuiTitle
+    size="l"
+  >
+    <h2
+      className="euiTitle euiTitle--large"
+      style={
+        Object {
+          "fontWeight": 430,
+        }
+      }
+    >
+      Dashboard
+    </h2>
+  </EuiTitle>
+  <DataSourcePicker
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    selectedMode="data_prepper"
+  >
+    <EuiPopover
+      anchorClassName="eui-textTruncate"
+      anchorPosition="downCenter"
+      button={
+        <EuiButtonEmpty
+          className="dscIndexPattern__triggerButton"
+          color="text"
+          data-test-subj="indexPattern-switch-link"
+          flush="left"
+          iconSide="right"
+          iconType="arrowDown"
+          onClick={[Function]}
+          title="data_prepper"
+        >
+          Data Prepper
+        </EuiButtonEmpty>
+      }
+      className="eui-textTruncate"
+      closePopover={[Function]}
+      display="inlineBlock"
+      hasArrow={true}
+      isOpen={false}
+      ownFocus={true}
+      panelPaddingSize="s"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownCenter eui-textTruncate"
+      >
+        <div
+          className="euiPopover__anchor eui-textTruncate"
+        >
+          <EuiButtonEmpty
+            className="dscIndexPattern__triggerButton"
+            color="text"
+            data-test-subj="indexPattern-switch-link"
+            flush="left"
+            iconSide="right"
+            iconType="arrowDown"
+            onClick={[Function]}
+            title="data_prepper"
+          >
+            <button
+              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+              data-test-subj="indexPattern-switch-link"
+              disabled={false}
+              onClick={[Function]}
+              title="data_prepper"
+              type="button"
+            >
+              <EuiButtonContent
+                className="euiButtonEmpty__content"
+                iconSide="right"
+                iconSize="m"
+                iconType="arrowDown"
+                textProps={
+                  Object {
+                    "className": "euiButtonEmpty__text",
+                  }
+                }
+              >
+                <span
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                >
+                  <EuiIcon
+                    className="euiButtonContent__icon"
+                    color="inherit"
+                    size="m"
+                    type="arrowDown"
+                  >
+                    <EuiIconArrowDown
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                      focusable="false"
+                      role="img"
+                      style={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                          fillRule="non-zero"
+                        />
+                      </svg>
+                    </EuiIconArrowDown>
+                  </EuiIcon>
+                  <span
+                    className="euiButtonEmpty__text"
+                  >
+                    Data Prepper
+                  </span>
+                </span>
+              </EuiButtonContent>
+            </button>
+          </EuiButtonEmpty>
+        </div>
+      </div>
+    </EuiPopover>
+  </DataSourcePicker>
+  <DashboardContent
+    appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Dashboard",
+        },
+      ]
+    }
+    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": "Dashboard",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
+    dataPrepperIndicesExist={true}
+    endTime="now"
+    filters={Array []}
+    http={[MockFunction]}
+    mode="data_prepper"
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    page="dashboard"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
+    query=""
+    setEndTime={[MockFunction]}
+    setFilters={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQuery={[MockFunction]}
+    setStartTime={[MockFunction]}
+    startTime="now-5m"
+  >
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      mode="data_prepper"
+      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"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <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=""
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <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
+                        compressed={false}
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
+                        >
+                          <EuiFormControlLayoutCustomIcon
+                            size="m"
+                            type="search"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="search"
+                              >
+                                <EuiIconSearch
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                    />
+                                  </svg>
+                                </EuiIconSearch>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "maxWidth": "40vw",
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              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",
+                    },
+                  ]
+                }
+                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}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <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="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                          >
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              className="euiFormControlLayout__prepend"
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            >
+                              <EuiPopover
+                                anchorClassName="euiQuickSelectPopover__anchor"
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <EuiIcon
+                                      type="calendar"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                >
+                                  <div
+                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <button
+                                        aria-label="Date quick select"
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconArrowDown
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                    fillRule="non-zero"
+                                                  />
+                                                </svg>
+                                              </EuiIconArrowDown>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              >
+                                                <EuiIconCalendar
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                      fillRule="evenodd"
+                                                    />
+                                                  </svg>
+                                                </EuiIconCalendar>
+                                              </EuiIcon>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </EuiQuickSelectPopover>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiDatePickerRange
+                                className="euiDatePickerRange--inGroup"
+                                endDateControl={<div />}
+                                iconType={false}
+                                isCustom={true}
+                                startDateControl={<div />}
+                              >
+                                <div
+                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                >
+                                  <button
+                                    className="euiSuperDatePicker__prettyFormat"
+                                    data-test-subj="superDatePickerShowDatesButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                  >
+                                    Last 5 minutes
+                                    <span
+                                      className="euiSuperDatePicker__prettyFormatLink"
+                                    >
+                                      <EuiI18n
+                                        default="Show dates"
+                                        token="euiSuperDatePicker.showDatesButtonLabel"
+                                      >
+                                        Show dates
+                                      </EuiI18n>
+                                    </span>
+                                  </button>
+                                </div>
+                              </EuiDatePickerRange>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButton
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                iconType="refresh"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-click-metric-element="trace_analytics.refresh_button"
+                    data-test-subj="superDatePickerApplyTimeButton"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
+                        >
+                          <EuiIconRefresh
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M11.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
+                              />
+                            </svg>
+                          </EuiIconRefresh>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        mode="data_prepper"
+        page="dashboard"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "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"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <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]}
+                    data-test-subj="global-filter-button"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      data-test-subj="global-filter-button"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Change all filters"
+                          iconType="filter"
+                          onClick={[Function]}
+                          title="Change all filters"
+                        >
+                          <button
+                            aria-label="Change all filters"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            title="Change all filters"
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              size="m"
+                              type="filter"
+                            >
+                              <EuiIconFilter
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit 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>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    data-test-subj="addfilter"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      data-test-subj="addfilter"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonEmpty
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
+                              >
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  + Add filter
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <div>
+      <DashboardTable
+        addFilter={[Function]}
+        addPercentileFilter={[Function]}
+        filters={Array []}
+        items={Array []}
+        loading={true}
+        page="dashboard"
+        setRedirect={[Function]}
+      >
+        <EuiPanel>
+          <div
+            className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+          >
+            <EuiFlexGroup
+              alignItems="center"
+              gutterSize="s"
+            >
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+              >
+                <EuiFlexItem
+                  grow={10}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrow10"
+                  >
+                    <PanelTitle
+                      title="Latency by trace group"
+                      totalItems={0}
+                    >
+                      <EuiText
+                        size="m"
+                      >
+                        <div
+                          className="euiText euiText--medium"
+                        >
+                          <span
+                            className="panel-title"
+                          >
+                            Latency by trace group
+                          </span>
+                          <span
+                            className="panel-title-count"
+                          >
+                             (0)
+                          </span>
+                        </div>
+                      </EuiText>
+                    </PanelTitle>
+                  </div>
+                </EuiFlexItem>
+                <EuiFlexItem
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <EuiLink
+                      data-test-subj="dashboard-table-percentile-button-1"
+                      onClick={[Function]}
+                    >
+                      <button
+                        className="euiLink euiLink--primary"
+                        data-test-subj="dashboard-table-percentile-button-1"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <EuiText
+                          size="xs"
+                        >
+                          <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
+                              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="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>
+                }
+              >
+                <div
+                  className="euiEmptyPrompt"
+                >
+                  <EuiTitle
+                    size="m"
+                  >
+                    <h2
+                      className="euiTitle euiTitle--medium"
+                    >
+                      No matches
+                    </h2>
+                  </EuiTitle>
+                  <EuiTextColor
+                    color="subdued"
+                  >
+                    <span
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      <EuiSpacer
+                        size="m"
+                      >
+                        <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="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 euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                  >
+                    <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 euiButtonGroup--small euiButtonGroup--text"
+                        disabled={false}
+                      >
+                        <EuiScreenReaderOnly>
+                          <legend
+                            className="euiScreenReaderOnly"
+                          />
+                        </EuiScreenReaderOnly>
+                        <div
+                          className="euiButtonGroup__buttons"
+                        >
+                          <EuiButtonGroupButton
+                            color="text"
+                            element="label"
+                            id="latency"
+                            isDisabled={false}
+                            isIconOnly={false}
+                            isSelected={true}
+                            key="0"
+                            label="Latency"
+                            name="random_html_id"
+                            onChange={[Function]}
+                            size="s"
+                          >
+                            <EuiButtonDisplay
+                              baseClassName="euiButtonGroupButton"
+                              className="euiButtonGroupButton-isSelected"
+                              color="text"
+                              element="label"
+                              fill={true}
+                              htmlFor="random_html_id"
+                              isDisabled={false}
+                              onClick={[Function]}
+                              size="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonGroupButton__textShift",
+                                  "data-text": "Latency",
+                                  "ref": [Function],
+                                  "title": "Latency",
+                                }
+                              }
+                            >
+                              <label
+                                className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                                disabled={false}
+                                htmlFor="random_html_id"
+                                onClick={[Function]}
+                                style={
+                                  Object {
+                                    "minWidth": undefined,
+                                  }
+                                }
+                              >
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="left"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text euiButtonGroupButton__textShift",
+                                      "data-text": "Latency",
+                                      "ref": [Function],
+                                      "title": "Latency",
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiButtonContent euiButton__content"
+                                  >
+                                    <span
+                                      className="euiButton__text euiButtonGroupButton__textShift"
+                                      data-text="Latency"
+                                      title="Latency"
+                                    >
+                                      <input
+                                        checked={true}
+                                        className="euiScreenReaderOnly"
+                                        data-test-subj="latency"
+                                        disabled={false}
+                                        id="random_html_id"
+                                        name="random_html_id"
+                                        onChange={[Function]}
+                                        type="radio"
+                                      />
+                                      Latency
+                                    </span>
+                                  </span>
+                                </EuiButtonContent>
+                              </label>
+                            </EuiButtonDisplay>
+                          </EuiButtonGroupButton>
+                          <EuiButtonGroupButton
+                            color="text"
+                            element="label"
+                            id="error_rate"
+                            isDisabled={false}
+                            isIconOnly={false}
+                            isSelected={false}
+                            key="1"
+                            label="Error rate"
+                            name="random_html_id"
+                            onChange={[Function]}
+                            size="s"
+                          >
+                            <EuiButtonDisplay
+                              baseClassName="euiButtonGroupButton"
+                              className=""
+                              color="text"
+                              element="label"
+                              fill={false}
+                              htmlFor="random_html_id"
+                              isDisabled={false}
+                              onClick={[Function]}
+                              size="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonGroupButton__textShift",
+                                  "data-text": "Error rate",
+                                  "ref": [Function],
+                                  "title": "Error rate",
+                                }
+                              }
+                            >
+                              <label
+                                className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                disabled={false}
+                                htmlFor="random_html_id"
+                                onClick={[Function]}
+                                style={
+                                  Object {
+                                    "minWidth": undefined,
+                                  }
+                                }
+                              >
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="left"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text euiButtonGroupButton__textShift",
+                                      "data-text": "Error rate",
+                                      "ref": [Function],
+                                      "title": "Error rate",
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiButtonContent euiButton__content"
+                                  >
+                                    <span
+                                      className="euiButton__text euiButtonGroupButton__textShift"
+                                      data-text="Error rate"
+                                      title="Error rate"
+                                    >
+                                      <input
+                                        checked={false}
+                                        className="euiScreenReaderOnly"
+                                        data-test-subj="error_rate"
+                                        disabled={false}
+                                        id="random_html_id"
+                                        name="random_html_id"
+                                        onChange={[Function]}
+                                        type="radio"
+                                      />
+                                      Error rate
+                                    </span>
+                                  </span>
+                                </EuiButtonContent>
+                              </label>
+                            </EuiButtonDisplay>
+                          </EuiButtonGroupButton>
+                          <EuiButtonGroupButton
+                            color="text"
+                            element="label"
+                            id="throughput"
+                            isDisabled={false}
+                            isIconOnly={false}
+                            isSelected={false}
+                            key="2"
+                            label="Throughput"
+                            name="random_html_id"
+                            onChange={[Function]}
+                            size="s"
+                          >
+                            <EuiButtonDisplay
+                              baseClassName="euiButtonGroupButton"
+                              className=""
+                              color="text"
+                              element="label"
+                              fill={false}
+                              htmlFor="random_html_id"
+                              isDisabled={false}
+                              onClick={[Function]}
+                              size="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonGroupButton__textShift",
+                                  "data-text": "Throughput",
+                                  "ref": [Function],
+                                  "title": "Throughput",
+                                }
+                              }
+                            >
+                              <label
+                                className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                disabled={false}
+                                htmlFor="random_html_id"
+                                onClick={[Function]}
+                                style={
+                                  Object {
+                                    "minWidth": undefined,
+                                  }
+                                }
+                              >
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="left"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text euiButtonGroupButton__textShift",
+                                      "data-text": "Throughput",
+                                      "ref": [Function],
+                                      "title": "Throughput",
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiButtonContent euiButton__content"
+                                  >
+                                    <span
+                                      className="euiButton__text euiButtonGroupButton__textShift"
+                                      data-text="Throughput"
+                                      title="Throughput"
+                                    >
+                                      <input
+                                        checked={false}
+                                        className="euiScreenReaderOnly"
+                                        data-test-subj="throughput"
+                                        disabled={false}
+                                        id="random_html_id"
+                                        name="random_html_id"
+                                        onChange={[Function]}
+                                        type="radio"
+                                      />
+                                      Throughput
+                                    </span>
+                                  </span>
+                                </EuiButtonContent>
+                              </label>
+                            </EuiButtonDisplay>
+                          </EuiButtonGroupButton>
+                        </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"
+                      >
+                        <EuiFlexItem
+                          grow={false}
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <EuiText>
+                              <div
+                                className="euiText euiText--medium"
+                              >
+                                Focus on
+                              </div>
+                            </EuiText>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                          <div
+                            className="euiFlexItem"
+                          >
+                            <EuiFieldSearch
+                              compressed={false}
+                              fullWidth={false}
+                              incremental={false}
+                              isClearable={true}
+                              isInvalid={false}
+                              isLoading={false}
+                              onChange={[Function]}
+                              onSearch={[Function]}
+                              placeholder="Service name"
+                              value=""
+                            >
+                              <EuiFormControlLayout
+                                compressed={false}
+                                fullWidth={false}
+                                icon="search"
+                                isLoading={false}
+                              >
+                                <div
+                                  className="euiFormControlLayout"
+                                >
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
+                                  >
+                                    <EuiValidatableControl
+                                      isInvalid={false}
+                                    >
+                                      <input
+                                        className="euiFieldSearch"
+                                        onChange={[Function]}
+                                        onKeyUp={[Function]}
+                                        placeholder="Service name"
+                                        type="search"
+                                        value=""
+                                      />
+                                    </EuiValidatableControl>
+                                    <EuiFormControlLayoutIcons
+                                      compressed={false}
+                                      icon="search"
+                                      isLoading={false}
+                                    >
+                                      <div
+                                        className="euiFormControlLayoutIcons"
+                                      >
+                                        <EuiFormControlLayoutCustomIcon
+                                          size="m"
+                                          type="search"
+                                        >
+                                          <span
+                                            className="euiFormControlLayoutCustomIcon"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiFormControlLayoutCustomIcon__icon"
+                                              size="m"
+                                              type="search"
+                                            >
+                                              <EuiIconSearch
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                                  />
+                                                </svg>
+                                              </EuiIconSearch>
+                                            </EuiIcon>
+                                          </span>
+                                        </EuiFormControlLayoutCustomIcon>
+                                      </div>
+                                    </EuiFormControlLayoutIcons>
+                                  </div>
+                                </div>
+                              </EuiFormControlLayout>
+                            </EuiFieldSearch>
+                          </div>
+                        </EuiFlexItem>
+                      </div>
+                    </EuiFlexGroup>
+                    <EuiSpacer>
+                      <div
+                        className="euiSpacer euiSpacer--l"
+                      />
+                    </EuiSpacer>
+                    <div
+                      style={
+                        Object {
+                          "minHeight": 434,
+                        }
+                      }
+                    >
+                      <NoMatchMessage
+                        size="s"
+                      >
+                        <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>
+                          }
+                        >
+                          <div
+                            className="euiEmptyPrompt"
+                          >
+                            <EuiTitle
+                              size="m"
+                            >
+                              <h2
+                                className="euiTitle euiTitle--medium"
+                              >
+                                No matches
+                              </h2>
+                            </EuiTitle>
+                            <EuiTextColor
+                              color="subdued"
+                            >
+                              <span
+                                className="euiTextColor euiTextColor--subdued"
+                              >
+                                <EuiSpacer
+                                  size="m"
+                                >
+                                  <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>
+                </EuiPanel>
+              </ServiceMap>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            >
+              <EuiFlexGroup
+                direction="column"
+              >
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                >
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
+                    >
+                      <ErrorRatePlt
+                        items={
+                          Object {
+                            "fixedInterval": "1h",
+                            "items": Array [],
+                          }
+                        }
+                        setEndTime={[MockFunction]}
+                        setStartTime={[MockFunction]}
+                      >
+                        <EuiPanel
+                          style={
+                            Object {
+                              "minHeight": 308,
+                              "minWidth": 433,
+                            }
+                          }
+                        >
+                          <div
+                            className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                            style={
+                              Object {
+                                "minHeight": 308,
+                                "minWidth": 433,
+                              }
+                            }
+                          >
+                            <EuiFlexGroup
+                              gutterSize="xs"
+                              justifyContent="spaceBetween"
+                            >
+                              <div
+                                className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              >
+                                <PanelTitle
+                                  title="Trace error rate over time"
+                                >
+                                  <EuiText
+                                    size="m"
+                                  >
+                                    <div
+                                      className="euiText euiText--medium"
+                                    >
+                                      <span
+                                        className="panel-title"
+                                      >
+                                        Trace error rate over time
+                                      </span>
+                                    </div>
+                                  </EuiText>
+                                </PanelTitle>
+                                <EuiButtonGroup
+                                  buttonSize="s"
+                                  color="text"
+                                  onChange={[Function]}
+                                >
+                                  <fieldset
+                                    className="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                                    disabled={false}
+                                  >
+                                    <EuiScreenReaderOnly>
+                                      <legend
+                                        className="euiScreenReaderOnly"
+                                      />
+                                    </EuiScreenReaderOnly>
+                                    <div
+                                      className="euiButtonGroup__buttons"
+                                    />
+                                  </fieldset>
+                                </EuiButtonGroup>
+                              </div>
+                            </EuiFlexGroup>
+                            <EuiSpacer
+                              size="m"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--m"
+                              />
+                            </EuiSpacer>
+                            <NoMatchMessage
+                              size="s"
+                            >
+                              <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>
+                                }
+                              >
+                                <div
+                                  className="euiEmptyPrompt"
+                                >
+                                  <EuiTitle
+                                    size="m"
+                                  >
+                                    <h2
+                                      className="euiTitle euiTitle--medium"
+                                    >
+                                      No matches
+                                    </h2>
+                                  </EuiTitle>
+                                  <EuiTextColor
+                                    color="subdued"
+                                  >
+                                    <span
+                                      className="euiTextColor euiTextColor--subdued"
+                                    >
+                                      <EuiSpacer
+                                        size="m"
+                                      >
+                                        <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"
+                    >
+                      <ThroughputPlt
+                        items={
+                          Object {
+                            "fixedInterval": "1h",
+                            "items": Array [],
+                          }
+                        }
+                        setEndTime={[MockFunction]}
+                        setStartTime={[MockFunction]}
+                      >
+                        <EuiPanel
+                          style={
+                            Object {
+                              "minHeight": 308,
+                              "minWidth": 433,
+                            }
+                          }
+                        >
+                          <div
+                            className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                            style={
+                              Object {
+                                "minHeight": 308,
+                                "minWidth": 433,
+                              }
+                            }
+                          >
+                            <EuiFlexGroup
+                              gutterSize="xs"
+                              justifyContent="spaceBetween"
+                            >
+                              <div
+                                className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              >
+                                <PanelTitle
+                                  title="Traces over time"
+                                >
+                                  <EuiText
+                                    size="m"
+                                  >
+                                    <div
+                                      className="euiText euiText--medium"
+                                    >
+                                      <span
+                                        className="panel-title"
+                                      >
+                                        Traces over time
+                                      </span>
+                                    </div>
+                                  </EuiText>
+                                </PanelTitle>
+                                <EuiButtonGroup
+                                  buttonSize="s"
+                                  color="text"
+                                  onChange={[Function]}
+                                >
+                                  <fieldset
+                                    className="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                                    disabled={false}
+                                  >
+                                    <EuiScreenReaderOnly>
+                                      <legend
+                                        className="euiScreenReaderOnly"
+                                      />
+                                    </EuiScreenReaderOnly>
+                                    <div
+                                      className="euiButtonGroup__buttons"
+                                    />
+                                  </fieldset>
+                                </EuiButtonGroup>
+                              </div>
+                            </EuiFlexGroup>
+                            <EuiHorizontalRule
+                              margin="m"
+                            >
+                              <hr
+                                className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                              />
+                            </EuiHorizontalRule>
+                            <NoMatchMessage
+                              size="s"
+                            >
+                              <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>
+                                }
+                              >
+                                <div
+                                  className="euiEmptyPrompt"
+                                >
+                                  <EuiTitle
+                                    size="m"
+                                  >
+                                    <h2
+                                      className="euiTitle euiTitle--medium"
+                                    >
+                                      No matches
+                                    </h2>
+                                  </EuiTitle>
+                                  <EuiTextColor
+                                    color="subdued"
+                                  >
+                                    <span
+                                      className="euiTextColor euiTextColor--subdued"
+                                    >
+                                      <EuiSpacer
+                                        size="m"
+                                      >
+                                        <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>
+    </div>
+  </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": "Dashboard",
+      },
+    ]
+  }
+  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": "Dashboard",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  dataPrepperIndicesExist={true}
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  mode="data_prepper"
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
+  page="dashboard"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
+  }
+  query=""
+  setEndTime={[MockFunction]}
+  setFilters={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+>
+  <EuiTitle
+    size="l"
+  >
+    <h2
+      className="euiTitle euiTitle--large"
+      style={
+        Object {
+          "fontWeight": 430,
+        }
+      }
+    >
+      Dashboard
+    </h2>
+  </EuiTitle>
+  <DataSourcePicker
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    selectedMode="data_prepper"
+  >
+    <EuiPopover
+      anchorClassName="eui-textTruncate"
+      anchorPosition="downCenter"
+      button={
+        <EuiButtonEmpty
+          className="dscIndexPattern__triggerButton"
+          color="text"
+          data-test-subj="indexPattern-switch-link"
+          flush="left"
+          iconSide="right"
+          iconType="arrowDown"
+          onClick={[Function]}
+          title="data_prepper"
+        >
+          Data Prepper
+        </EuiButtonEmpty>
+      }
+      className="eui-textTruncate"
+      closePopover={[Function]}
+      display="inlineBlock"
+      hasArrow={true}
+      isOpen={false}
+      ownFocus={true}
+      panelPaddingSize="s"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownCenter eui-textTruncate"
+      >
+        <div
+          className="euiPopover__anchor eui-textTruncate"
+        >
+          <EuiButtonEmpty
+            className="dscIndexPattern__triggerButton"
+            color="text"
+            data-test-subj="indexPattern-switch-link"
+            flush="left"
+            iconSide="right"
+            iconType="arrowDown"
+            onClick={[Function]}
+            title="data_prepper"
+          >
+            <button
+              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+              data-test-subj="indexPattern-switch-link"
+              disabled={false}
+              onClick={[Function]}
+              title="data_prepper"
+              type="button"
+            >
+              <EuiButtonContent
+                className="euiButtonEmpty__content"
+                iconSide="right"
+                iconSize="m"
+                iconType="arrowDown"
+                textProps={
+                  Object {
+                    "className": "euiButtonEmpty__text",
+                  }
+                }
+              >
+                <span
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                >
+                  <EuiIcon
+                    className="euiButtonContent__icon"
+                    color="inherit"
+                    size="m"
+                    type="arrowDown"
+                  >
+                    <EuiIconEmpty
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                      focusable="false"
+                      role="img"
+                      style={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </EuiIconEmpty>
+                  </EuiIcon>
+                  <span
+                    className="euiButtonEmpty__text"
+                  >
+                    Data Prepper
+                  </span>
+                </span>
+              </EuiButtonContent>
+            </button>
+          </EuiButtonEmpty>
+        </div>
+      </div>
+    </EuiPopover>
+  </DataSourcePicker>
+  <DashboardContent
+    appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Dashboard",
+        },
+      ]
+    }
+    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": "Dashboard",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
+    dataPrepperIndicesExist={true}
+    endTime="now"
+    filters={Array []}
+    http={[MockFunction]}
+    mode="data_prepper"
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    page="dashboard"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
+    query=""
+    setEndTime={[MockFunction]}
+    setFilters={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQuery={[MockFunction]}
+    setStartTime={[MockFunction]}
+    startTime="now-5m"
+  >
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      mode="data_prepper"
+      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"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <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=""
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <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
+                        compressed={false}
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
+                        >
+                          <EuiFormControlLayoutCustomIcon
+                            size="m"
+                            type="search"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="search"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "maxWidth": "40vw",
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              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",
+                    },
+                  ]
+                }
+                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}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <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="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                          >
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              className="euiFormControlLayout__prepend"
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            >
+                              <EuiPopover
+                                anchorClassName="euiQuickSelectPopover__anchor"
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <EuiIcon
+                                      type="calendar"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                >
+                                  <div
+                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <button
+                                        aria-label="Date quick select"
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </EuiQuickSelectPopover>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiDatePickerRange
+                                className="euiDatePickerRange--inGroup"
+                                endDateControl={<div />}
+                                iconType={false}
+                                isCustom={true}
+                                startDateControl={<div />}
+                              >
+                                <div
+                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                >
+                                  <button
+                                    className="euiSuperDatePicker__prettyFormat"
+                                    data-test-subj="superDatePickerShowDatesButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                  >
+                                    Last 5 minutes
+                                    <span
+                                      className="euiSuperDatePicker__prettyFormatLink"
+                                    >
+                                      <EuiI18n
+                                        default="Show dates"
+                                        token="euiSuperDatePicker.showDatesButtonLabel"
+                                      >
+                                        Show dates
+                                      </EuiI18n>
+                                    </span>
+                                  </button>
+                                </div>
+                              </EuiDatePickerRange>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButton
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                iconType="refresh"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-click-metric-element="trace_analytics.refresh_button"
+                    data-test-subj="superDatePickerApplyTimeButton"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
+                        >
+                          <EuiIconEmpty
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        mode="data_prepper"
+        page="dashboard"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "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"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <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]}
+                    data-test-subj="global-filter-button"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      data-test-subj="global-filter-button"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Change all filters"
+                          iconType="filter"
+                          onClick={[Function]}
+                          title="Change all filters"
+                        >
+                          <button
+                            aria-label="Change all filters"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            title="Change all filters"
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              size="m"
+                              type="filter"
+                            >
+                              <EuiIconEmpty
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                  focusable="false"
+                                  height={16}
+                                  role="img"
+                                  style={null}
+                                  viewBox="0 0 16 16"
+                                  width={16}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                />
+                              </EuiIconEmpty>
+                            </EuiIcon>
+                          </button>
+                        </EuiButtonIcon>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    data-test-subj="addfilter"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      data-test-subj="addfilter"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonEmpty
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
+                              >
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  + Add filter
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <div>
+      <DashboardTable
+        addFilter={[Function]}
+        addPercentileFilter={[Function]}
+        filters={Array []}
+        items={Array []}
+        loading={true}
+        page="dashboard"
+        setRedirect={[Function]}
+      >
+        <EuiPanel>
+          <div
+            className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+          >
+            <EuiFlexGroup
+              alignItems="center"
+              gutterSize="s"
+            >
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+              >
+                <EuiFlexItem
+                  grow={10}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrow10"
+                  >
+                    <PanelTitle
+                      title="Latency by trace group"
+                      totalItems={0}
+                    >
+                      <EuiText
+                        size="m"
+                      >
+                        <div
+                          className="euiText euiText--medium"
+                        >
+                          <span
+                            className="panel-title"
+                          >
+                            Latency by trace group
+                          </span>
+                          <span
+                            className="panel-title-count"
+                          >
+                             (0)
+                          </span>
+                        </div>
+                      </EuiText>
+                    </PanelTitle>
+                  </div>
+                </EuiFlexItem>
+                <EuiFlexItem
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <EuiLink
+                      data-test-subj="dashboard-table-percentile-button-1"
+                      onClick={[Function]}
+                    >
+                      <button
+                        className="euiLink euiLink--primary"
+                        data-test-subj="dashboard-table-percentile-button-1"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <EuiText
+                          size="xs"
+                        >
+                          <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
+                              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="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>
+                }
+              >
+                <div
+                  className="euiEmptyPrompt"
+                >
+                  <EuiTitle
+                    size="m"
+                  >
+                    <h2
+                      className="euiTitle euiTitle--medium"
+                    >
+                      No matches
+                    </h2>
+                  </EuiTitle>
+                  <EuiTextColor
+                    color="subdued"
+                  >
+                    <span
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      <EuiSpacer
+                        size="m"
+                      >
+                        <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="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 euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                  >
+                    <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 euiButtonGroup--small euiButtonGroup--text"
+                        disabled={false}
+                      >
+                        <EuiScreenReaderOnly>
+                          <legend
+                            className="euiScreenReaderOnly"
+                          />
+                        </EuiScreenReaderOnly>
+                        <div
+                          className="euiButtonGroup__buttons"
+                        >
+                          <EuiButtonGroupButton
+                            color="text"
+                            element="label"
+                            id="latency"
+                            isDisabled={false}
+                            isIconOnly={false}
+                            isSelected={true}
+                            key="0"
+                            label="Latency"
+                            name="random_html_id"
+                            onChange={[Function]}
+                            size="s"
+                          >
+                            <EuiButtonDisplay
+                              baseClassName="euiButtonGroupButton"
+                              className="euiButtonGroupButton-isSelected"
+                              color="text"
+                              element="label"
+                              fill={true}
+                              htmlFor="random_html_id"
+                              isDisabled={false}
+                              onClick={[Function]}
+                              size="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonGroupButton__textShift",
+                                  "data-text": "Latency",
+                                  "ref": [Function],
+                                  "title": "Latency",
+                                }
+                              }
+                            >
+                              <label
+                                className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                                disabled={false}
+                                htmlFor="random_html_id"
+                                onClick={[Function]}
+                                style={
+                                  Object {
+                                    "minWidth": undefined,
+                                  }
+                                }
+                              >
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="left"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text euiButtonGroupButton__textShift",
+                                      "data-text": "Latency",
+                                      "ref": [Function],
+                                      "title": "Latency",
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiButtonContent euiButton__content"
+                                  >
+                                    <span
+                                      className="euiButton__text euiButtonGroupButton__textShift"
+                                      data-text="Latency"
+                                      title="Latency"
+                                    >
+                                      <input
+                                        checked={true}
+                                        className="euiScreenReaderOnly"
+                                        data-test-subj="latency"
+                                        disabled={false}
+                                        id="random_html_id"
+                                        name="random_html_id"
+                                        onChange={[Function]}
+                                        type="radio"
+                                      />
+                                      Latency
+                                    </span>
+                                  </span>
+                                </EuiButtonContent>
+                              </label>
+                            </EuiButtonDisplay>
+                          </EuiButtonGroupButton>
+                          <EuiButtonGroupButton
+                            color="text"
+                            element="label"
+                            id="error_rate"
+                            isDisabled={false}
+                            isIconOnly={false}
+                            isSelected={false}
+                            key="1"
+                            label="Error rate"
+                            name="random_html_id"
+                            onChange={[Function]}
+                            size="s"
+                          >
+                            <EuiButtonDisplay
+                              baseClassName="euiButtonGroupButton"
+                              className=""
+                              color="text"
+                              element="label"
+                              fill={false}
+                              htmlFor="random_html_id"
+                              isDisabled={false}
+                              onClick={[Function]}
+                              size="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonGroupButton__textShift",
+                                  "data-text": "Error rate",
+                                  "ref": [Function],
+                                  "title": "Error rate",
+                                }
+                              }
+                            >
+                              <label
+                                className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                disabled={false}
+                                htmlFor="random_html_id"
+                                onClick={[Function]}
+                                style={
+                                  Object {
+                                    "minWidth": undefined,
+                                  }
+                                }
+                              >
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="left"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text euiButtonGroupButton__textShift",
+                                      "data-text": "Error rate",
+                                      "ref": [Function],
+                                      "title": "Error rate",
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiButtonContent euiButton__content"
+                                  >
+                                    <span
+                                      className="euiButton__text euiButtonGroupButton__textShift"
+                                      data-text="Error rate"
+                                      title="Error rate"
+                                    >
+                                      <input
+                                        checked={false}
+                                        className="euiScreenReaderOnly"
+                                        data-test-subj="error_rate"
+                                        disabled={false}
+                                        id="random_html_id"
+                                        name="random_html_id"
+                                        onChange={[Function]}
+                                        type="radio"
+                                      />
+                                      Error rate
+                                    </span>
+                                  </span>
+                                </EuiButtonContent>
+                              </label>
+                            </EuiButtonDisplay>
+                          </EuiButtonGroupButton>
+                          <EuiButtonGroupButton
+                            color="text"
+                            element="label"
+                            id="throughput"
+                            isDisabled={false}
+                            isIconOnly={false}
+                            isSelected={false}
+                            key="2"
+                            label="Throughput"
+                            name="random_html_id"
+                            onChange={[Function]}
+                            size="s"
+                          >
+                            <EuiButtonDisplay
+                              baseClassName="euiButtonGroupButton"
+                              className=""
+                              color="text"
+                              element="label"
+                              fill={false}
+                              htmlFor="random_html_id"
+                              isDisabled={false}
+                              onClick={[Function]}
+                              size="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonGroupButton__textShift",
+                                  "data-text": "Throughput",
+                                  "ref": [Function],
+                                  "title": "Throughput",
+                                }
+                              }
+                            >
+                              <label
+                                className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                disabled={false}
+                                htmlFor="random_html_id"
+                                onClick={[Function]}
+                                style={
+                                  Object {
+                                    "minWidth": undefined,
+                                  }
+                                }
+                              >
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="left"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text euiButtonGroupButton__textShift",
+                                      "data-text": "Throughput",
+                                      "ref": [Function],
+                                      "title": "Throughput",
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiButtonContent euiButton__content"
+                                  >
+                                    <span
+                                      className="euiButton__text euiButtonGroupButton__textShift"
+                                      data-text="Throughput"
+                                      title="Throughput"
+                                    >
+                                      <input
+                                        checked={false}
+                                        className="euiScreenReaderOnly"
+                                        data-test-subj="throughput"
+                                        disabled={false}
+                                        id="random_html_id"
+                                        name="random_html_id"
+                                        onChange={[Function]}
+                                        type="radio"
+                                      />
+                                      Throughput
+                                    </span>
+                                  </span>
+                                </EuiButtonContent>
+                              </label>
+                            </EuiButtonDisplay>
+                          </EuiButtonGroupButton>
+                        </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"
+                      >
+                        <EuiFlexItem
+                          grow={false}
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <EuiText>
+                              <div
+                                className="euiText euiText--medium"
+                              >
+                                Focus on
+                              </div>
+                            </EuiText>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                          <div
+                            className="euiFlexItem"
+                          >
+                            <EuiFieldSearch
+                              compressed={false}
+                              fullWidth={false}
+                              incremental={false}
+                              isClearable={true}
+                              isInvalid={false}
+                              isLoading={false}
+                              onChange={[Function]}
+                              onSearch={[Function]}
+                              placeholder="Service name"
+                              value=""
+                            >
+                              <EuiFormControlLayout
+                                compressed={false}
+                                fullWidth={false}
+                                icon="search"
+                                isLoading={false}
+                              >
+                                <div
+                                  className="euiFormControlLayout"
+                                >
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
+                                  >
+                                    <EuiValidatableControl
+                                      isInvalid={false}
+                                    >
+                                      <input
+                                        className="euiFieldSearch"
+                                        onChange={[Function]}
+                                        onKeyUp={[Function]}
+                                        placeholder="Service name"
+                                        type="search"
+                                        value=""
+                                      />
+                                    </EuiValidatableControl>
+                                    <EuiFormControlLayoutIcons
+                                      compressed={false}
+                                      icon="search"
+                                      isLoading={false}
+                                    >
+                                      <div
+                                        className="euiFormControlLayoutIcons"
+                                      >
+                                        <EuiFormControlLayoutCustomIcon
+                                          size="m"
+                                          type="search"
+                                        >
+                                          <span
+                                            className="euiFormControlLayoutCustomIcon"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiFormControlLayoutCustomIcon__icon"
+                                              size="m"
+                                              type="search"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                          </span>
+                                        </EuiFormControlLayoutCustomIcon>
+                                      </div>
+                                    </EuiFormControlLayoutIcons>
+                                  </div>
+                                </div>
+                              </EuiFormControlLayout>
+                            </EuiFieldSearch>
+                          </div>
+                        </EuiFlexItem>
+                      </div>
+                    </EuiFlexGroup>
+                    <EuiSpacer>
+                      <div
+                        className="euiSpacer euiSpacer--l"
+                      />
+                    </EuiSpacer>
+                    <div
+                      style={
+                        Object {
+                          "minHeight": 434,
+                        }
+                      }
+                    >
+                      <NoMatchMessage
+                        size="s"
+                      >
+                        <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>
+                          }
+                        >
+                          <div
+                            className="euiEmptyPrompt"
+                          >
+                            <EuiTitle
+                              size="m"
+                            >
+                              <h2
+                                className="euiTitle euiTitle--medium"
+                              >
+                                No matches
+                              </h2>
+                            </EuiTitle>
+                            <EuiTextColor
+                              color="subdued"
+                            >
+                              <span
+                                className="euiTextColor euiTextColor--subdued"
+                              >
+                                <EuiSpacer
+                                  size="m"
+                                >
+                                  <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>
+                </EuiPanel>
+              </ServiceMap>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            >
+              <EuiFlexGroup
+                direction="column"
+              >
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                >
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
+                    >
+                      <ErrorRatePlt
+                        items={
+                          Object {
+                            "fixedInterval": "1h",
+                            "items": Array [],
+                          }
+                        }
+                        setEndTime={[MockFunction]}
+                        setStartTime={[MockFunction]}
+                      >
+                        <EuiPanel
+                          style={
+                            Object {
+                              "minHeight": 308,
+                              "minWidth": 433,
+                            }
+                          }
+                        >
+                          <div
+                            className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                            style={
+                              Object {
+                                "minHeight": 308,
+                                "minWidth": 433,
+                              }
+                            }
+                          >
+                            <EuiFlexGroup
+                              gutterSize="xs"
+                              justifyContent="spaceBetween"
+                            >
+                              <div
+                                className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              >
+                                <PanelTitle
+                                  title="Trace error rate over time"
+                                >
+                                  <EuiText
+                                    size="m"
+                                  >
+                                    <div
+                                      className="euiText euiText--medium"
+                                    >
+                                      <span
+                                        className="panel-title"
+                                      >
+                                        Trace error rate over time
+                                      </span>
+                                    </div>
+                                  </EuiText>
+                                </PanelTitle>
+                                <EuiButtonGroup
+                                  buttonSize="s"
+                                  color="text"
+                                  onChange={[Function]}
+                                >
+                                  <fieldset
+                                    className="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                                    disabled={false}
+                                  >
+                                    <EuiScreenReaderOnly>
+                                      <legend
+                                        className="euiScreenReaderOnly"
+                                      />
+                                    </EuiScreenReaderOnly>
+                                    <div
+                                      className="euiButtonGroup__buttons"
+                                    />
+                                  </fieldset>
+                                </EuiButtonGroup>
+                              </div>
+                            </EuiFlexGroup>
+                            <EuiSpacer
+                              size="m"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--m"
+                              />
+                            </EuiSpacer>
+                            <NoMatchMessage
+                              size="s"
+                            >
+                              <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>
+                                }
+                              >
+                                <div
+                                  className="euiEmptyPrompt"
+                                >
+                                  <EuiTitle
+                                    size="m"
+                                  >
+                                    <h2
+                                      className="euiTitle euiTitle--medium"
+                                    >
+                                      No matches
+                                    </h2>
+                                  </EuiTitle>
+                                  <EuiTextColor
+                                    color="subdued"
+                                  >
+                                    <span
+                                      className="euiTextColor euiTextColor--subdued"
+                                    >
+                                      <EuiSpacer
+                                        size="m"
+                                      >
+                                        <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"
+                    >
+                      <ThroughputPlt
+                        items={
+                          Object {
+                            "fixedInterval": "1h",
+                            "items": Array [],
+                          }
+                        }
+                        setEndTime={[MockFunction]}
+                        setStartTime={[MockFunction]}
+                      >
+                        <EuiPanel
+                          style={
+                            Object {
+                              "minHeight": 308,
+                              "minWidth": 433,
+                            }
+                          }
+                        >
+                          <div
+                            className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                            style={
+                              Object {
+                                "minHeight": 308,
+                                "minWidth": 433,
+                              }
+                            }
+                          >
+                            <EuiFlexGroup
+                              gutterSize="xs"
+                              justifyContent="spaceBetween"
+                            >
+                              <div
+                                className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              >
+                                <PanelTitle
+                                  title="Traces over time"
+                                >
+                                  <EuiText
+                                    size="m"
+                                  >
+                                    <div
+                                      className="euiText euiText--medium"
+                                    >
+                                      <span
+                                        className="panel-title"
+                                      >
+                                        Traces over time
+                                      </span>
+                                    </div>
+                                  </EuiText>
+                                </PanelTitle>
+                                <EuiButtonGroup
+                                  buttonSize="s"
+                                  color="text"
+                                  onChange={[Function]}
+                                >
+                                  <fieldset
+                                    className="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                                    disabled={false}
+                                  >
+                                    <EuiScreenReaderOnly>
+                                      <legend
+                                        className="euiScreenReaderOnly"
+                                      />
+                                    </EuiScreenReaderOnly>
+                                    <div
+                                      className="euiButtonGroup__buttons"
+                                    />
+                                  </fieldset>
+                                </EuiButtonGroup>
+                              </div>
+                            </EuiFlexGroup>
+                            <EuiHorizontalRule
+                              margin="m"
+                            >
+                              <hr
+                                className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                              />
+                            </EuiHorizontalRule>
+                            <NoMatchMessage
+                              size="s"
+                            >
+                              <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>
+                                }
+                              >
+                                <div
+                                  className="euiEmptyPrompt"
+                                >
+                                  <EuiTitle
+                                    size="m"
+                                  >
+                                    <h2
+                                      className="euiTitle euiTitle--medium"
+                                    >
+                                      No matches
+                                    </h2>
+                                  </EuiTitle>
+                                  <EuiTextColor
+                                    color="subdued"
+                                  >
+                                    <span
+                                      className="euiTextColor euiTextColor--subdued"
+                                    >
+                                      <EuiSpacer
+                                        size="m"
+                                      >
+                                        <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>
+    </div>
+  </DashboardContent>
+</Dashboard>
+`;
+
+exports[`Dashboard component renders empty jaeger dashboard 1`] = `
+<Dashboard
+  appConfigs={Array []}
+  childBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Trace analytics",
+      },
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Dashboard",
+      },
+    ]
+  }
+  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": "Dashboard",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  dataPrepperIndicesExist={false}
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  jaegerIndicesExist={true}
+  mode="jaeger"
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
+  page="dashboard"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
+  }
+  query=""
+  setEndTime={[MockFunction]}
+  setFilters={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+>
+  <EuiTitle
+    size="l"
+  >
+    <h2
+      className="euiTitle euiTitle--large"
+      style={
+        Object {
+          "fontWeight": 430,
+        }
+      }
+    >
+      Dashboard
+    </h2>
+  </EuiTitle>
+  <DataSourcePicker
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    selectedMode="jaeger"
+  >
+    <EuiPopover
+      anchorClassName="eui-textTruncate"
+      anchorPosition="downCenter"
+      button={
+        <EuiButtonEmpty
+          className="dscIndexPattern__triggerButton"
+          color="text"
+          data-test-subj="indexPattern-switch-link"
+          flush="left"
+          iconSide="right"
+          iconType="arrowDown"
+          onClick={[Function]}
+          title="jaeger"
+        >
+          Jaeger
+        </EuiButtonEmpty>
+      }
+      className="eui-textTruncate"
+      closePopover={[Function]}
+      display="inlineBlock"
+      hasArrow={true}
+      isOpen={false}
+      ownFocus={true}
+      panelPaddingSize="s"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownCenter eui-textTruncate"
+      >
+        <div
+          className="euiPopover__anchor eui-textTruncate"
+        >
+          <EuiButtonEmpty
+            className="dscIndexPattern__triggerButton"
+            color="text"
+            data-test-subj="indexPattern-switch-link"
+            flush="left"
+            iconSide="right"
+            iconType="arrowDown"
+            onClick={[Function]}
+            title="jaeger"
+          >
+            <button
+              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+              data-test-subj="indexPattern-switch-link"
+              disabled={false}
+              onClick={[Function]}
+              title="jaeger"
+              type="button"
+            >
+              <EuiButtonContent
+                className="euiButtonEmpty__content"
+                iconSide="right"
+                iconSize="m"
+                iconType="arrowDown"
+                textProps={
+                  Object {
+                    "className": "euiButtonEmpty__text",
+                  }
+                }
+              >
+                <span
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                >
+                  <EuiIcon
+                    className="euiButtonContent__icon"
+                    color="inherit"
+                    size="m"
+                    type="arrowDown"
+                  >
+                    <EuiIconArrowDown
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                      focusable="false"
+                      role="img"
+                      style={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                          fillRule="non-zero"
+                        />
+                      </svg>
+                    </EuiIconArrowDown>
+                  </EuiIcon>
+                  <span
+                    className="euiButtonEmpty__text"
+                  >
+                    Jaeger
+                  </span>
+                </span>
+              </EuiButtonContent>
+            </button>
+          </EuiButtonEmpty>
+        </div>
+      </div>
+    </EuiPopover>
+  </DataSourcePicker>
+  <DashboardContent
+    appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Dashboard",
+        },
+      ]
+    }
+    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": "Dashboard",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
+    dataPrepperIndicesExist={false}
+    endTime="now"
+    filters={Array []}
+    http={[MockFunction]}
+    jaegerIndicesExist={true}
+    mode="jaeger"
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    page="dashboard"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
+    query=""
+    setEndTime={[MockFunction]}
+    setFilters={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQuery={[MockFunction]}
+    setStartTime={[MockFunction]}
+    startTime="now-5m"
+  >
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      mode="jaeger"
+      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"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <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=""
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <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
+                        compressed={false}
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
+                        >
+                          <EuiFormControlLayoutCustomIcon
+                            size="m"
+                            type="search"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="search"
+                              >
+                                <EuiIconSearch
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                    />
+                                  </svg>
+                                </EuiIconSearch>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "maxWidth": "40vw",
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              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",
+                    },
+                  ]
+                }
+                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}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <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="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                          >
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              className="euiFormControlLayout__prepend"
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            >
+                              <EuiPopover
+                                anchorClassName="euiQuickSelectPopover__anchor"
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <EuiIcon
+                                      type="calendar"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                >
+                                  <div
+                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <button
+                                        aria-label="Date quick select"
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconArrowDown
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                    fillRule="non-zero"
+                                                  />
+                                                </svg>
+                                              </EuiIconArrowDown>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              >
+                                                <EuiIconCalendar
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                      fillRule="evenodd"
+                                                    />
+                                                  </svg>
+                                                </EuiIconCalendar>
+                                              </EuiIcon>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </EuiQuickSelectPopover>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiDatePickerRange
+                                className="euiDatePickerRange--inGroup"
+                                endDateControl={<div />}
+                                iconType={false}
+                                isCustom={true}
+                                startDateControl={<div />}
+                              >
+                                <div
+                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                >
+                                  <button
+                                    className="euiSuperDatePicker__prettyFormat"
+                                    data-test-subj="superDatePickerShowDatesButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                  >
+                                    Last 5 minutes
+                                    <span
+                                      className="euiSuperDatePicker__prettyFormatLink"
+                                    >
+                                      <EuiI18n
+                                        default="Show dates"
+                                        token="euiSuperDatePicker.showDatesButtonLabel"
+                                      >
+                                        Show dates
+                                      </EuiI18n>
+                                    </span>
+                                  </button>
+                                </div>
+                              </EuiDatePickerRange>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButton
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                iconType="refresh"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-click-metric-element="trace_analytics.refresh_button"
+                    data-test-subj="superDatePickerApplyTimeButton"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
+                        >
+                          <EuiIconRefresh
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M11.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
+                              />
+                            </svg>
+                          </EuiIconRefresh>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        mode="jaeger"
+        page="dashboard"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "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"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <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]}
+                    data-test-subj="global-filter-button"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      data-test-subj="global-filter-button"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Change all filters"
+                          iconType="filter"
+                          onClick={[Function]}
+                          title="Change all filters"
+                        >
+                          <button
+                            aria-label="Change all filters"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            title="Change all filters"
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              size="m"
+                              type="filter"
+                            >
+                              <EuiIconFilter
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit 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>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    data-test-subj="addfilter"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      data-test-subj="addfilter"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonEmpty
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
+                              >
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  + Add filter
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <div>
+      <TopGroupsPage
+        addFilter={[Function]}
+        addFilters={[Function]}
+        addPercentileFilter={[Function]}
+        filters={Array []}
+        jaegerErrorRatePltItems={
+          Object {
+            "fixedInterval": "1h",
+            "items": Array [],
+          }
+        }
+        jaegerErrorTableItems={Array []}
+        jaegerTableItems={Array []}
+        loading={true}
+        page="dashboard"
+        setEndTime={[MockFunction]}
+        setRedirect={[Function]}
+        setStartTime={[MockFunction]}
+        throughPutItems={
+          Object {
+            "fixedInterval": "1h",
+            "items": Array [],
+          }
+        }
+      >
+        <EuiSpacer
+          size="m"
+        >
+          <div
+            className="euiSpacer euiSpacer--m"
+          />
+        </EuiSpacer>
+        <ErrorRatePlt
+          idSelected="error_rate"
+          items={
+            Object {
+              "fixedInterval": "1h",
+              "items": Array [],
+            }
+          }
+          setEndTime={[MockFunction]}
+          setIdSelected={[Function]}
+          setStartTime={[MockFunction]}
+          toggleButtons={
+            Array [
+              Object {
+                "data-test-subj": "errors-toggle",
+                "id": "error_rate",
+                "label": "Error rate",
+              },
+              Object {
+                "data-test-subj": "throughput-toggle",
+                "id": "throughput",
+                "label": "Throughput",
+              },
+            ]
+          }
+        >
+          <EuiPanel
+            style={
+              Object {
+                "minHeight": 308,
+                "minWidth": 433,
+              }
+            }
+          >
+            <div
+              className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+              style={
+                Object {
+                  "minHeight": 308,
+                  "minWidth": 433,
+                }
+              }
+            >
+              <EuiFlexGroup
+                gutterSize="xs"
+                justifyContent="spaceBetween"
+              >
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                >
+                  <PanelTitle
+                    title="Trace error rate over time"
+                  >
+                    <EuiText
+                      size="m"
+                    >
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <span
+                          className="panel-title"
+                        >
+                          Trace error rate over time
+                        </span>
+                      </div>
+                    </EuiText>
+                  </PanelTitle>
+                  <EuiButtonGroup
+                    buttonSize="s"
+                    color="text"
+                    idSelected="error_rate"
+                    onChange={[Function]}
+                    options={
+                      Array [
+                        Object {
+                          "data-test-subj": "errors-toggle",
+                          "id": "error_rate",
+                          "label": "Error rate",
+                        },
+                        Object {
+                          "data-test-subj": "throughput-toggle",
+                          "id": "throughput",
+                          "label": "Throughput",
+                        },
+                      ]
+                    }
+                  >
+                    <fieldset
+                      className="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                      disabled={false}
+                    >
+                      <EuiScreenReaderOnly>
+                        <legend
+                          className="euiScreenReaderOnly"
+                        />
+                      </EuiScreenReaderOnly>
+                      <div
+                        className="euiButtonGroup__buttons"
+                      >
+                        <EuiButtonGroupButton
+                          color="text"
+                          data-test-subj="errors-toggle"
+                          element="label"
+                          id="error_rate"
+                          isDisabled={false}
+                          isIconOnly={false}
+                          isSelected={true}
+                          key="0"
+                          label="Error rate"
+                          name="random_html_id"
+                          onChange={[Function]}
+                          size="s"
+                        >
+                          <EuiButtonDisplay
+                            baseClassName="euiButtonGroupButton"
+                            className="euiButtonGroupButton-isSelected"
+                            color="text"
+                            data-test-subj="errors-toggle"
+                            element="label"
+                            fill={true}
+                            htmlFor="random_html_id"
+                            isDisabled={false}
+                            onClick={[Function]}
+                            size="s"
+                            textProps={
+                              Object {
+                                "className": "euiButtonGroupButton__textShift",
+                                "data-text": "Error rate",
+                                "ref": [Function],
+                                "title": "Error rate",
+                              }
+                            }
+                          >
+                            <label
+                              className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                              data-test-subj="errors-toggle"
+                              disabled={false}
+                              htmlFor="random_html_id"
+                              onClick={[Function]}
+                              style={
+                                Object {
+                                  "minWidth": undefined,
+                                }
+                              }
+                            >
+                              <EuiButtonContent
+                                className="euiButton__content"
+                                iconSide="left"
+                                textProps={
+                                  Object {
+                                    "className": "euiButton__text euiButtonGroupButton__textShift",
+                                    "data-text": "Error rate",
+                                    "ref": [Function],
+                                    "title": "Error rate",
+                                  }
+                                }
+                              >
+                                <span
+                                  className="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    className="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Error rate"
+                                    title="Error rate"
+                                  >
+                                    <input
+                                      checked={true}
+                                      className="euiScreenReaderOnly"
+                                      data-test-subj="error_rate"
+                                      disabled={false}
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      onChange={[Function]}
+                                      type="radio"
+                                    />
+                                    Error rate
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </label>
+                          </EuiButtonDisplay>
+                        </EuiButtonGroupButton>
+                        <EuiButtonGroupButton
+                          color="text"
+                          data-test-subj="throughput-toggle"
+                          element="label"
+                          id="throughput"
+                          isDisabled={false}
+                          isIconOnly={false}
+                          isSelected={false}
+                          key="1"
+                          label="Throughput"
+                          name="random_html_id"
+                          onChange={[Function]}
+                          size="s"
+                        >
+                          <EuiButtonDisplay
+                            baseClassName="euiButtonGroupButton"
+                            className=""
+                            color="text"
+                            data-test-subj="throughput-toggle"
+                            element="label"
+                            fill={false}
+                            htmlFor="random_html_id"
+                            isDisabled={false}
+                            onClick={[Function]}
+                            size="s"
+                            textProps={
+                              Object {
+                                "className": "euiButtonGroupButton__textShift",
+                                "data-text": "Throughput",
+                                "ref": [Function],
+                                "title": "Throughput",
+                              }
+                            }
+                          >
+                            <label
+                              className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              data-test-subj="throughput-toggle"
+                              disabled={false}
+                              htmlFor="random_html_id"
+                              onClick={[Function]}
+                              style={
+                                Object {
+                                  "minWidth": undefined,
+                                }
+                              }
+                            >
+                              <EuiButtonContent
+                                className="euiButton__content"
+                                iconSide="left"
+                                textProps={
+                                  Object {
+                                    "className": "euiButton__text euiButtonGroupButton__textShift",
+                                    "data-text": "Throughput",
+                                    "ref": [Function],
+                                    "title": "Throughput",
+                                  }
+                                }
+                              >
+                                <span
+                                  className="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    className="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Throughput"
+                                    title="Throughput"
+                                  >
+                                    <input
+                                      checked={false}
+                                      className="euiScreenReaderOnly"
+                                      data-test-subj="throughput"
+                                      disabled={false}
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      onChange={[Function]}
+                                      type="radio"
+                                    />
+                                    Throughput
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </label>
+                          </EuiButtonDisplay>
+                        </EuiButtonGroupButton>
+                      </div>
+                    </fieldset>
+                  </EuiButtonGroup>
+                </div>
+              </EuiFlexGroup>
+              <EuiSpacer
+                size="m"
+              >
+                <div
+                  className="euiSpacer euiSpacer--m"
+                />
+              </EuiSpacer>
+              <NoMatchMessage
+                size="s"
+              >
+                <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>
+                  }
+                >
+                  <div
+                    className="euiEmptyPrompt"
+                  >
+                    <EuiTitle
+                      size="m"
+                    >
+                      <h2
+                        className="euiTitle euiTitle--medium"
+                      >
+                        No matches
+                      </h2>
+                    </EuiTitle>
+                    <EuiTextColor
+                      color="subdued"
+                    >
+                      <span
+                        className="euiTextColor euiTextColor--subdued"
+                      >
+                        <EuiSpacer
+                          size="m"
+                        >
+                          <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>
+        <ErrorRatesTable
+          addFilter={[Function]}
+          addFilters={[Function]}
+          addPercentileFilter={[Function]}
+          filters={Array []}
+          items={Array []}
+          jaegerErrorRatePltItems={
+            Object {
+              "fixedInterval": "1h",
+              "items": Array [],
+            }
+          }
+          jaegerErrorTableItems={Array []}
+          jaegerTableItems={Array []}
+          loading={true}
+          page="dashboard"
+          setEndTime={[MockFunction]}
+          setRedirect={[Function]}
+          setStartTime={[MockFunction]}
+          throughPutItems={
+            Object {
+              "fixedInterval": "1h",
+              "items": Array [],
+            }
+          }
+          title="Top 5 Service and Operation Errors"
+        >
+          <EuiPanel>
+            <div
+              className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+            >
+              <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+              >
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                >
+                  <EuiFlexItem
+                    grow={10}
+                  >
+                    <div
+                      className="euiFlexItem euiFlexItem--flexGrow10"
+                    >
+                      <PanelTitle
+                        title="Top 5 Service and Operation Errors"
+                        totalItems={0}
+                      >
+                        <EuiText
+                          size="m"
+                        >
+                          <div
+                            className="euiText euiText--medium"
+                          >
+                            <span
+                              className="panel-title"
+                            >
+                              Top 5 Service and Operation Errors
+                            </span>
+                            <span
+                              className="panel-title-count"
+                            >
+                               (0)
+                            </span>
+                          </div>
+                        </EuiText>
+                      </PanelTitle>
+                    </div>
+                  </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="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>
+                  }
+                >
+                  <div
+                    className="euiEmptyPrompt"
+                  >
+                    <EuiTitle
+                      size="m"
+                    >
+                      <h2
+                        className="euiTitle euiTitle--medium"
+                      >
+                        No matches
+                      </h2>
+                    </EuiTitle>
+                    <EuiTextColor
+                      color="subdued"
+                    >
+                      <span
+                        className="euiTextColor euiTextColor--subdued"
+                      >
+                        <EuiSpacer
+                          size="m"
+                        >
+                          <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="xl"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--xl"
+                  />
+                </EuiSpacer>
+              </NoMatchMessage>
+            </div>
+          </EuiPanel>
+        </ErrorRatesTable>
+      </TopGroupsPage>
+    </div>
+  </DashboardContent>
+</Dashboard>
+`;
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/mode_picker.test.tsx.snap b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/mode_picker.test.tsx.snap
new file mode 100644
index 0000000000..469f17277f
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/mode_picker.test.tsx.snap
@@ -0,0 +1,813 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Mode picker component renders mode picker 1`] = `
+<DataSourcePicker
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
+  selectedMode="jaeger"
+  setMode={[MockFunction]}
+>
+  <EuiPopover
+    anchorClassName="eui-textTruncate"
+    anchorPosition="downCenter"
+    button={
+      <EuiButtonEmpty
+        className="dscIndexPattern__triggerButton"
+        color="text"
+        data-test-subj="indexPattern-switch-link"
+        flush="left"
+        iconSide="right"
+        iconType="arrowDown"
+        onClick={[Function]}
+        title="jaeger"
+      >
+        Jaeger
+      </EuiButtonEmpty>
+    }
+    className="eui-textTruncate"
+    closePopover={[Function]}
+    display="inlineBlock"
+    hasArrow={true}
+    isOpen={false}
+    ownFocus={true}
+    panelPaddingSize="s"
+  >
+    <div
+      className="euiPopover euiPopover--anchorDownCenter eui-textTruncate"
+    >
+      <div
+        className="euiPopover__anchor eui-textTruncate"
+      >
+        <EuiButtonEmpty
+          className="dscIndexPattern__triggerButton"
+          color="text"
+          data-test-subj="indexPattern-switch-link"
+          flush="left"
+          iconSide="right"
+          iconType="arrowDown"
+          onClick={[Function]}
+          title="jaeger"
+        >
+          <button
+            className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+            data-test-subj="indexPattern-switch-link"
+            disabled={false}
+            onClick={[Function]}
+            title="jaeger"
+            type="button"
+          >
+            <EuiButtonContent
+              className="euiButtonEmpty__content"
+              iconSide="right"
+              iconSize="m"
+              iconType="arrowDown"
+              textProps={
+                Object {
+                  "className": "euiButtonEmpty__text",
+                }
+              }
+            >
+              <span
+                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+              >
+                <EuiIcon
+                  className="euiButtonContent__icon"
+                  color="inherit"
+                  size="m"
+                  type="arrowDown"
+                >
+                  <EuiIconEmpty
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                    focusable="false"
+                    role="img"
+                    style={null}
+                  >
+                    <svg
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                      focusable="false"
+                      height={16}
+                      role="img"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </EuiIconEmpty>
+                </EuiIcon>
+                <span
+                  className="euiButtonEmpty__text"
+                >
+                  Jaeger
+                </span>
+              </span>
+            </EuiButtonContent>
+          </button>
+        </EuiButtonEmpty>
+      </div>
+    </div>
+  </EuiPopover>
+</DataSourcePicker>
+`;
+
+exports[`Mode picker component renders mode picker 2`] = `
+<DataSourcePicker
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
+  selectedMode="jaeger"
+  setMode={[MockFunction]}
+>
+  <EuiPopover
+    anchorClassName="eui-textTruncate"
+    anchorPosition="downCenter"
+    button={
+      <EuiButtonEmpty
+        className="dscIndexPattern__triggerButton"
+        color="text"
+        data-test-subj="indexPattern-switch-link"
+        flush="left"
+        iconSide="right"
+        iconType="arrowDown"
+        onClick={[Function]}
+        title="jaeger"
+      >
+        Jaeger
+      </EuiButtonEmpty>
+    }
+    className="eui-textTruncate"
+    closePopover={[Function]}
+    display="inlineBlock"
+    hasArrow={true}
+    isOpen={true}
+    ownFocus={true}
+    panelPaddingSize="s"
+  >
+    <div
+      className="euiPopover euiPopover--anchorDownCenter eui-textTruncate"
+    >
+      <div
+        className="euiPopover__anchor eui-textTruncate"
+      >
+        <EuiButtonEmpty
+          className="dscIndexPattern__triggerButton"
+          color="text"
+          data-test-subj="indexPattern-switch-link"
+          flush="left"
+          iconSide="right"
+          iconType="arrowDown"
+          onClick={[Function]}
+          title="jaeger"
+        >
+          <button
+            className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+            data-test-subj="indexPattern-switch-link"
+            disabled={false}
+            onClick={[Function]}
+            title="jaeger"
+            type="button"
+          >
+            <EuiButtonContent
+              className="euiButtonEmpty__content"
+              iconSide="right"
+              iconSize="m"
+              iconType="arrowDown"
+              textProps={
+                Object {
+                  "className": "euiButtonEmpty__text",
+                }
+              }
+            >
+              <span
+                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+              >
+                <EuiIcon
+                  className="euiButtonContent__icon"
+                  color="inherit"
+                  size="m"
+                  type="arrowDown"
+                >
+                  <EuiIconEmpty
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                    focusable="false"
+                    role="img"
+                    style={null}
+                  >
+                    <svg
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                      focusable="false"
+                      height={16}
+                      role="img"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </EuiIconEmpty>
+                </EuiIcon>
+                <span
+                  className="euiButtonEmpty__text"
+                >
+                  Jaeger
+                </span>
+              </span>
+            </EuiButtonContent>
+          </button>
+        </EuiButtonEmpty>
+      </div>
+      <EuiPortal>
+        <Portal
+          containerInfo={
+            <div>
+              <div
+                data-focus-guard="true"
+                style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                tabindex="-1"
+              />
+              <div
+                data-focus-lock-disabled="disabled"
+              >
+                <div
+                  aria-describedby="random_html_id"
+                  aria-live="off"
+                  aria-modal="true"
+                  class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom"
+                  data-autofocus="true"
+                  role="dialog"
+                  style="top: 16px; left: -22px; will-change: transform, opacity; z-index: 2000;"
+                  tabindex="0"
+                >
+                  <div
+                    class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
+                    style="left: 10px; top: 0px;"
+                  />
+                  <p
+                    class="euiScreenReaderOnly"
+                    id="random_html_id"
+                  >
+                    You are in a dialog. To close this dialog, hit escape.
+                  </p>
+                  <div>
+                    <div
+                      class="popOverContainer"
+                    >
+                      <div
+                        class="euiPopoverTitle"
+                      >
+                        Choose data type
+                      </div>
+                      <div
+                        class="euiSelectable"
+                        data-test-subj="indexPattern-switcher"
+                      >
+                        <div
+                          class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                        >
+                          <div
+                            class="euiFormControlLayout__childrenWrapper"
+                          >
+                            <input
+                              aria-activedescendant=""
+                              aria-autocomplete="list"
+                              aria-controls="random_html_id"
+                              aria-expanded="true"
+                              aria-haspopup="listbox"
+                              aria-label="Filter options"
+                              aria-owns="random_html_id"
+                              autocomplete="off"
+                              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch"
+                              placeholder="Filter options"
+                              role="combobox"
+                              type="search"
+                              value=""
+                            />
+                            <div
+                              class="euiFormControlLayoutIcons"
+                            >
+                              <span
+                                class="euiFormControlLayoutCustomIcon"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  height="16"
+                                  role="img"
+                                  viewBox="0 0 16 16"
+                                  width="16"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                />
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSelectableList"
+                        >
+                          <div
+                            style="overflow: visible; width: 0px;"
+                          />
+                          <div
+                            class="resize-triggers"
+                          >
+                            <div
+                              class="expand-trigger"
+                            >
+                              <div
+                                style="width: 1px; height: 1px;"
+                              />
+                            </div>
+                            <div
+                              class="contract-trigger"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                data-focus-guard="true"
+                style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                tabindex="-1"
+              />
+            </div>
+          }
+        >
+          <EuiFocusTrap
+            clickOutsideDisables={true}
+            disabled={true}
+            initialFocus={[Function]}
+            noIsolation={true}
+            onClickOutside={[Function]}
+            onEscapeKey={[Function]}
+            returnFocus={false}
+            scrollLock={false}
+          >
+            <ForwardRef
+              enabled={false}
+              initialFocus={[Function]}
+              noIsolation={true}
+              onClickOutside={[Function]}
+              onEscapeKey={[Function]}
+              returnFocus={false}
+              scrollLock={false}
+            >
+              <ForwardRef
+                enabled={false}
+                initialFocus={[Function]}
+                noIsolation={true}
+                onClickOutside={[Function]}
+                onEscapeKey={[Function]}
+                returnFocus={false}
+                scrollLock={false}
+                sideCar={[Function]}
+              >
+                <ForwardRef(FocusLockUI)
+                  as={
+                    Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "classNames": Object {
+                        "fullWidth": "width-before-scroll-bar",
+                        "zeroRight": "right-scroll-bar-position",
+                      },
+                      "defaultProps": Object {
+                        "enabled": true,
+                        "inert": false,
+                        "removeScrollBar": true,
+                      },
+                      "render": [Function],
+                    }
+                  }
+                  autoFocus={true}
+                  crossFrame={true}
+                  disabled={true}
+                  lockProps={
+                    Object {
+                      "allowPinchZoom": undefined,
+                      "as": undefined,
+                      "enabled": false,
+                      "inert": undefined,
+                      "shards": undefined,
+                      "sideCar": [Function],
+                      "style": undefined,
+                    }
+                  }
+                  noFocusGuards={false}
+                  persistentFocus={false}
+                  returnFocus={false}
+                  sideCar={[Function]}
+                >
+                  <div
+                    data-focus-guard={true}
+                    key="guard-first"
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={-1}
+                  />
+                  <ForwardRef
+                    data-focus-lock-disabled="disabled"
+                    enabled={false}
+                    inert={false}
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                    removeScrollBar={true}
+                    sideCar={[Function]}
+                  >
+                    <div
+                      data-focus-lock-disabled="disabled"
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onScrollCapture={[Function]}
+                      onTouchMoveCapture={[Function]}
+                      onWheelCapture={[Function]}
+                    >
+                      <EuiPanel
+                        aria-describedby="random_html_id"
+                        aria-live="off"
+                        aria-modal="true"
+                        className="euiPopover__panel euiPopover__panel--bottom"
+                        hasShadow={false}
+                        paddingSize="s"
+                        panelRef={[Function]}
+                        role="dialog"
+                        style={
+                          Object {
+                            "left": -22,
+                            "top": 16,
+                            "willChange": "transform, opacity",
+                            "zIndex": 2000,
+                          }
+                        }
+                        tabIndex={0}
+                      >
+                        <div
+                          aria-describedby="random_html_id"
+                          aria-live="off"
+                          aria-modal="true"
+                          className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--bottom"
+                          role="dialog"
+                          style={
+                            Object {
+                              "left": -22,
+                              "top": 16,
+                              "willChange": "transform, opacity",
+                              "zIndex": 2000,
+                            }
+                          }
+                          tabIndex={0}
+                        >
+                          <div
+                            className="euiPopover__panelArrow euiPopover__panelArrow--bottom"
+                            style={
+                              Object {
+                                "left": 10,
+                                "top": 0,
+                              }
+                            }
+                          />
+                          <EuiScreenReaderOnly>
+                            <p
+                              className="euiScreenReaderOnly"
+                              id="random_html_id"
+                            >
+                              <EuiI18n
+                                default="You are in a dialog. To close this dialog, hit escape."
+                                token="euiPopover.screenReaderAnnouncement"
+                              >
+                                You are in a dialog. To close this dialog, hit escape.
+                              </EuiI18n>
+                            </p>
+                          </EuiScreenReaderOnly>
+                          <EuiMutationObserver
+                            observerOptions={
+                              Object {
+                                "attributes": true,
+                                "characterData": true,
+                                "childList": true,
+                                "subtree": true,
+                              }
+                            }
+                            onMutation={[Function]}
+                          >
+                            <div>
+                              <div
+                                className="popOverContainer"
+                              >
+                                <EuiPopoverTitle>
+                                  <div
+                                    className="euiPopoverTitle"
+                                  >
+                                    Choose data type
+                                  </div>
+                                </EuiPopoverTitle>
+                                <EuiSelectable
+                                  data-test-subj="indexPattern-switcher"
+                                  isPreFiltered={false}
+                                  onChange={[Function]}
+                                  options={
+                                    Array [
+                                      Object {
+                                        "checked": "on",
+                                        "data-test-subj": "jaeger-mode",
+                                        "key": "jaeger",
+                                        "label": "Jaeger",
+                                        "value": "jaeger",
+                                      },
+                                      Object {
+                                        "checked": undefined,
+                                        "data-test-subj": "data_prepper-mode",
+                                        "key": "data_prepper",
+                                        "label": "Data Prepper",
+                                        "value": "data_prepper",
+                                      },
+                                    ]
+                                  }
+                                  searchProps={
+                                    Object {
+                                      "compressed": true,
+                                    }
+                                  }
+                                  searchable={true}
+                                  singleSelection="always"
+                                >
+                                  <div
+                                    className="euiSelectable"
+                                    data-test-subj="indexPattern-switcher"
+                                    onBlur={[Function]}
+                                    onFocus={[Function]}
+                                    onKeyDown={[Function]}
+                                  >
+                                    <EuiI18n
+                                      default="Filter options"
+                                      token="euiSelectable.placeholderName"
+                                    >
+                                      <EuiSelectableSearch
+                                        aria-activedescendant=""
+                                        aria-label="Filter options"
+                                        compressed={true}
+                                        defaultValue=""
+                                        isPreFiltered={false}
+                                        key="listSearch"
+                                        listId="random_html_id"
+                                        onChange={[Function]}
+                                        options={
+                                          Array [
+                                            Object {
+                                              "checked": "on",
+                                              "data-test-subj": "jaeger-mode",
+                                              "key": "jaeger",
+                                              "label": "Jaeger",
+                                              "value": "jaeger",
+                                            },
+                                            Object {
+                                              "checked": undefined,
+                                              "data-test-subj": "data_prepper-mode",
+                                              "key": "data_prepper",
+                                              "label": "Data Prepper",
+                                              "value": "data_prepper",
+                                            },
+                                          ]
+                                        }
+                                        placeholder="Filter options"
+                                      >
+                                        <EuiFieldSearch
+                                          aria-activedescendant=""
+                                          aria-autocomplete="list"
+                                          aria-controls="random_html_id"
+                                          aria-expanded={true}
+                                          aria-haspopup="listbox"
+                                          aria-label="Filter options"
+                                          aria-owns="random_html_id"
+                                          autoComplete="off"
+                                          className="euiSelectableSearch"
+                                          compressed={true}
+                                          defaultValue=""
+                                          fullWidth={true}
+                                          incremental={true}
+                                          isClearable={true}
+                                          isLoading={false}
+                                          onSearch={[Function]}
+                                          placeholder="Filter options"
+                                          role="combobox"
+                                        >
+                                          <EuiFormControlLayout
+                                            compressed={true}
+                                            fullWidth={true}
+                                            icon="search"
+                                            isLoading={false}
+                                          >
+                                            <div
+                                              className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                                            >
+                                              <div
+                                                className="euiFormControlLayout__childrenWrapper"
+                                              >
+                                                <EuiValidatableControl>
+                                                  <input
+                                                    aria-activedescendant=""
+                                                    aria-autocomplete="list"
+                                                    aria-controls="random_html_id"
+                                                    aria-expanded={true}
+                                                    aria-haspopup="listbox"
+                                                    aria-label="Filter options"
+                                                    aria-owns="random_html_id"
+                                                    autoComplete="off"
+                                                    className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch"
+                                                    defaultValue=""
+                                                    onKeyUp={[Function]}
+                                                    placeholder="Filter options"
+                                                    role="combobox"
+                                                    type="search"
+                                                  />
+                                                </EuiValidatableControl>
+                                                <EuiFormControlLayoutIcons
+                                                  compressed={true}
+                                                  icon="search"
+                                                  isLoading={false}
+                                                >
+                                                  <div
+                                                    className="euiFormControlLayoutIcons"
+                                                  >
+                                                    <EuiFormControlLayoutCustomIcon
+                                                      size="s"
+                                                      type="search"
+                                                    >
+                                                      <span
+                                                        className="euiFormControlLayoutCustomIcon"
+                                                      >
+                                                        <EuiIcon
+                                                          aria-hidden="true"
+                                                          className="euiFormControlLayoutCustomIcon__icon"
+                                                          size="s"
+                                                          type="search"
+                                                        >
+                                                          <EuiIconEmpty
+                                                            aria-hidden={true}
+                                                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                            focusable="false"
+                                                            role="img"
+                                                            style={null}
+                                                          >
+                                                            <svg
+                                                              aria-hidden={true}
+                                                              className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                              focusable="false"
+                                                              height={16}
+                                                              role="img"
+                                                              style={null}
+                                                              viewBox="0 0 16 16"
+                                                              width={16}
+                                                              xmlns="http://www.w3.org/2000/svg"
+                                                            />
+                                                          </EuiIconEmpty>
+                                                        </EuiIcon>
+                                                      </span>
+                                                    </EuiFormControlLayoutCustomIcon>
+                                                  </div>
+                                                </EuiFormControlLayoutIcons>
+                                              </div>
+                                            </div>
+                                          </EuiFormControlLayout>
+                                        </EuiFieldSearch>
+                                      </EuiSelectableSearch>
+                                    </EuiI18n>
+                                    <EuiI18n
+                                      default="Filter options"
+                                      token="euiSelectable.placeholderName"
+                                    >
+                                      <EuiSelectableList
+                                        aria-label="Filter options"
+                                        key="list"
+                                        listId="random_html_id"
+                                        makeOptionId={[Function]}
+                                        onOptionClick={[Function]}
+                                        options={
+                                          Array [
+                                            Object {
+                                              "checked": "on",
+                                              "data-test-subj": "jaeger-mode",
+                                              "key": "jaeger",
+                                              "label": "Jaeger",
+                                              "value": "jaeger",
+                                            },
+                                            Object {
+                                              "checked": undefined,
+                                              "data-test-subj": "data_prepper-mode",
+                                              "key": "data_prepper",
+                                              "label": "Data Prepper",
+                                              "value": "data_prepper",
+                                            },
+                                          ]
+                                        }
+                                        rowHeight={32}
+                                        searchValue=""
+                                        searchable={true}
+                                        setActiveOptionIndex={[Function]}
+                                        singleSelection="always"
+                                        visibleOptions={
+                                          Array [
+                                            Object {
+                                              "checked": "on",
+                                              "data-test-subj": "jaeger-mode",
+                                              "key": "jaeger",
+                                              "label": "Jaeger",
+                                              "value": "jaeger",
+                                            },
+                                            Object {
+                                              "checked": undefined,
+                                              "data-test-subj": "data_prepper-mode",
+                                              "key": "data_prepper",
+                                              "label": "Data Prepper",
+                                              "value": "data_prepper",
+                                            },
+                                          ]
+                                        }
+                                      >
+                                        <div
+                                          className="euiSelectableList"
+                                        >
+                                          <AutoSizer
+                                            disableHeight={true}
+                                            disableWidth={false}
+                                            onResize={[Function]}
+                                            style={Object {}}
+                                          >
+                                            <div
+                                              style={
+                                                Object {
+                                                  "overflow": "visible",
+                                                  "width": 0,
+                                                }
+                                              }
+                                            />
+                                          </AutoSizer>
+                                        </div>
+                                      </EuiSelectableList>
+                                    </EuiI18n>
+                                  </div>
+                                </EuiSelectable>
+                              </div>
+                            </div>
+                          </EuiMutationObserver>
+                        </div>
+                      </EuiPanel>
+                    </div>
+                  </ForwardRef>
+                  <div
+                    data-focus-guard={true}
+                    style={
+                      Object {
+                        "height": "0px",
+                        "left": "1px",
+                        "overflow": "hidden",
+                        "padding": 0,
+                        "position": "fixed",
+                        "top": "1px",
+                        "width": "1px",
+                      }
+                    }
+                    tabIndex={-1}
+                  />
+                </ForwardRef(FocusLockUI)>
+              </ForwardRef>
+            </ForwardRef>
+          </EuiFocusTrap>
+        </Portal>
+      </EuiPortal>
+    </div>
+  </EuiPopover>
+</DataSourcePicker>
+`;
diff --git a/public/components/trace_analytics/components/dashboard/mode_picker.tsx b/public/components/trace_analytics/components/dashboard/mode_picker.tsx
new file mode 100644
index 0000000000..14594958ca
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/mode_picker.tsx
@@ -0,0 +1,100 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiButtonEmpty, EuiPopover, EuiPopoverTitle, EuiSelectable } from '@elastic/eui';
+import React, { useState } from 'react';
+import { TraceAnalyticsMode } from '../../home';
+
+const labels = new Map([
+  ['jaeger', 'Jaeger'],
+  ['data_prepper', 'Data Prepper'],
+]);
+
+export function DataSourcePicker(props: {
+  modes: {
+    id: string;
+    title: string;
+  }[];
+  selectedMode: TraceAnalyticsMode;
+  setMode: (mode: TraceAnalyticsMode) => void;
+}) {
+  const { modes, selectedMode, setMode } = props;
+  const [isPopoverOpen, setPopoverIsOpen] = useState(false);
+
+  const trigger = {
+    label: labels.get(selectedMode),
+    title: selectedMode,
+    'data-test-subj': 'indexPattern-switch-link',
+    className: 'dscIndexPattern__triggerButton',
+  };
+
+  const createTrigger = () => {
+    const { label, title, ...rest } = trigger;
+    return (
+      <EuiButtonEmpty
+        flush="left"
+        color="text"
+        iconSide="right"
+        iconType="arrowDown"
+        title={title}
+        onClick={() => setPopoverIsOpen(!isPopoverOpen)}
+        {...rest}
+      >
+        {label}
+      </EuiButtonEmpty>
+    );
+  };
+
+  return (
+    <>
+      <EuiPopover
+        button={createTrigger()}
+        isOpen={isPopoverOpen}
+        closePopover={() => setPopoverIsOpen(false)}
+        className="eui-textTruncate"
+        anchorClassName="eui-textTruncate"
+        display="inlineBlock"
+        panelPaddingSize="s"
+        ownFocus
+      >
+        <div className="popOverContainer">
+          <EuiPopoverTitle>{'Choose data type'}</EuiPopoverTitle>
+          <EuiSelectable
+            data-test-subj="indexPattern-switcher"
+            searchable
+            singleSelection="always"
+            options={modes.map((x) => ({
+              label: x.title,
+              key: x.id,
+              value: x.id,
+              checked: x.id === selectedMode ? 'on' : undefined,
+              "data-test-subj": x.id + '-mode',
+            }))}
+            onChange={(choices) => {
+              const choice = choices.find(({ checked }) => checked) as unknown as {
+                value: string;
+                label: string;
+                key: TraceAnalyticsMode;
+              };
+              setMode(choice.key);
+              setPopoverIsOpen(false);
+              sessionStorage.setItem('TraceAnalyticsMode', choice.key);
+            }}
+            searchProps={{
+              compressed: true,
+            }}
+          >
+            {(list, search) => (
+              <>
+                {search}
+                {list}
+              </>
+            )}
+          </EuiSelectable>
+        </div>
+      </EuiPopover>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/dashboard/top_groups_page.tsx b/public/components/trace_analytics/components/dashboard/top_groups_page.tsx
new file mode 100644
index 0000000000..f086332843
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/top_groups_page.tsx
@@ -0,0 +1,80 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiSpacer } from '@elastic/eui';
+import React, { useState } from 'react';
+import { FilterType } from '../common/filters/filters';
+import { ErrorRatePlt } from '../common/plots/error_rate_plt';
+import { ThroughputPlt } from '../common/plots/throughput_plt';
+import { ErrorRatesTable } from './top_error_rates_table';
+import { LatencyTable } from './top_latency_table';
+
+export function TopGroupsPage(props: {
+  filters: FilterType[];
+  addFilter: (filter: FilterType) => void;
+  addFilters: (filter: FilterType[]) => void;
+  addPercentileFilter: (condition?: 'gte' | 'lte', additionalFilters?: FilterType[]) => void;
+  setRedirect: (redirect: boolean) => void;
+  loading: boolean;
+  page: 'dashboard' | 'traces' | 'services' | 'app';
+  throughPutItems: { items: any[]; fixedInterval: string };
+  jaegerErrorRatePltItems: { items: any[]; fixedInterval: string };
+  jaegerErrorTableItems: any[];
+  jaegerTableItems: any[];
+  setStartTime: (time: string) => void;
+  setEndTime: (time: string) => void;
+}) {
+  const toggleButtons = [
+    {
+      id: 'error_rate',
+      label: 'Error rate',
+      'data-test-subj': 'errors-toggle'
+    },
+    {
+      id: 'throughput',
+      label: 'Throughput',
+      'data-test-subj': 'throughput-toggle'
+    },
+  ];
+  const [idSelected, setIdSelected] = useState('error_rate');
+  return (
+    <>
+      {idSelected === 'error_rate' ? (
+        <>
+          <EuiSpacer size="m" />
+          <ErrorRatePlt
+            items={props.jaegerErrorRatePltItems}
+            setStartTime={props.setStartTime}
+            setEndTime={props.setEndTime}
+            setIdSelected={(mode: string) => setIdSelected(mode)}
+            idSelected={idSelected}
+            toggleButtons={toggleButtons}
+          />
+          <ErrorRatesTable
+            title={'Top 5 Service and Operation Errors'}
+            items={props.jaegerErrorTableItems}
+            {...props}
+          />
+        </>
+      ) : (
+        <>
+          <ThroughputPlt
+            items={props.throughPutItems}
+            setStartTime={props.setStartTime}
+            setEndTime={props.setEndTime}
+            setIdSelected={(mode: string) => setIdSelected(mode)}
+            idSelected={idSelected}
+            toggleButtons={toggleButtons}
+          />
+          <LatencyTable
+            title={'Top 5 Service and Operation Latency'}
+            items={props.jaegerTableItems}
+            {...props}
+          />
+        </>
+      )}
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
new file mode 100644
index 0000000000..42291d3fa6
--- /dev/null
+++ b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
@@ -0,0 +1,4963 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Services component renders empty services page 1`] = `
+<Services
+  appConfigs={Array []}
+  childBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Trace analytics",
+      },
+      Object {
+        "href": "#/trace_analytics/services",
+        "text": "Services",
+      },
+    ]
+  }
+  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/services",
+                "text": "Services",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  dataPrepperIndicesExist={true}
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  mode="data_prepper"
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
+  nameColumnAction={[Function]}
+  page="services"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
+  }
+  query=""
+  setEndTime={[MockFunction]}
+  setFilters={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+  traceColumnAction={[Function]}
+>
+  <EuiTitle
+    size="l"
+  >
+    <h2
+      className="euiTitle euiTitle--large"
+      style={
+        Object {
+          "fontWeight": 430,
+        }
+      }
+    >
+      Services
+    </h2>
+  </EuiTitle>
+  <DataSourcePicker
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    selectedMode="data_prepper"
+  >
+    <EuiPopover
+      anchorClassName="eui-textTruncate"
+      anchorPosition="downCenter"
+      button={
+        <EuiButtonEmpty
+          className="dscIndexPattern__triggerButton"
+          color="text"
+          data-test-subj="indexPattern-switch-link"
+          flush="left"
+          iconSide="right"
+          iconType="arrowDown"
+          onClick={[Function]}
+          title="data_prepper"
+        >
+          Data Prepper
+        </EuiButtonEmpty>
+      }
+      className="eui-textTruncate"
+      closePopover={[Function]}
+      display="inlineBlock"
+      hasArrow={true}
+      isOpen={false}
+      ownFocus={true}
+      panelPaddingSize="s"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownCenter eui-textTruncate"
+      >
+        <div
+          className="euiPopover__anchor eui-textTruncate"
+        >
+          <EuiButtonEmpty
+            className="dscIndexPattern__triggerButton"
+            color="text"
+            data-test-subj="indexPattern-switch-link"
+            flush="left"
+            iconSide="right"
+            iconType="arrowDown"
+            onClick={[Function]}
+            title="data_prepper"
+          >
+            <button
+              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+              data-test-subj="indexPattern-switch-link"
+              disabled={false}
+              onClick={[Function]}
+              title="data_prepper"
+              type="button"
+            >
+              <EuiButtonContent
+                className="euiButtonEmpty__content"
+                iconSide="right"
+                iconSize="m"
+                iconType="arrowDown"
+                textProps={
+                  Object {
+                    "className": "euiButtonEmpty__text",
+                  }
+                }
+              >
+                <span
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                >
+                  <EuiIcon
+                    className="euiButtonContent__icon"
+                    color="inherit"
+                    size="m"
+                    type="arrowDown"
+                  >
+                    <EuiIconEmpty
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                      focusable="false"
+                      role="img"
+                      style={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </EuiIconEmpty>
+                  </EuiIcon>
+                  <span
+                    className="euiButtonEmpty__text"
+                  >
+                    Data Prepper
+                  </span>
+                </span>
+              </EuiButtonContent>
+            </button>
+          </EuiButtonEmpty>
+        </div>
+      </div>
+    </EuiPopover>
+  </DataSourcePicker>
+  <ServicesContent
+    appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/services",
+          "text": "Services",
+        },
+      ]
+    }
+    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/services",
+                  "text": "Services",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
+    dataPrepperIndicesExist={true}
+    endTime="now"
+    filters={Array []}
+    http={[MockFunction]}
+    mode="data_prepper"
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    nameColumnAction={[Function]}
+    page="services"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
+    query=""
+    setEndTime={[MockFunction]}
+    setFilters={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQuery={[MockFunction]}
+    setStartTime={[MockFunction]}
+    startTime="now-5m"
+    traceColumnAction={[Function]}
+  >
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      mode="data_prepper"
+      page="services"
+      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"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <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=""
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <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
+                        compressed={false}
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
+                        >
+                          <EuiFormControlLayoutCustomIcon
+                            size="m"
+                            type="search"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="search"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "maxWidth": "40vw",
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              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",
+                    },
+                  ]
+                }
+                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}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <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="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                          >
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              className="euiFormControlLayout__prepend"
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            >
+                              <EuiPopover
+                                anchorClassName="euiQuickSelectPopover__anchor"
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <EuiIcon
+                                      type="calendar"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                >
+                                  <div
+                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <button
+                                        aria-label="Date quick select"
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </EuiQuickSelectPopover>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiDatePickerRange
+                                className="euiDatePickerRange--inGroup"
+                                endDateControl={<div />}
+                                iconType={false}
+                                isCustom={true}
+                                startDateControl={<div />}
+                              >
+                                <div
+                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                >
+                                  <button
+                                    className="euiSuperDatePicker__prettyFormat"
+                                    data-test-subj="superDatePickerShowDatesButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                  >
+                                    Last 5 minutes
+                                    <span
+                                      className="euiSuperDatePicker__prettyFormatLink"
+                                    >
+                                      <EuiI18n
+                                        default="Show dates"
+                                        token="euiSuperDatePicker.showDatesButtonLabel"
+                                      >
+                                        Show dates
+                                      </EuiI18n>
+                                    </span>
+                                  </button>
+                                </div>
+                              </EuiDatePickerRange>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButton
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                iconType="refresh"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-click-metric-element="trace_analytics.refresh_button"
+                    data-test-subj="superDatePickerApplyTimeButton"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
+                        >
+                          <EuiIconEmpty
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        mode="data_prepper"
+        page="services"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "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"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <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]}
+                    data-test-subj="global-filter-button"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      data-test-subj="global-filter-button"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Change all filters"
+                          iconType="filter"
+                          onClick={[Function]}
+                          title="Change all filters"
+                        >
+                          <button
+                            aria-label="Change all filters"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            title="Change all filters"
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              size="m"
+                              type="filter"
+                            >
+                              <EuiIconEmpty
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                  focusable="false"
+                                  height={16}
+                                  role="img"
+                                  style={null}
+                                  viewBox="0 0 16 16"
+                                  width={16}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                />
+                              </EuiIconEmpty>
+                            </EuiIcon>
+                          </button>
+                        </EuiButtonIcon>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    data-test-subj="addfilter"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      data-test-subj="addfilter"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonEmpty
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
+                              >
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  + Add filter
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <ServicesTable
+      addFilter={[Function]}
+      dataPrepperIndicesExist={true}
+      items={Array []}
+      loading={true}
+      mode="data_prepper"
+      nameColumnAction={[Function]}
+      setRedirect={[Function]}
+      traceColumnAction={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+          >
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <EuiFlexItem
+                grow={10}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow10"
+                >
+                  <PanelTitle
+                    title="Services"
+                    totalItems={0}
+                  >
+                    <EuiText
+                      size="m"
+                    >
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <span
+                          className="panel-title"
+                        >
+                          Services
+                        </span>
+                        <span
+                          className="panel-title-count"
+                        >
+                           (0)
+                        </span>
+                      </div>
+                    </EuiText>
+                  </PanelTitle>
+                </div>
+              </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="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>
+              }
+            >
+              <div
+                className="euiEmptyPrompt"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    No matches
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <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="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
+          </NoMatchMessage>
+        </div>
+      </EuiPanel>
+    </ServicesTable>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <ServiceMap
+      addFilter={[Function]}
+      currService=""
+      idSelected="latency"
+      page="services"
+      serviceMap={Object {}}
+      setIdSelected={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <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 euiButtonGroup--small euiButtonGroup--text"
+              disabled={false}
+            >
+              <EuiScreenReaderOnly>
+                <legend
+                  className="euiScreenReaderOnly"
+                />
+              </EuiScreenReaderOnly>
+              <div
+                className="euiButtonGroup__buttons"
+              >
+                <EuiButtonGroupButton
+                  color="text"
+                  element="label"
+                  id="latency"
+                  isDisabled={false}
+                  isIconOnly={false}
+                  isSelected={true}
+                  key="0"
+                  label="Latency"
+                  name="random_html_id"
+                  onChange={[Function]}
+                  size="s"
+                >
+                  <EuiButtonDisplay
+                    baseClassName="euiButtonGroupButton"
+                    className="euiButtonGroupButton-isSelected"
+                    color="text"
+                    element="label"
+                    fill={true}
+                    htmlFor="random_html_id"
+                    isDisabled={false}
+                    onClick={[Function]}
+                    size="s"
+                    textProps={
+                      Object {
+                        "className": "euiButtonGroupButton__textShift",
+                        "data-text": "Latency",
+                        "ref": [Function],
+                        "title": "Latency",
+                      }
+                    }
+                  >
+                    <label
+                      className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                      disabled={false}
+                      htmlFor="random_html_id"
+                      onClick={[Function]}
+                      style={
+                        Object {
+                          "minWidth": undefined,
+                        }
+                      }
+                    >
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text euiButtonGroupButton__textShift",
+                            "data-text": "Latency",
+                            "ref": [Function],
+                            "title": "Latency",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            className="euiButton__text euiButtonGroupButton__textShift"
+                            data-text="Latency"
+                            title="Latency"
+                          >
+                            <input
+                              checked={true}
+                              className="euiScreenReaderOnly"
+                              data-test-subj="latency"
+                              disabled={false}
+                              id="random_html_id"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              type="radio"
+                            />
+                            Latency
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </label>
+                  </EuiButtonDisplay>
+                </EuiButtonGroupButton>
+                <EuiButtonGroupButton
+                  color="text"
+                  element="label"
+                  id="error_rate"
+                  isDisabled={false}
+                  isIconOnly={false}
+                  isSelected={false}
+                  key="1"
+                  label="Error rate"
+                  name="random_html_id"
+                  onChange={[Function]}
+                  size="s"
+                >
+                  <EuiButtonDisplay
+                    baseClassName="euiButtonGroupButton"
+                    className=""
+                    color="text"
+                    element="label"
+                    fill={false}
+                    htmlFor="random_html_id"
+                    isDisabled={false}
+                    onClick={[Function]}
+                    size="s"
+                    textProps={
+                      Object {
+                        "className": "euiButtonGroupButton__textShift",
+                        "data-text": "Error rate",
+                        "ref": [Function],
+                        "title": "Error rate",
+                      }
+                    }
+                  >
+                    <label
+                      className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                      disabled={false}
+                      htmlFor="random_html_id"
+                      onClick={[Function]}
+                      style={
+                        Object {
+                          "minWidth": undefined,
+                        }
+                      }
+                    >
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text euiButtonGroupButton__textShift",
+                            "data-text": "Error rate",
+                            "ref": [Function],
+                            "title": "Error rate",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            className="euiButton__text euiButtonGroupButton__textShift"
+                            data-text="Error rate"
+                            title="Error rate"
+                          >
+                            <input
+                              checked={false}
+                              className="euiScreenReaderOnly"
+                              data-test-subj="error_rate"
+                              disabled={false}
+                              id="random_html_id"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              type="radio"
+                            />
+                            Error rate
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </label>
+                  </EuiButtonDisplay>
+                </EuiButtonGroupButton>
+                <EuiButtonGroupButton
+                  color="text"
+                  element="label"
+                  id="throughput"
+                  isDisabled={false}
+                  isIconOnly={false}
+                  isSelected={false}
+                  key="2"
+                  label="Throughput"
+                  name="random_html_id"
+                  onChange={[Function]}
+                  size="s"
+                >
+                  <EuiButtonDisplay
+                    baseClassName="euiButtonGroupButton"
+                    className=""
+                    color="text"
+                    element="label"
+                    fill={false}
+                    htmlFor="random_html_id"
+                    isDisabled={false}
+                    onClick={[Function]}
+                    size="s"
+                    textProps={
+                      Object {
+                        "className": "euiButtonGroupButton__textShift",
+                        "data-text": "Throughput",
+                        "ref": [Function],
+                        "title": "Throughput",
+                      }
+                    }
+                  >
+                    <label
+                      className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                      disabled={false}
+                      htmlFor="random_html_id"
+                      onClick={[Function]}
+                      style={
+                        Object {
+                          "minWidth": undefined,
+                        }
+                      }
+                    >
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text euiButtonGroupButton__textShift",
+                            "data-text": "Throughput",
+                            "ref": [Function],
+                            "title": "Throughput",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            className="euiButton__text euiButtonGroupButton__textShift"
+                            data-text="Throughput"
+                            title="Throughput"
+                          >
+                            <input
+                              checked={false}
+                              className="euiScreenReaderOnly"
+                              data-test-subj="throughput"
+                              disabled={false}
+                              id="random_html_id"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              type="radio"
+                            />
+                            Throughput
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </label>
+                  </EuiButtonDisplay>
+                </EuiButtonGroupButton>
+              </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"
+            >
+              <EuiFlexItem
+                grow={false}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <EuiText>
+                    <div
+                      className="euiText euiText--medium"
+                    >
+                      Focus on
+                    </div>
+                  </EuiText>
+                </div>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <div
+                  className="euiFlexItem"
+                >
+                  <EuiFieldSearch
+                    compressed={false}
+                    fullWidth={false}
+                    incremental={false}
+                    isClearable={true}
+                    isInvalid={false}
+                    isLoading={false}
+                    onChange={[Function]}
+                    onSearch={[Function]}
+                    placeholder="Service name"
+                    value=""
+                  >
+                    <EuiFormControlLayout
+                      compressed={false}
+                      fullWidth={false}
+                      icon="search"
+                      isLoading={false}
+                    >
+                      <div
+                        className="euiFormControlLayout"
+                      >
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <EuiValidatableControl
+                            isInvalid={false}
+                          >
+                            <input
+                              className="euiFieldSearch"
+                              onChange={[Function]}
+                              onKeyUp={[Function]}
+                              placeholder="Service name"
+                              type="search"
+                              value=""
+                            />
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons
+                            compressed={false}
+                            icon="search"
+                            isLoading={false}
+                          >
+                            <div
+                              className="euiFormControlLayoutIcons"
+                            >
+                              <EuiFormControlLayoutCustomIcon
+                                size="m"
+                                type="search"
+                              >
+                                <span
+                                  className="euiFormControlLayoutCustomIcon"
+                                >
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
+                                    type="search"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </EuiFormControlLayoutCustomIcon>
+                            </div>
+                          </EuiFormControlLayoutIcons>
+                        </div>
+                      </div>
+                    </EuiFormControlLayout>
+                  </EuiFieldSearch>
+                </div>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <EuiSpacer>
+            <div
+              className="euiSpacer euiSpacer--l"
+            />
+          </EuiSpacer>
+          <div
+            style={
+              Object {
+                "minHeight": 434,
+              }
+            }
+          >
+            <NoMatchMessage
+              size="s"
+            >
+              <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>
+                }
+              >
+                <div
+                  className="euiEmptyPrompt"
+                >
+                  <EuiTitle
+                    size="m"
+                  >
+                    <h2
+                      className="euiTitle euiTitle--medium"
+                    >
+                      No matches
+                    </h2>
+                  </EuiTitle>
+                  <EuiTextColor
+                    color="subdued"
+                  >
+                    <span
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      <EuiSpacer
+                        size="m"
+                      >
+                        <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>
+      </EuiPanel>
+    </ServiceMap>
+  </ServicesContent>
+</Services>
+`;
+
+exports[`Services component renders jaeger services page 1`] = `
+<Services
+  appConfigs={Array []}
+  childBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Trace analytics",
+      },
+      Object {
+        "href": "#/trace_analytics/services",
+        "text": "Services",
+      },
+    ]
+  }
+  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/services",
+                "text": "Services",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  dataPrepperIndicesExist={false}
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  jaegerIndicesExist={true}
+  mode="jaeger"
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
+  nameColumnAction={[Function]}
+  page="services"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
+  }
+  query=""
+  setEndTime={[MockFunction]}
+  setFilters={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+  traceColumnAction={[Function]}
+>
+  <EuiTitle
+    size="l"
+  >
+    <h2
+      className="euiTitle euiTitle--large"
+      style={
+        Object {
+          "fontWeight": 430,
+        }
+      }
+    >
+      Services
+    </h2>
+  </EuiTitle>
+  <DataSourcePicker
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    selectedMode="jaeger"
+  >
+    <EuiPopover
+      anchorClassName="eui-textTruncate"
+      anchorPosition="downCenter"
+      button={
+        <EuiButtonEmpty
+          className="dscIndexPattern__triggerButton"
+          color="text"
+          data-test-subj="indexPattern-switch-link"
+          flush="left"
+          iconSide="right"
+          iconType="arrowDown"
+          onClick={[Function]}
+          title="jaeger"
+        >
+          Jaeger
+        </EuiButtonEmpty>
+      }
+      className="eui-textTruncate"
+      closePopover={[Function]}
+      display="inlineBlock"
+      hasArrow={true}
+      isOpen={false}
+      ownFocus={true}
+      panelPaddingSize="s"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownCenter eui-textTruncate"
+      >
+        <div
+          className="euiPopover__anchor eui-textTruncate"
+        >
+          <EuiButtonEmpty
+            className="dscIndexPattern__triggerButton"
+            color="text"
+            data-test-subj="indexPattern-switch-link"
+            flush="left"
+            iconSide="right"
+            iconType="arrowDown"
+            onClick={[Function]}
+            title="jaeger"
+          >
+            <button
+              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+              data-test-subj="indexPattern-switch-link"
+              disabled={false}
+              onClick={[Function]}
+              title="jaeger"
+              type="button"
+            >
+              <EuiButtonContent
+                className="euiButtonEmpty__content"
+                iconSide="right"
+                iconSize="m"
+                iconType="arrowDown"
+                textProps={
+                  Object {
+                    "className": "euiButtonEmpty__text",
+                  }
+                }
+              >
+                <span
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                >
+                  <EuiIcon
+                    className="euiButtonContent__icon"
+                    color="inherit"
+                    size="m"
+                    type="arrowDown"
+                  >
+                    <EuiIconArrowDown
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                      focusable="false"
+                      role="img"
+                      style={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                          fillRule="non-zero"
+                        />
+                      </svg>
+                    </EuiIconArrowDown>
+                  </EuiIcon>
+                  <span
+                    className="euiButtonEmpty__text"
+                  >
+                    Jaeger
+                  </span>
+                </span>
+              </EuiButtonContent>
+            </button>
+          </EuiButtonEmpty>
+        </div>
+      </div>
+    </EuiPopover>
+  </DataSourcePicker>
+  <ServicesContent
+    appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/services",
+          "text": "Services",
+        },
+      ]
+    }
+    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/services",
+                  "text": "Services",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
+    dataPrepperIndicesExist={false}
+    endTime="now"
+    filters={Array []}
+    http={[MockFunction]}
+    jaegerIndicesExist={true}
+    mode="jaeger"
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    nameColumnAction={[Function]}
+    page="services"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
+    query=""
+    setEndTime={[MockFunction]}
+    setFilters={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQuery={[MockFunction]}
+    setStartTime={[MockFunction]}
+    startTime="now-5m"
+    traceColumnAction={[Function]}
+  >
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      mode="jaeger"
+      page="services"
+      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"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <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=""
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <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
+                        compressed={false}
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
+                        >
+                          <EuiFormControlLayoutCustomIcon
+                            size="m"
+                            type="search"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="search"
+                              >
+                                <EuiIconSearch
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                    />
+                                  </svg>
+                                </EuiIconSearch>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "maxWidth": "40vw",
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              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",
+                    },
+                  ]
+                }
+                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}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <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="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                          >
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              className="euiFormControlLayout__prepend"
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            >
+                              <EuiPopover
+                                anchorClassName="euiQuickSelectPopover__anchor"
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <EuiIcon
+                                      type="calendar"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                >
+                                  <div
+                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <button
+                                        aria-label="Date quick select"
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconArrowDown
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                    fillRule="non-zero"
+                                                  />
+                                                </svg>
+                                              </EuiIconArrowDown>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              >
+                                                <EuiIconCalendar
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                      fillRule="evenodd"
+                                                    />
+                                                  </svg>
+                                                </EuiIconCalendar>
+                                              </EuiIcon>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </EuiQuickSelectPopover>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiDatePickerRange
+                                className="euiDatePickerRange--inGroup"
+                                endDateControl={<div />}
+                                iconType={false}
+                                isCustom={true}
+                                startDateControl={<div />}
+                              >
+                                <div
+                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                >
+                                  <button
+                                    className="euiSuperDatePicker__prettyFormat"
+                                    data-test-subj="superDatePickerShowDatesButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                  >
+                                    Last 5 minutes
+                                    <span
+                                      className="euiSuperDatePicker__prettyFormatLink"
+                                    >
+                                      <EuiI18n
+                                        default="Show dates"
+                                        token="euiSuperDatePicker.showDatesButtonLabel"
+                                      >
+                                        Show dates
+                                      </EuiI18n>
+                                    </span>
+                                  </button>
+                                </div>
+                              </EuiDatePickerRange>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButton
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                iconType="refresh"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-click-metric-element="trace_analytics.refresh_button"
+                    data-test-subj="superDatePickerApplyTimeButton"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
+                        >
+                          <EuiIconRefresh
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M11.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
+                              />
+                            </svg>
+                          </EuiIconRefresh>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        mode="jaeger"
+        page="services"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "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"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <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]}
+                    data-test-subj="global-filter-button"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      data-test-subj="global-filter-button"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Change all filters"
+                          iconType="filter"
+                          onClick={[Function]}
+                          title="Change all filters"
+                        >
+                          <button
+                            aria-label="Change all filters"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            title="Change all filters"
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              size="m"
+                              type="filter"
+                            >
+                              <EuiIconFilter
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit 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>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    data-test-subj="addfilter"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      data-test-subj="addfilter"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonEmpty
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
+                              >
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  + Add filter
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <ServicesTable
+      addFilter={[Function]}
+      dataPrepperIndicesExist={false}
+      items={Array []}
+      jaegerIndicesExist={true}
+      loading={true}
+      mode="jaeger"
+      nameColumnAction={[Function]}
+      setRedirect={[Function]}
+      traceColumnAction={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+          >
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <EuiFlexItem
+                grow={10}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow10"
+                >
+                  <PanelTitle
+                    title="Services"
+                    totalItems={0}
+                  >
+                    <EuiText
+                      size="m"
+                    >
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <span
+                          className="panel-title"
+                        >
+                          Services
+                        </span>
+                        <span
+                          className="panel-title-count"
+                        >
+                           (0)
+                        </span>
+                      </div>
+                    </EuiText>
+                  </PanelTitle>
+                </div>
+              </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="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>
+              }
+            >
+              <div
+                className="euiEmptyPrompt"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    No matches
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <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="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
+          </NoMatchMessage>
+        </div>
+      </EuiPanel>
+    </ServicesTable>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <div />
+  </ServicesContent>
+</Services>
+`;
+
+exports[`Services component renders services page 1`] = `
+<Services
+  appConfigs={Array []}
+  childBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Trace analytics",
+      },
+      Object {
+        "href": "#/trace_analytics/services",
+        "text": "Services",
+      },
+    ]
+  }
+  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/services",
+                "text": "Services",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  dataPrepperIndicesExist={true}
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  mode="data_prepper"
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
+  nameColumnAction={[Function]}
+  page="services"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
+  }
+  query=""
+  setEndTime={[MockFunction]}
+  setFilters={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+  traceColumnAction={[Function]}
+>
+  <EuiTitle
+    size="l"
+  >
+    <h2
+      className="euiTitle euiTitle--large"
+      style={
+        Object {
+          "fontWeight": 430,
+        }
+      }
+    >
+      Services
+    </h2>
+  </EuiTitle>
+  <DataSourcePicker
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    selectedMode="data_prepper"
+  >
+    <EuiPopover
+      anchorClassName="eui-textTruncate"
+      anchorPosition="downCenter"
+      button={
+        <EuiButtonEmpty
+          className="dscIndexPattern__triggerButton"
+          color="text"
+          data-test-subj="indexPattern-switch-link"
+          flush="left"
+          iconSide="right"
+          iconType="arrowDown"
+          onClick={[Function]}
+          title="data_prepper"
+        >
+          Data Prepper
+        </EuiButtonEmpty>
+      }
+      className="eui-textTruncate"
+      closePopover={[Function]}
+      display="inlineBlock"
+      hasArrow={true}
+      isOpen={false}
+      ownFocus={true}
+      panelPaddingSize="s"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownCenter eui-textTruncate"
+      >
+        <div
+          className="euiPopover__anchor eui-textTruncate"
+        >
+          <EuiButtonEmpty
+            className="dscIndexPattern__triggerButton"
+            color="text"
+            data-test-subj="indexPattern-switch-link"
+            flush="left"
+            iconSide="right"
+            iconType="arrowDown"
+            onClick={[Function]}
+            title="data_prepper"
+          >
+            <button
+              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+              data-test-subj="indexPattern-switch-link"
+              disabled={false}
+              onClick={[Function]}
+              title="data_prepper"
+              type="button"
+            >
+              <EuiButtonContent
+                className="euiButtonEmpty__content"
+                iconSide="right"
+                iconSize="m"
+                iconType="arrowDown"
+                textProps={
+                  Object {
+                    "className": "euiButtonEmpty__text",
+                  }
+                }
+              >
+                <span
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                >
+                  <EuiIcon
+                    className="euiButtonContent__icon"
+                    color="inherit"
+                    size="m"
+                    type="arrowDown"
+                  >
+                    <EuiIconArrowDown
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                      focusable="false"
+                      role="img"
+                      style={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                          fillRule="non-zero"
+                        />
+                      </svg>
+                    </EuiIconArrowDown>
+                  </EuiIcon>
+                  <span
+                    className="euiButtonEmpty__text"
+                  >
+                    Data Prepper
+                  </span>
+                </span>
+              </EuiButtonContent>
+            </button>
+          </EuiButtonEmpty>
+        </div>
+      </div>
+    </EuiPopover>
+  </DataSourcePicker>
+  <ServicesContent
+    appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/services",
+          "text": "Services",
+        },
+      ]
+    }
+    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/services",
+                  "text": "Services",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
+    dataPrepperIndicesExist={true}
+    endTime="now"
+    filters={Array []}
+    http={[MockFunction]}
+    mode="data_prepper"
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    nameColumnAction={[Function]}
+    page="services"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
+    query=""
+    setEndTime={[MockFunction]}
+    setFilters={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQuery={[MockFunction]}
+    setStartTime={[MockFunction]}
+    startTime="now-5m"
+    traceColumnAction={[Function]}
+  >
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      mode="data_prepper"
+      page="services"
+      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"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <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=""
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <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
+                        compressed={false}
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
+                        >
+                          <EuiFormControlLayoutCustomIcon
+                            size="m"
+                            type="search"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="search"
+                              >
+                                <EuiIconSearch
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                    />
+                                  </svg>
+                                </EuiIconSearch>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "maxWidth": "40vw",
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              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",
+                    },
+                  ]
+                }
+                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}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <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="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                          >
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              className="euiFormControlLayout__prepend"
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            >
+                              <EuiPopover
+                                anchorClassName="euiQuickSelectPopover__anchor"
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <EuiIcon
+                                      type="calendar"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                >
+                                  <div
+                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <button
+                                        aria-label="Date quick select"
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconArrowDown
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                    fillRule="non-zero"
+                                                  />
+                                                </svg>
+                                              </EuiIconArrowDown>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              >
+                                                <EuiIconCalendar
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                      fillRule="evenodd"
+                                                    />
+                                                  </svg>
+                                                </EuiIconCalendar>
+                                              </EuiIcon>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </EuiQuickSelectPopover>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiDatePickerRange
+                                className="euiDatePickerRange--inGroup"
+                                endDateControl={<div />}
+                                iconType={false}
+                                isCustom={true}
+                                startDateControl={<div />}
+                              >
+                                <div
+                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                >
+                                  <button
+                                    className="euiSuperDatePicker__prettyFormat"
+                                    data-test-subj="superDatePickerShowDatesButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                  >
+                                    Last 5 minutes
+                                    <span
+                                      className="euiSuperDatePicker__prettyFormatLink"
+                                    >
+                                      <EuiI18n
+                                        default="Show dates"
+                                        token="euiSuperDatePicker.showDatesButtonLabel"
+                                      >
+                                        Show dates
+                                      </EuiI18n>
+                                    </span>
+                                  </button>
+                                </div>
+                              </EuiDatePickerRange>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButton
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                iconType="refresh"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-click-metric-element="trace_analytics.refresh_button"
+                    data-test-subj="superDatePickerApplyTimeButton"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
+                        >
+                          <EuiIconRefresh
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M11.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
+                              />
+                            </svg>
+                          </EuiIconRefresh>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        mode="data_prepper"
+        page="services"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "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"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <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]}
+                    data-test-subj="global-filter-button"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      data-test-subj="global-filter-button"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Change all filters"
+                          iconType="filter"
+                          onClick={[Function]}
+                          title="Change all filters"
+                        >
+                          <button
+                            aria-label="Change all filters"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            title="Change all filters"
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              size="m"
+                              type="filter"
+                            >
+                              <EuiIconFilter
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit 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>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    data-test-subj="addfilter"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      data-test-subj="addfilter"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonEmpty
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
+                              >
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  + Add filter
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <ServicesTable
+      addFilter={[Function]}
+      dataPrepperIndicesExist={true}
+      items={Array []}
+      loading={true}
+      mode="data_prepper"
+      nameColumnAction={[Function]}
+      setRedirect={[Function]}
+      traceColumnAction={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+          >
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <EuiFlexItem
+                grow={10}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow10"
+                >
+                  <PanelTitle
+                    title="Services"
+                    totalItems={0}
+                  >
+                    <EuiText
+                      size="m"
+                    >
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <span
+                          className="panel-title"
+                        >
+                          Services
+                        </span>
+                        <span
+                          className="panel-title-count"
+                        >
+                           (0)
+                        </span>
+                      </div>
+                    </EuiText>
+                  </PanelTitle>
+                </div>
+              </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="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>
+              }
+            >
+              <div
+                className="euiEmptyPrompt"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    No matches
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <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="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
+          </NoMatchMessage>
+        </div>
+      </EuiPanel>
+    </ServicesTable>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <ServiceMap
+      addFilter={[Function]}
+      currService=""
+      idSelected="latency"
+      page="services"
+      serviceMap={Object {}}
+      setIdSelected={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <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 euiButtonGroup--small euiButtonGroup--text"
+              disabled={false}
+            >
+              <EuiScreenReaderOnly>
+                <legend
+                  className="euiScreenReaderOnly"
+                />
+              </EuiScreenReaderOnly>
+              <div
+                className="euiButtonGroup__buttons"
+              >
+                <EuiButtonGroupButton
+                  color="text"
+                  element="label"
+                  id="latency"
+                  isDisabled={false}
+                  isIconOnly={false}
+                  isSelected={true}
+                  key="0"
+                  label="Latency"
+                  name="random_html_id"
+                  onChange={[Function]}
+                  size="s"
+                >
+                  <EuiButtonDisplay
+                    baseClassName="euiButtonGroupButton"
+                    className="euiButtonGroupButton-isSelected"
+                    color="text"
+                    element="label"
+                    fill={true}
+                    htmlFor="random_html_id"
+                    isDisabled={false}
+                    onClick={[Function]}
+                    size="s"
+                    textProps={
+                      Object {
+                        "className": "euiButtonGroupButton__textShift",
+                        "data-text": "Latency",
+                        "ref": [Function],
+                        "title": "Latency",
+                      }
+                    }
+                  >
+                    <label
+                      className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                      disabled={false}
+                      htmlFor="random_html_id"
+                      onClick={[Function]}
+                      style={
+                        Object {
+                          "minWidth": undefined,
+                        }
+                      }
+                    >
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text euiButtonGroupButton__textShift",
+                            "data-text": "Latency",
+                            "ref": [Function],
+                            "title": "Latency",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            className="euiButton__text euiButtonGroupButton__textShift"
+                            data-text="Latency"
+                            title="Latency"
+                          >
+                            <input
+                              checked={true}
+                              className="euiScreenReaderOnly"
+                              data-test-subj="latency"
+                              disabled={false}
+                              id="random_html_id"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              type="radio"
+                            />
+                            Latency
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </label>
+                  </EuiButtonDisplay>
+                </EuiButtonGroupButton>
+                <EuiButtonGroupButton
+                  color="text"
+                  element="label"
+                  id="error_rate"
+                  isDisabled={false}
+                  isIconOnly={false}
+                  isSelected={false}
+                  key="1"
+                  label="Error rate"
+                  name="random_html_id"
+                  onChange={[Function]}
+                  size="s"
+                >
+                  <EuiButtonDisplay
+                    baseClassName="euiButtonGroupButton"
+                    className=""
+                    color="text"
+                    element="label"
+                    fill={false}
+                    htmlFor="random_html_id"
+                    isDisabled={false}
+                    onClick={[Function]}
+                    size="s"
+                    textProps={
+                      Object {
+                        "className": "euiButtonGroupButton__textShift",
+                        "data-text": "Error rate",
+                        "ref": [Function],
+                        "title": "Error rate",
+                      }
+                    }
+                  >
+                    <label
+                      className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                      disabled={false}
+                      htmlFor="random_html_id"
+                      onClick={[Function]}
+                      style={
+                        Object {
+                          "minWidth": undefined,
+                        }
+                      }
+                    >
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text euiButtonGroupButton__textShift",
+                            "data-text": "Error rate",
+                            "ref": [Function],
+                            "title": "Error rate",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            className="euiButton__text euiButtonGroupButton__textShift"
+                            data-text="Error rate"
+                            title="Error rate"
+                          >
+                            <input
+                              checked={false}
+                              className="euiScreenReaderOnly"
+                              data-test-subj="error_rate"
+                              disabled={false}
+                              id="random_html_id"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              type="radio"
+                            />
+                            Error rate
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </label>
+                  </EuiButtonDisplay>
+                </EuiButtonGroupButton>
+                <EuiButtonGroupButton
+                  color="text"
+                  element="label"
+                  id="throughput"
+                  isDisabled={false}
+                  isIconOnly={false}
+                  isSelected={false}
+                  key="2"
+                  label="Throughput"
+                  name="random_html_id"
+                  onChange={[Function]}
+                  size="s"
+                >
+                  <EuiButtonDisplay
+                    baseClassName="euiButtonGroupButton"
+                    className=""
+                    color="text"
+                    element="label"
+                    fill={false}
+                    htmlFor="random_html_id"
+                    isDisabled={false}
+                    onClick={[Function]}
+                    size="s"
+                    textProps={
+                      Object {
+                        "className": "euiButtonGroupButton__textShift",
+                        "data-text": "Throughput",
+                        "ref": [Function],
+                        "title": "Throughput",
+                      }
+                    }
+                  >
+                    <label
+                      className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                      disabled={false}
+                      htmlFor="random_html_id"
+                      onClick={[Function]}
+                      style={
+                        Object {
+                          "minWidth": undefined,
+                        }
+                      }
+                    >
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text euiButtonGroupButton__textShift",
+                            "data-text": "Throughput",
+                            "ref": [Function],
+                            "title": "Throughput",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            className="euiButton__text euiButtonGroupButton__textShift"
+                            data-text="Throughput"
+                            title="Throughput"
+                          >
+                            <input
+                              checked={false}
+                              className="euiScreenReaderOnly"
+                              data-test-subj="throughput"
+                              disabled={false}
+                              id="random_html_id"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              type="radio"
+                            />
+                            Throughput
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </label>
+                  </EuiButtonDisplay>
+                </EuiButtonGroupButton>
+              </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"
+            >
+              <EuiFlexItem
+                grow={false}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <EuiText>
+                    <div
+                      className="euiText euiText--medium"
+                    >
+                      Focus on
+                    </div>
+                  </EuiText>
+                </div>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <div
+                  className="euiFlexItem"
+                >
+                  <EuiFieldSearch
+                    compressed={false}
+                    fullWidth={false}
+                    incremental={false}
+                    isClearable={true}
+                    isInvalid={false}
+                    isLoading={false}
+                    onChange={[Function]}
+                    onSearch={[Function]}
+                    placeholder="Service name"
+                    value=""
+                  >
+                    <EuiFormControlLayout
+                      compressed={false}
+                      fullWidth={false}
+                      icon="search"
+                      isLoading={false}
+                    >
+                      <div
+                        className="euiFormControlLayout"
+                      >
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <EuiValidatableControl
+                            isInvalid={false}
+                          >
+                            <input
+                              className="euiFieldSearch"
+                              onChange={[Function]}
+                              onKeyUp={[Function]}
+                              placeholder="Service name"
+                              type="search"
+                              value=""
+                            />
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons
+                            compressed={false}
+                            icon="search"
+                            isLoading={false}
+                          >
+                            <div
+                              className="euiFormControlLayoutIcons"
+                            >
+                              <EuiFormControlLayoutCustomIcon
+                                size="m"
+                                type="search"
+                              >
+                                <span
+                                  className="euiFormControlLayoutCustomIcon"
+                                >
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
+                                    type="search"
+                                  >
+                                    <EuiIconSearch
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                        />
+                                      </svg>
+                                    </EuiIconSearch>
+                                  </EuiIcon>
+                                </span>
+                              </EuiFormControlLayoutCustomIcon>
+                            </div>
+                          </EuiFormControlLayoutIcons>
+                        </div>
+                      </div>
+                    </EuiFormControlLayout>
+                  </EuiFieldSearch>
+                </div>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <EuiSpacer>
+            <div
+              className="euiSpacer euiSpacer--l"
+            />
+          </EuiSpacer>
+          <div
+            style={
+              Object {
+                "minHeight": 434,
+              }
+            }
+          >
+            <NoMatchMessage
+              size="s"
+            >
+              <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>
+                }
+              >
+                <div
+                  className="euiEmptyPrompt"
+                >
+                  <EuiTitle
+                    size="m"
+                  >
+                    <h2
+                      className="euiTitle euiTitle--medium"
+                    >
+                      No matches
+                    </h2>
+                  </EuiTitle>
+                  <EuiTextColor
+                    color="subdued"
+                  >
+                    <span
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      <EuiSpacer
+                        size="m"
+                      >
+                        <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>
+      </EuiPanel>
+    </ServiceMap>
+  </ServicesContent>
+</Services>
+`;
diff --git a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services_table.test.tsx.snap b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services_table.test.tsx.snap
new file mode 100644
index 0000000000..9d99f82c4f
--- /dev/null
+++ b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services_table.test.tsx.snap
@@ -0,0 +1,3346 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Services table component renders empty jaeger services table message 1`] = `
+<ServicesTable
+  addFilter={[MockFunction]}
+  dataPrepperIndicesExist={false}
+  items={Array []}
+  jaegerIndicesExist={true}
+  loading={false}
+  mode="jaeger"
+  nameColumnAction={[Function]}
+  setRedirect={[MockFunction]}
+  traceColumnAction={[Function]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={10}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow10"
+            >
+              <PanelTitle
+                title="Services"
+                totalItems={0}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Services
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (0)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </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="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>
+          }
+        >
+          <div
+            className="euiEmptyPrompt"
+          >
+            <EuiTitle
+              size="m"
+            >
+              <h2
+                className="euiTitle euiTitle--medium"
+              >
+                No matches
+              </h2>
+            </EuiTitle>
+            <EuiTextColor
+              color="subdued"
+            >
+              <span
+                className="euiTextColor euiTextColor--subdued"
+              >
+                <EuiSpacer
+                  size="m"
+                >
+                  <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="xl"
+        >
+          <div
+            className="euiSpacer euiSpacer--xl"
+          />
+        </EuiSpacer>
+      </NoMatchMessage>
+    </div>
+  </EuiPanel>
+</ServicesTable>
+`;
+
+exports[`Services table component renders empty services table message 1`] = `
+<ServicesTable
+  addFilter={[MockFunction]}
+  dataPrepperIndicesExist={true}
+  items={Array []}
+  jaegerIndicesExist={false}
+  loading={false}
+  mode="data_prepper"
+  nameColumnAction={[Function]}
+  setRedirect={[MockFunction]}
+  traceColumnAction={[Function]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={10}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow10"
+            >
+              <PanelTitle
+                title="Services"
+                totalItems={0}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Services
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (0)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </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="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>
+          }
+        >
+          <div
+            className="euiEmptyPrompt"
+          >
+            <EuiTitle
+              size="m"
+            >
+              <h2
+                className="euiTitle euiTitle--medium"
+              >
+                No matches
+              </h2>
+            </EuiTitle>
+            <EuiTextColor
+              color="subdued"
+            >
+              <span
+                className="euiTextColor euiTextColor--subdued"
+              >
+                <EuiSpacer
+                  size="m"
+                >
+                  <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="xl"
+        >
+          <div
+            className="euiSpacer euiSpacer--xl"
+          />
+        </EuiSpacer>
+      </NoMatchMessage>
+    </div>
+  </EuiPanel>
+</ServicesTable>
+`;
+
+exports[`Services table component renders jaeger services table 1`] = `
+<ServicesTable
+  addFilter={[MockFunction]}
+  dataPrepperIndicesExist={false}
+  items={
+    Array [
+      Object {
+        "average_latency": 49.54,
+        "error_rate": 3.77,
+        "name": "database",
+        "throughput": 53,
+        "traces": 31,
+      },
+    ]
+  }
+  jaegerIndicesExist={true}
+  loading={false}
+  mode="jaeger"
+  nameColumnAction={[Function]}
+  setRedirect={[MockFunction]}
+  traceColumnAction={[Function]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={10}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow10"
+            >
+              <PanelTitle
+                title="Services"
+                totalItems={1}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Services
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (1)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="m"
+      >
+        <div
+          className="euiSpacer euiSpacer--m"
+        />
+      </EuiSpacer>
+      <EuiHorizontalRule
+        margin="none"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full"
+        />
+      </EuiHorizontalRule>
+      <EuiInMemoryTable
+        columns={
+          Array [
+            Object {
+              "align": "left",
+              "field": "name",
+              "name": "Name",
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "average_latency",
+              "name": "Average latency (ms)",
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "error_rate",
+              "name": "Error rate",
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "throughput",
+              "name": "Throughput",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+            },
+            Object {
+              "align": "right",
+              "field": "traces",
+              "name": "Traces",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+            },
+          ]
+        }
+        items={
+          Array [
+            Object {
+              "average_latency": 49.54,
+              "error_rate": 3.77,
+              "name": "database",
+              "throughput": 53,
+              "traces": 31,
+            },
+          ]
+        }
+        loading={false}
+        pagination={
+          Object {
+            "initialPageSize": 10,
+            "pageSizeOptions": Array [
+              5,
+              10,
+              15,
+            ],
+          }
+        }
+        responsive={true}
+        sorting={
+          Object {
+            "sort": Object {
+              "direction": "asc",
+              "field": "name",
+            },
+          }
+        }
+        tableLayout="auto"
+      >
+        <EuiBasicTable
+          columns={
+            Array [
+              Object {
+                "align": "left",
+                "field": "name",
+                "name": "Name",
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "average_latency",
+                "name": "Average latency (ms)",
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "error_rate",
+                "name": "Error rate",
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "throughput",
+                "name": "Throughput",
+                "render": [Function],
+                "sortable": true,
+                "truncateText": true,
+              },
+              Object {
+                "align": "right",
+                "field": "traces",
+                "name": "Traces",
+                "render": [Function],
+                "sortable": true,
+                "truncateText": true,
+              },
+            ]
+          }
+          items={
+            Array [
+              Object {
+                "average_latency": 49.54,
+                "error_rate": 3.77,
+                "name": "database",
+                "throughput": 53,
+                "traces": 31,
+              },
+            ]
+          }
+          loading={false}
+          noItemsMessage="No items found"
+          onChange={[Function]}
+          pagination={
+            Object {
+              "hidePerPageOptions": undefined,
+              "pageIndex": 0,
+              "pageSize": 10,
+              "pageSizeOptions": Array [
+                5,
+                10,
+                15,
+              ],
+              "totalItemCount": 1,
+            }
+          }
+          responsive={true}
+          sorting={
+            Object {
+              "allowNeutralSort": true,
+              "sort": Object {
+                "direction": "asc",
+                "field": "Name",
+              },
+            }
+          }
+          tableLayout="auto"
+        >
+          <div
+            className="euiBasicTable"
+          >
+            <div>
+              <EuiTableHeaderMobile>
+                <div
+                  className="euiTableHeaderMobile"
+                >
+                  <EuiFlexGroup
+                    alignItems="baseline"
+                    justifyContent="spaceBetween"
+                    responsive={false}
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        />
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiTableSortMobile
+                            items={
+                              Array [
+                                Object {
+                                  "isSortAscending": true,
+                                  "isSorted": true,
+                                  "key": "_data_s_name_0",
+                                  "name": "Name",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_average_latency_1",
+                                  "name": "Average latency (ms)",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_error_rate_2",
+                                  "name": "Error rate",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_throughput_3",
+                                  "name": "Throughput",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_traces_4",
+                                  "name": "Traces",
+                                  "onSort": [Function],
+                                },
+                              ]
+                            }
+                          >
+                            <div
+                              className="euiTableSortMobile"
+                            >
+                              <EuiPopover
+                                anchorPosition="downRight"
+                                button={
+                                  <EuiButtonEmpty
+                                    flush="right"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                    size="xs"
+                                  >
+                                    <EuiI18n
+                                      default="Sorting"
+                                      token="euiTableSortMobile.sorting"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="none"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownRight"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      flush="right"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      onClick={[Function]}
+                                      size="xs"
+                                    >
+                                      <button
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconArrowDown
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                    fillRule="non-zero"
+                                                  />
+                                                </svg>
+                                              </EuiIconArrowDown>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text"
+                                            >
+                                              <EuiI18n
+                                                default="Sorting"
+                                                token="euiTableSortMobile.sorting"
+                                              >
+                                                Sorting
+                                              </EuiI18n>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </div>
+                          </EuiTableSortMobile>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </div>
+              </EuiTableHeaderMobile>
+              <EuiTable
+                id="random_html_id"
+                responsive={true}
+                tableLayout="auto"
+              >
+                <table
+                  className="euiTable euiTable--responsive euiTable--auto"
+                  id="random_html_id"
+                  tabIndex={-1}
+                >
+                  <EuiScreenReaderOnly>
+                    <caption
+                      className="euiScreenReaderOnly euiTableCaption"
+                    >
+                      <EuiDelayRender
+                        delay={500}
+                      />
+                    </caption>
+                  </EuiScreenReaderOnly>
+                  <EuiTableHeader>
+                    <thead>
+                      <tr>
+                        <EuiTableHeaderCell
+                          align="left"
+                          data-test-subj="tableHeaderCell_name_0"
+                          isSortAscending={true}
+                          isSorted={true}
+                          key="_data_h_name_0"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="ascending"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_name_0"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSortAscending={true}
+                                isSorted={true}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Name",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Name"
+                                      >
+                                        Name
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                  <EuiIcon
+                                    className="euiTableSortIcon"
+                                    size="m"
+                                    type="sortUp"
+                                  >
+                                    <EuiIconSortUp
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiTableSortIcon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiTableSortIcon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M8 4.207v8.237c0 .307-.224.556-.5.556s-.5-.249-.5-.556V4.207L2.904 8.303a.5.5 0 01-.707-.707l4.242-4.242a1.5 1.5 0 012.122 0l4.242 4.242a.5.5 0 11-.707.707L8 4.207z"
+                                        />
+                                      </svg>
+                                    </EuiIconSortUp>
+                                  </EuiIcon>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_average_latency_1"
+                          isSorted={false}
+                          key="_data_h_average_latency_1"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_average_latency_1"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Average latency (ms)",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Average latency (ms)"
+                                      >
+                                        Average latency (ms)
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_error_rate_2"
+                          isSorted={false}
+                          key="_data_h_error_rate_2"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_error_rate_2"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Error rate",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Error rate"
+                                      >
+                                        Error rate
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_throughput_3"
+                          isSorted={false}
+                          key="_data_h_throughput_3"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_throughput_3"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Throughput",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Throughput"
+                                      >
+                                        Throughput
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_traces_4"
+                          isSorted={false}
+                          key="_data_h_traces_4"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_traces_4"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Traces",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Traces"
+                                      >
+                                        Traces
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                      </tr>
+                    </thead>
+                  </EuiTableHeader>
+                  <EuiTableBody
+                    bodyRef={[Function]}
+                  >
+                    <tbody>
+                      <EuiTableRow
+                        isSelected={false}
+                      >
+                        <tr
+                          className="euiTableRow"
+                        >
+                          <EuiTableRowCell
+                            align="left"
+                            key="_data_column_name_0_0"
+                            mobileOptions={
+                              Object {
+                                "header": "Name",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Name
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--overflowingContent"
+                              >
+                                <EuiLink
+                                  className=""
+                                  data-test-subj="service-link"
+                                  key=".0"
+                                  onClick={[Function]}
+                                >
+                                  <button
+                                    className="euiLink euiLink--primary"
+                                    data-test-subj="service-link"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    database
+                                  </button>
+                                </EuiLink>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_average_latency_0_1"
+                            mobileOptions={
+                              Object {
+                                "header": "Average latency (ms)",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Average latency (ms)
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                49.54
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_error_rate_0_2"
+                            mobileOptions={
+                              Object {
+                                "header": "Error rate",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Error rate
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                <EuiText
+                                  className=""
+                                  key=".0"
+                                  size="s"
+                                >
+                                  <div
+                                    className="euiText euiText--small"
+                                  >
+                                    3.77%
+                                  </div>
+                                </EuiText>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_throughput_0_3"
+                            mobileOptions={
+                              Object {
+                                "header": "Throughput",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Throughput
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                              >
+                                <EuiI18nNumber
+                                  className=""
+                                  key=".0"
+                                  value={53}
+                                >
+                                  53
+                                </EuiI18nNumber>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_traces_0_4"
+                            mobileOptions={
+                              Object {
+                                "header": "Traces",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Traces
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                              >
+                                <EuiLink
+                                  onClick={[Function]}
+                                >
+                                  <button
+                                    className="euiLink euiLink--primary"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiI18nNumber
+                                      value={31}
+                                    >
+                                      31
+                                    </EuiI18nNumber>
+                                  </button>
+                                </EuiLink>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                        </tr>
+                      </EuiTableRow>
+                    </tbody>
+                  </EuiTableBody>
+                </table>
+              </EuiTable>
+            </div>
+            <PaginationBar
+              aria-controls="random_html_id"
+              onPageChange={[Function]}
+              onPageSizeChange={[Function]}
+              pagination={
+                Object {
+                  "hidePerPageOptions": undefined,
+                  "pageIndex": 0,
+                  "pageSize": 10,
+                  "pageSizeOptions": Array [
+                    5,
+                    10,
+                    15,
+                  ],
+                  "totalItemCount": 1,
+                }
+              }
+            >
+              <div>
+                <EuiSpacer
+                  size="m"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiTablePagination
+                  activePage={0}
+                  aria-controls="random_html_id"
+                  itemsPerPage={10}
+                  itemsPerPageOptions={
+                    Array [
+                      5,
+                      10,
+                      15,
+                    ]
+                  }
+                  onChangeItemsPerPage={[Function]}
+                  onChangePage={[Function]}
+                  pageCount={1}
+                >
+                  <EuiFlexGroup
+                    alignItems="center"
+                    justifyContent="spaceBetween"
+                    responsive={false}
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiPopover
+                            anchorPosition="upRight"
+                            button={
+                              <EuiButtonEmpty
+                                color="text"
+                                data-test-subj="tablePaginationPopoverButton"
+                                iconSide="right"
+                                iconType="arrowDown"
+                                onClick={[Function]}
+                                size="xs"
+                              >
+                                <EuiI18n
+                                  default="Rows per page"
+                                  token="euiTablePagination.rowsPerPage"
+                                />
+                                : 
+                                10
+                              </EuiButtonEmpty>
+                            }
+                            closePopover={[Function]}
+                            display="inlineBlock"
+                            hasArrow={true}
+                            isOpen={false}
+                            ownFocus={true}
+                            panelPaddingSize="none"
+                          >
+                            <div
+                              className="euiPopover euiPopover--anchorUpRight"
+                            >
+                              <div
+                                className="euiPopover__anchor"
+                              >
+                                <EuiButtonEmpty
+                                  color="text"
+                                  data-test-subj="tablePaginationPopoverButton"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  onClick={[Function]}
+                                  size="xs"
+                                >
+                                  <button
+                                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                                    data-test-subj="tablePaginationPopoverButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiButtonContent
+                                      className="euiButtonEmpty__content"
+                                      iconSide="right"
+                                      iconSize="s"
+                                      iconType="arrowDown"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButtonEmpty__text",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                      >
+                                        <EuiIcon
+                                          className="euiButtonContent__icon"
+                                          color="inherit"
+                                          size="s"
+                                          type="arrowDown"
+                                        >
+                                          <EuiIconArrowDown
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                            focusable="false"
+                                            role="img"
+                                            style={null}
+                                          >
+                                            <svg
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                              focusable="false"
+                                              height={16}
+                                              role="img"
+                                              style={null}
+                                              viewBox="0 0 16 16"
+                                              width={16}
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            >
+                                              <path
+                                                d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                fillRule="non-zero"
+                                              />
+                                            </svg>
+                                          </EuiIconArrowDown>
+                                        </EuiIcon>
+                                        <span
+                                          className="euiButtonEmpty__text"
+                                        >
+                                          <EuiI18n
+                                            default="Rows per page"
+                                            token="euiTablePagination.rowsPerPage"
+                                          >
+                                            Rows per page
+                                          </EuiI18n>
+                                          : 
+                                          10
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonEmpty>
+                              </div>
+                            </div>
+                          </EuiPopover>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiPagination
+                            activePage={0}
+                            aria-controls="random_html_id"
+                            onPageClick={[Function]}
+                            pageCount={1}
+                          >
+                            <nav
+                              className="euiPagination"
+                            >
+                              <EuiI18n
+                                default="Previous page, {page}"
+                                token="euiPagination.previousPage"
+                                values={
+                                  Object {
+                                    "page": 0,
+                                  }
+                                }
+                              >
+                                <EuiI18n
+                                  default="Previous page"
+                                  token="euiPagination.disabledPreviousPage"
+                                >
+                                  <EuiButtonIcon
+                                    aria-label="Previous page"
+                                    color="text"
+                                    data-test-subj="pagination-button-previous"
+                                    disabled={true}
+                                    iconType="arrowLeft"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      aria-label="Previous page"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="pagination-button-previous"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="arrowLeft"
+                                      >
+                                        <EuiIconArrowLeft
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit 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="M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z"
+                                              fillRule="nonzero"
+                                            />
+                                          </svg>
+                                        </EuiIconArrowLeft>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                              </EuiI18n>
+                              <ul
+                                className="euiPagination__list"
+                              >
+                                <PaginationButton
+                                  key="0"
+                                  pageIndex={0}
+                                >
+                                  <li
+                                    className="euiPagination__item"
+                                  >
+                                    <EuiPaginationButton
+                                      aria-controls="random_html_id"
+                                      hideOnMobile={true}
+                                      isActive={true}
+                                      onClick={[Function]}
+                                      pageIndex={0}
+                                      totalPages={1}
+                                    >
+                                      <EuiI18n
+                                        default="Page {page} of {totalPages}"
+                                        token="euiPaginationButton.longPageString"
+                                        values={
+                                          Object {
+                                            "page": 1,
+                                            "totalPages": 1,
+                                          }
+                                        }
+                                      >
+                                        <EuiI18n
+                                          default="Page {page}"
+                                          token="euiPaginationButton.shortPageString"
+                                          values={
+                                            Object {
+                                              "page": 1,
+                                            }
+                                          }
+                                        >
+                                          <EuiButtonEmpty
+                                            aria-controls="random_html_id"
+                                            aria-current={true}
+                                            aria-label="Page 1 of 1"
+                                            className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                            color="text"
+                                            data-test-subj="pagination-button-0"
+                                            href="#random_html_id"
+                                            isDisabled={true}
+                                            onClick={[Function]}
+                                            size="s"
+                                          >
+                                            <button
+                                              aria-controls="random_html_id"
+                                              aria-current={true}
+                                              aria-label="Page 1 of 1"
+                                              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                              data-test-subj="pagination-button-0"
+                                              disabled={true}
+                                              onClick={[Function]}
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButtonEmpty__content"
+                                                iconSide="left"
+                                                iconSize="m"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButtonEmpty__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButtonEmpty__content"
+                                                >
+                                                  <span
+                                                    className="euiButtonEmpty__text"
+                                                  >
+                                                    1
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonEmpty>
+                                        </EuiI18n>
+                                      </EuiI18n>
+                                    </EuiPaginationButton>
+                                  </li>
+                                </PaginationButton>
+                              </ul>
+                              <EuiI18n
+                                default="Next page, {page}"
+                                token="euiPagination.nextPage"
+                                values={
+                                  Object {
+                                    "page": 2,
+                                  }
+                                }
+                              >
+                                <EuiI18n
+                                  default="Next page"
+                                  token="euiPagination.disabledNextPage"
+                                >
+                                  <EuiButtonIcon
+                                    aria-label="Next page"
+                                    color="text"
+                                    data-test-subj="pagination-button-next"
+                                    disabled={true}
+                                    iconType="arrowRight"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      aria-label="Next page"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="pagination-button-next"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="arrowRight"
+                                      >
+                                        <EuiIconArrowRight
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit 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="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                                              fillRule="nonzero"
+                                            />
+                                          </svg>
+                                        </EuiIconArrowRight>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                              </EuiI18n>
+                            </nav>
+                          </EuiPagination>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </EuiTablePagination>
+              </div>
+            </PaginationBar>
+          </div>
+        </EuiBasicTable>
+      </EuiInMemoryTable>
+    </div>
+  </EuiPanel>
+</ServicesTable>
+`;
+
+exports[`Services table component renders services table 1`] = `
+<ServicesTable
+  addFilter={[MockFunction]}
+  dataPrepperIndicesExist={true}
+  items={
+    Array [
+      Object {
+        "average_latency": 49.54,
+        "connected_services": Array [
+          "order",
+          "inventory",
+        ],
+        "error_rate": 3.77,
+        "name": "database",
+        "number_of_connected_services": 2,
+        "throughput": 53,
+        "traces": 31,
+      },
+    ]
+  }
+  jaegerIndicesExist={false}
+  loading={false}
+  mode="data_prepper"
+  nameColumnAction={[Function]}
+  setRedirect={[MockFunction]}
+  traceColumnAction={[Function]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={10}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow10"
+            >
+              <PanelTitle
+                title="Services"
+                totalItems={1}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Services
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (1)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="m"
+      >
+        <div
+          className="euiSpacer euiSpacer--m"
+        />
+      </EuiSpacer>
+      <EuiHorizontalRule
+        margin="none"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full"
+        />
+      </EuiHorizontalRule>
+      <EuiInMemoryTable
+        columns={
+          Array [
+            Object {
+              "align": "left",
+              "field": "name",
+              "name": "Name",
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "average_latency",
+              "name": "Average latency (ms)",
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "error_rate",
+              "name": "Error rate",
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "throughput",
+              "name": "Throughput",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+            },
+            Object {
+              "align": "right",
+              "field": "number_of_connected_services",
+              "name": "No. of connected services",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+              "width": "80px",
+            },
+            Object {
+              "align": "left",
+              "field": "connected_services",
+              "name": "Connected services",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+            },
+            Object {
+              "align": "right",
+              "field": "traces",
+              "name": "Traces",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+            },
+          ]
+        }
+        items={
+          Array [
+            Object {
+              "average_latency": 49.54,
+              "connected_services": Array [
+                "order",
+                "inventory",
+              ],
+              "error_rate": 3.77,
+              "name": "database",
+              "number_of_connected_services": 2,
+              "throughput": 53,
+              "traces": 31,
+            },
+          ]
+        }
+        loading={false}
+        pagination={
+          Object {
+            "initialPageSize": 10,
+            "pageSizeOptions": Array [
+              5,
+              10,
+              15,
+            ],
+          }
+        }
+        responsive={true}
+        sorting={
+          Object {
+            "sort": Object {
+              "direction": "asc",
+              "field": "name",
+            },
+          }
+        }
+        tableLayout="auto"
+      >
+        <EuiBasicTable
+          columns={
+            Array [
+              Object {
+                "align": "left",
+                "field": "name",
+                "name": "Name",
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "average_latency",
+                "name": "Average latency (ms)",
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "error_rate",
+                "name": "Error rate",
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "throughput",
+                "name": "Throughput",
+                "render": [Function],
+                "sortable": true,
+                "truncateText": true,
+              },
+              Object {
+                "align": "right",
+                "field": "number_of_connected_services",
+                "name": "No. of connected services",
+                "render": [Function],
+                "sortable": true,
+                "truncateText": true,
+                "width": "80px",
+              },
+              Object {
+                "align": "left",
+                "field": "connected_services",
+                "name": "Connected services",
+                "render": [Function],
+                "sortable": true,
+                "truncateText": true,
+              },
+              Object {
+                "align": "right",
+                "field": "traces",
+                "name": "Traces",
+                "render": [Function],
+                "sortable": true,
+                "truncateText": true,
+              },
+            ]
+          }
+          items={
+            Array [
+              Object {
+                "average_latency": 49.54,
+                "connected_services": Array [
+                  "order",
+                  "inventory",
+                ],
+                "error_rate": 3.77,
+                "name": "database",
+                "number_of_connected_services": 2,
+                "throughput": 53,
+                "traces": 31,
+              },
+            ]
+          }
+          loading={false}
+          noItemsMessage="No items found"
+          onChange={[Function]}
+          pagination={
+            Object {
+              "hidePerPageOptions": undefined,
+              "pageIndex": 0,
+              "pageSize": 10,
+              "pageSizeOptions": Array [
+                5,
+                10,
+                15,
+              ],
+              "totalItemCount": 1,
+            }
+          }
+          responsive={true}
+          sorting={
+            Object {
+              "allowNeutralSort": true,
+              "sort": Object {
+                "direction": "asc",
+                "field": "Name",
+              },
+            }
+          }
+          tableLayout="auto"
+        >
+          <div
+            className="euiBasicTable"
+          >
+            <div>
+              <EuiTableHeaderMobile>
+                <div
+                  className="euiTableHeaderMobile"
+                >
+                  <EuiFlexGroup
+                    alignItems="baseline"
+                    justifyContent="spaceBetween"
+                    responsive={false}
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        />
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiTableSortMobile
+                            items={
+                              Array [
+                                Object {
+                                  "isSortAscending": true,
+                                  "isSorted": true,
+                                  "key": "_data_s_name_0",
+                                  "name": "Name",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_average_latency_1",
+                                  "name": "Average latency (ms)",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_error_rate_2",
+                                  "name": "Error rate",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_throughput_3",
+                                  "name": "Throughput",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_number_of_connected_services_4",
+                                  "name": "No. of connected services",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_connected_services_5",
+                                  "name": "Connected services",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_traces_6",
+                                  "name": "Traces",
+                                  "onSort": [Function],
+                                },
+                              ]
+                            }
+                          >
+                            <div
+                              className="euiTableSortMobile"
+                            >
+                              <EuiPopover
+                                anchorPosition="downRight"
+                                button={
+                                  <EuiButtonEmpty
+                                    flush="right"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                    size="xs"
+                                  >
+                                    <EuiI18n
+                                      default="Sorting"
+                                      token="euiTableSortMobile.sorting"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="none"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownRight"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      flush="right"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      onClick={[Function]}
+                                      size="xs"
+                                    >
+                                      <button
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text"
+                                            >
+                                              <EuiI18n
+                                                default="Sorting"
+                                                token="euiTableSortMobile.sorting"
+                                              >
+                                                Sorting
+                                              </EuiI18n>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </div>
+                          </EuiTableSortMobile>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </div>
+              </EuiTableHeaderMobile>
+              <EuiTable
+                id="random_html_id"
+                responsive={true}
+                tableLayout="auto"
+              >
+                <table
+                  className="euiTable euiTable--responsive euiTable--auto"
+                  id="random_html_id"
+                  tabIndex={-1}
+                >
+                  <EuiScreenReaderOnly>
+                    <caption
+                      className="euiScreenReaderOnly euiTableCaption"
+                    >
+                      <EuiDelayRender
+                        delay={500}
+                      />
+                    </caption>
+                  </EuiScreenReaderOnly>
+                  <EuiTableHeader>
+                    <thead>
+                      <tr>
+                        <EuiTableHeaderCell
+                          align="left"
+                          data-test-subj="tableHeaderCell_name_0"
+                          isSortAscending={true}
+                          isSorted={true}
+                          key="_data_h_name_0"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="ascending"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_name_0"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSortAscending={true}
+                                isSorted={true}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Name",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Name"
+                                      >
+                                        Name
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                  <EuiIcon
+                                    className="euiTableSortIcon"
+                                    size="m"
+                                    type="sortUp"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_average_latency_1"
+                          isSorted={false}
+                          key="_data_h_average_latency_1"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_average_latency_1"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Average latency (ms)",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Average latency (ms)"
+                                      >
+                                        Average latency (ms)
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_error_rate_2"
+                          isSorted={false}
+                          key="_data_h_error_rate_2"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_error_rate_2"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Error rate",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Error rate"
+                                      >
+                                        Error rate
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_throughput_3"
+                          isSorted={false}
+                          key="_data_h_throughput_3"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_throughput_3"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Throughput",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Throughput"
+                                      >
+                                        Throughput
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_number_of_connected_services_4"
+                          isSorted={false}
+                          key="_data_h_number_of_connected_services_4"
+                          onSort={[Function]}
+                          width="80px"
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_number_of_connected_services_4"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": "80px",
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "No. of connected services",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="No. of connected services"
+                                      >
+                                        No. of connected services
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="left"
+                          data-test-subj="tableHeaderCell_connected_services_5"
+                          isSorted={false}
+                          key="_data_h_connected_services_5"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_connected_services_5"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Connected services",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Connected services"
+                                      >
+                                        Connected services
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_traces_6"
+                          isSorted={false}
+                          key="_data_h_traces_6"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_traces_6"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Traces",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Traces"
+                                      >
+                                        Traces
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                      </tr>
+                    </thead>
+                  </EuiTableHeader>
+                  <EuiTableBody
+                    bodyRef={[Function]}
+                  >
+                    <tbody>
+                      <EuiTableRow
+                        isSelected={false}
+                      >
+                        <tr
+                          className="euiTableRow"
+                        >
+                          <EuiTableRowCell
+                            align="left"
+                            key="_data_column_name_0_0"
+                            mobileOptions={
+                              Object {
+                                "header": "Name",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Name
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--overflowingContent"
+                              >
+                                <EuiLink
+                                  className=""
+                                  data-test-subj="service-link"
+                                  key=".0"
+                                  onClick={[Function]}
+                                >
+                                  <button
+                                    className="euiLink euiLink--primary"
+                                    data-test-subj="service-link"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    database
+                                  </button>
+                                </EuiLink>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_average_latency_0_1"
+                            mobileOptions={
+                              Object {
+                                "header": "Average latency (ms)",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Average latency (ms)
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                49.54
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_error_rate_0_2"
+                            mobileOptions={
+                              Object {
+                                "header": "Error rate",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Error rate
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                <EuiText
+                                  className=""
+                                  key=".0"
+                                  size="s"
+                                >
+                                  <div
+                                    className="euiText euiText--small"
+                                  >
+                                    3.77%
+                                  </div>
+                                </EuiText>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_throughput_0_3"
+                            mobileOptions={
+                              Object {
+                                "header": "Throughput",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Throughput
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                              >
+                                <EuiI18nNumber
+                                  className=""
+                                  key=".0"
+                                  value={53}
+                                >
+                                  53
+                                </EuiI18nNumber>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_number_of_connected_services_0_4"
+                            mobileOptions={
+                              Object {
+                                "header": "No. of connected services",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            truncateText={true}
+                            width="80px"
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": "80px",
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                No. of connected services
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                              >
+                                2
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="left"
+                            key="_data_column_connected_services_0_5"
+                            mobileOptions={
+                              Object {
+                                "header": "Connected services",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Connected services
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                              >
+                                <EuiText
+                                  className=""
+                                  key=".0"
+                                  size="s"
+                                >
+                                  <div
+                                    className="euiText euiText--small"
+                                  >
+                                    order, inventory
+                                  </div>
+                                </EuiText>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_traces_0_6"
+                            mobileOptions={
+                              Object {
+                                "header": "Traces",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Traces
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                              >
+                                <EuiLink
+                                  onClick={[Function]}
+                                >
+                                  <button
+                                    className="euiLink euiLink--primary"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiI18nNumber
+                                      value={31}
+                                    >
+                                      31
+                                    </EuiI18nNumber>
+                                  </button>
+                                </EuiLink>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                        </tr>
+                      </EuiTableRow>
+                    </tbody>
+                  </EuiTableBody>
+                </table>
+              </EuiTable>
+            </div>
+            <PaginationBar
+              aria-controls="random_html_id"
+              onPageChange={[Function]}
+              onPageSizeChange={[Function]}
+              pagination={
+                Object {
+                  "hidePerPageOptions": undefined,
+                  "pageIndex": 0,
+                  "pageSize": 10,
+                  "pageSizeOptions": Array [
+                    5,
+                    10,
+                    15,
+                  ],
+                  "totalItemCount": 1,
+                }
+              }
+            >
+              <div>
+                <EuiSpacer
+                  size="m"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiTablePagination
+                  activePage={0}
+                  aria-controls="random_html_id"
+                  itemsPerPage={10}
+                  itemsPerPageOptions={
+                    Array [
+                      5,
+                      10,
+                      15,
+                    ]
+                  }
+                  onChangeItemsPerPage={[Function]}
+                  onChangePage={[Function]}
+                  pageCount={1}
+                >
+                  <EuiFlexGroup
+                    alignItems="center"
+                    justifyContent="spaceBetween"
+                    responsive={false}
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiPopover
+                            anchorPosition="upRight"
+                            button={
+                              <EuiButtonEmpty
+                                color="text"
+                                data-test-subj="tablePaginationPopoverButton"
+                                iconSide="right"
+                                iconType="arrowDown"
+                                onClick={[Function]}
+                                size="xs"
+                              >
+                                <EuiI18n
+                                  default="Rows per page"
+                                  token="euiTablePagination.rowsPerPage"
+                                />
+                                : 
+                                10
+                              </EuiButtonEmpty>
+                            }
+                            closePopover={[Function]}
+                            display="inlineBlock"
+                            hasArrow={true}
+                            isOpen={false}
+                            ownFocus={true}
+                            panelPaddingSize="none"
+                          >
+                            <div
+                              className="euiPopover euiPopover--anchorUpRight"
+                            >
+                              <div
+                                className="euiPopover__anchor"
+                              >
+                                <EuiButtonEmpty
+                                  color="text"
+                                  data-test-subj="tablePaginationPopoverButton"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  onClick={[Function]}
+                                  size="xs"
+                                >
+                                  <button
+                                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                                    data-test-subj="tablePaginationPopoverButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiButtonContent
+                                      className="euiButtonEmpty__content"
+                                      iconSide="right"
+                                      iconSize="s"
+                                      iconType="arrowDown"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButtonEmpty__text",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                      >
+                                        <EuiIcon
+                                          className="euiButtonContent__icon"
+                                          color="inherit"
+                                          size="s"
+                                          type="arrowDown"
+                                        >
+                                          <EuiIconEmpty
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                            focusable="false"
+                                            role="img"
+                                            style={null}
+                                          >
+                                            <svg
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                              focusable="false"
+                                              height={16}
+                                              role="img"
+                                              style={null}
+                                              viewBox="0 0 16 16"
+                                              width={16}
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            />
+                                          </EuiIconEmpty>
+                                        </EuiIcon>
+                                        <span
+                                          className="euiButtonEmpty__text"
+                                        >
+                                          <EuiI18n
+                                            default="Rows per page"
+                                            token="euiTablePagination.rowsPerPage"
+                                          >
+                                            Rows per page
+                                          </EuiI18n>
+                                          : 
+                                          10
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonEmpty>
+                              </div>
+                            </div>
+                          </EuiPopover>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiPagination
+                            activePage={0}
+                            aria-controls="random_html_id"
+                            onPageClick={[Function]}
+                            pageCount={1}
+                          >
+                            <nav
+                              className="euiPagination"
+                            >
+                              <EuiI18n
+                                default="Previous page, {page}"
+                                token="euiPagination.previousPage"
+                                values={
+                                  Object {
+                                    "page": 0,
+                                  }
+                                }
+                              >
+                                <EuiI18n
+                                  default="Previous page"
+                                  token="euiPagination.disabledPreviousPage"
+                                >
+                                  <EuiButtonIcon
+                                    aria-label="Previous page"
+                                    color="text"
+                                    data-test-subj="pagination-button-previous"
+                                    disabled={true}
+                                    iconType="arrowLeft"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      aria-label="Previous page"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="pagination-button-previous"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="arrowLeft"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                              </EuiI18n>
+                              <ul
+                                className="euiPagination__list"
+                              >
+                                <PaginationButton
+                                  key="0"
+                                  pageIndex={0}
+                                >
+                                  <li
+                                    className="euiPagination__item"
+                                  >
+                                    <EuiPaginationButton
+                                      aria-controls="random_html_id"
+                                      hideOnMobile={true}
+                                      isActive={true}
+                                      onClick={[Function]}
+                                      pageIndex={0}
+                                      totalPages={1}
+                                    >
+                                      <EuiI18n
+                                        default="Page {page} of {totalPages}"
+                                        token="euiPaginationButton.longPageString"
+                                        values={
+                                          Object {
+                                            "page": 1,
+                                            "totalPages": 1,
+                                          }
+                                        }
+                                      >
+                                        <EuiI18n
+                                          default="Page {page}"
+                                          token="euiPaginationButton.shortPageString"
+                                          values={
+                                            Object {
+                                              "page": 1,
+                                            }
+                                          }
+                                        >
+                                          <EuiButtonEmpty
+                                            aria-controls="random_html_id"
+                                            aria-current={true}
+                                            aria-label="Page 1 of 1"
+                                            className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                            color="text"
+                                            data-test-subj="pagination-button-0"
+                                            href="#random_html_id"
+                                            isDisabled={true}
+                                            onClick={[Function]}
+                                            size="s"
+                                          >
+                                            <button
+                                              aria-controls="random_html_id"
+                                              aria-current={true}
+                                              aria-label="Page 1 of 1"
+                                              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                              data-test-subj="pagination-button-0"
+                                              disabled={true}
+                                              onClick={[Function]}
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButtonEmpty__content"
+                                                iconSide="left"
+                                                iconSize="m"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButtonEmpty__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButtonEmpty__content"
+                                                >
+                                                  <span
+                                                    className="euiButtonEmpty__text"
+                                                  >
+                                                    1
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonEmpty>
+                                        </EuiI18n>
+                                      </EuiI18n>
+                                    </EuiPaginationButton>
+                                  </li>
+                                </PaginationButton>
+                              </ul>
+                              <EuiI18n
+                                default="Next page, {page}"
+                                token="euiPagination.nextPage"
+                                values={
+                                  Object {
+                                    "page": 2,
+                                  }
+                                }
+                              >
+                                <EuiI18n
+                                  default="Next page"
+                                  token="euiPagination.disabledNextPage"
+                                >
+                                  <EuiButtonIcon
+                                    aria-label="Next page"
+                                    color="text"
+                                    data-test-subj="pagination-button-next"
+                                    disabled={true}
+                                    iconType="arrowRight"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      aria-label="Next page"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="pagination-button-next"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="arrowRight"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                              </EuiI18n>
+                            </nav>
+                          </EuiPagination>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </EuiTablePagination>
+              </div>
+            </PaginationBar>
+          </div>
+        </EuiBasicTable>
+      </EuiInMemoryTable>
+    </div>
+  </EuiPanel>
+</ServicesTable>
+`;
diff --git a/public/components/trace_analytics/components/services/services_table.tsx b/public/components/trace_analytics/components/services/services_table.tsx
new file mode 100644
index 0000000000..4ffe85107c
--- /dev/null
+++ b/public/components/trace_analytics/components/services/services_table.tsx
@@ -0,0 +1,200 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiI18nNumber,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiTableFieldDataColumnType,
+  EuiText,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useMemo } from 'react';
+import { TraceAnalyticsMode } from '../../home';
+import { FilterType } from '../common/filters/filters';
+import {
+  MissingConfigurationMessage,
+  NoMatchMessage,
+  PanelTitle,
+} from '../common/helper_functions';
+
+interface ServicesTableProps {
+  items: any[];
+  loading: boolean;
+  nameColumnAction: (item: any) => any;
+  traceColumnAction: any;
+  addFilter: (filter: FilterType) => void;
+  setRedirect: (redirect: boolean) => void;
+  mode: TraceAnalyticsMode;
+  jaegerIndicesExist: boolean;
+  dataPrepperIndicesExist: boolean;
+}
+
+export function ServicesTable(props: ServicesTableProps) {
+  const {
+    items,
+    mode,
+    loading,
+    nameColumnAction,
+    traceColumnAction,
+    addFilter,
+    setRedirect,
+    jaegerIndicesExist,
+    dataPrepperIndicesExist,
+  } = props;
+  const renderTitleBar = (totalItems?: number) => {
+    return (
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem grow={10}>
+          <PanelTitle title="Services" totalItems={totalItems} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  const columns = useMemo(
+    () =>
+      [
+        {
+          field: 'name',
+          name: 'Name',
+          align: 'left',
+          sortable: true,
+          render: (item: any) => (
+            <EuiLink data-test-subj="service-link" onClick={() => nameColumnAction(item)}>
+              {item.length < 24 ? item : <div title={item}>{_.truncate(item, { length: 24 })}</div>}
+            </EuiLink>
+          ),
+        },
+        {
+          field: 'average_latency',
+          name: 'Average latency (ms)',
+          align: 'right',
+          sortable: true,
+          render: (item: any) => (item === 0 || item ? _.round(item, 2) : '-'),
+        },
+        {
+          field: 'error_rate',
+          name: 'Error rate',
+          align: 'right',
+          sortable: true,
+          render: (item) =>
+            item === 0 || item ? <EuiText size="s">{`${_.round(item, 2)}%`}</EuiText> : '-',
+        },
+        {
+          field: 'throughput',
+          name: 'Throughput',
+          align: 'right',
+          sortable: true,
+          truncateText: true,
+          render: (item: any) => (item === 0 || item ? <EuiI18nNumber value={item} /> : '-'),
+        },
+        ...(mode === 'data_prepper'
+          ? [
+              {
+                field: 'number_of_connected_services',
+                name: 'No. of connected services',
+                align: 'right',
+                sortable: true,
+                truncateText: true,
+                width: '80px',
+                render: (item: any) => (item === 0 || item ? item : '-'),
+              },
+            ]
+          : []),
+        ...(mode === 'data_prepper'
+          ? [
+              {
+                field: 'connected_services',
+                name: 'Connected services',
+                align: 'left',
+                sortable: true,
+                truncateText: true,
+                render: (item: any) =>
+                  item ? (
+                    <EuiText size="s">{_.truncate(item.join(', '), { length: 50 })}</EuiText>
+                  ) : (
+                    '-'
+                  ),
+              },
+            ]
+          : []),
+        {
+          field: 'traces',
+          name: 'Traces',
+          align: 'right',
+          sortable: true,
+          truncateText: true,
+          render: (item: any, row: any) => (
+            <>
+              {item === 0 || item ? (
+                <EuiLink
+                  onClick={() => {
+                    setRedirect(true);
+                    addFilter({
+                      field: mode === 'jaeger' ? 'process.serviceName' : 'serviceName',
+                      operator: 'is',
+                      value: row.name,
+                      inverted: false,
+                      disabled: false,
+                    });
+                    traceColumnAction();
+                  }}
+                >
+                  <EuiI18nNumber value={item} />
+                </EuiLink>
+              ) : (
+                '-'
+              )}
+            </>
+          ),
+        },
+      ] as Array<EuiTableFieldDataColumnType<any>>,
+    [items]
+  );
+
+  const titleBar = useMemo(() => renderTitleBar(items?.length), [items]);
+
+  return (
+    <>
+      <EuiPanel>
+        {titleBar}
+        <EuiSpacer size="m" />
+        <EuiHorizontalRule margin="none" />
+        {!(
+          (mode === 'data_prepper' && dataPrepperIndicesExist) ||
+          (mode === 'jaeger' && jaegerIndicesExist)
+        ) ? (
+          <MissingConfigurationMessage mode={mode} />
+        ) : items?.length > 0 ? (
+          <EuiInMemoryTable
+            tableLayout="auto"
+            items={items}
+            columns={columns}
+            pagination={{
+              initialPageSize: 10,
+              pageSizeOptions: [5, 10, 15],
+            }}
+            sorting={{
+              sort: {
+                field: 'name',
+                direction: 'asc',
+              },
+            }}
+            loading={loading}
+          />
+        ) : (
+          <NoMatchMessage size="xl" />
+        )}
+      </EuiPanel>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap
new file mode 100644
index 0000000000..4b25a19b50
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap
@@ -0,0 +1,434 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Service breakdown panel component renders empty service breakdown panel 1`] = `
+<ServiceBreakdownPanel
+  data={Array []}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <PanelTitle
+        data-test-subj="time-spent-by-service-panel"
+        title="Time spent by service"
+      >
+        <EuiText
+          size="m"
+        >
+          <div
+            className="euiText euiText--medium"
+          >
+            <span
+              className="panel-title"
+            >
+              Time spent by service
+            </span>
+          </div>
+        </EuiText>
+      </PanelTitle>
+      <EuiHorizontalRule
+        margin="m"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+        />
+      </EuiHorizontalRule>
+      <EuiFlexGroup
+        alignItems="center"
+        direction="column"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
+        >
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            />
+          </EuiFlexItem>
+          <EuiSpacer>
+            <div
+              className="euiSpacer euiSpacer--l"
+            />
+          </EuiSpacer>
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            />
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer>
+        <div
+          className="euiSpacer euiSpacer--l"
+        />
+      </EuiSpacer>
+    </div>
+  </EuiPanel>
+</ServiceBreakdownPanel>
+`;
+
+exports[`Service breakdown panel component renders service breakdown panel 1`] = `
+<ServiceBreakdownPanel
+  data={
+    Array [
+      Object {
+        "hovertemplate": "%{label}<br>%{value:.2f}%<extra></extra>",
+        "labels": Array [
+          "inventory",
+        ],
+        "marker": Object {
+          "colors": Array [
+            "#7492e7",
+          ],
+        },
+        "textinfo": "none",
+        "type": "pie",
+        "values": Array [
+          100,
+        ],
+      },
+    ]
+  }
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <PanelTitle
+        data-test-subj="time-spent-by-service-panel"
+        title="Time spent by service"
+      >
+        <EuiText
+          size="m"
+        >
+          <div
+            className="euiText euiText--medium"
+          >
+            <span
+              className="panel-title"
+            >
+              Time spent by service
+            </span>
+          </div>
+        </EuiText>
+      </PanelTitle>
+      <EuiHorizontalRule
+        margin="m"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+        />
+      </EuiHorizontalRule>
+      <EuiFlexGroup
+        alignItems="center"
+        direction="column"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
+        >
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            >
+              <Plt
+                data={
+                  Array [
+                    Object {
+                      "hovertemplate": "%{label}<br>%{value:.2f}%<extra></extra>",
+                      "labels": Array [
+                        "inventory",
+                      ],
+                      "marker": Object {
+                        "colors": Array [
+                          "#7492e7",
+                        ],
+                      },
+                      "textinfo": "none",
+                      "type": "pie",
+                      "values": Array [
+                        100,
+                      ],
+                    },
+                  ]
+                }
+                layout={
+                  Object {
+                    "height": 200,
+                    "margin": Object {
+                      "b": 5,
+                      "l": 5,
+                      "r": 5,
+                      "t": 5,
+                    },
+                    "showlegend": false,
+                    "width": 200,
+                  }
+                }
+              >
+                <PlotlyComponent
+                  config={
+                    Object {
+                      "displayModeBar": false,
+                    }
+                  }
+                  data={
+                    Array [
+                      Object {
+                        "hovertemplate": "%{label}<br>%{value:.2f}%<extra></extra>",
+                        "labels": Array [
+                          "inventory",
+                        ],
+                        "marker": Object {
+                          "colors": Array [
+                            "#7492e7",
+                          ],
+                        },
+                        "textinfo": "none",
+                        "type": "pie",
+                        "values": Array [
+                          100,
+                        ],
+                      },
+                    ]
+                  }
+                  debug={false}
+                  divId="explorerPlotComponent"
+                  layout={
+                    Object {
+                      "autosize": true,
+                      "barmode": "stack",
+                      "height": 200,
+                      "hovermode": "closest",
+                      "legend": Object {
+                        "orientation": "h",
+                        "traceorder": "normal",
+                      },
+                      "margin": Object {
+                        "b": 5,
+                        "l": 5,
+                        "r": 5,
+                        "t": 5,
+                      },
+                      "showlegend": false,
+                      "width": 200,
+                      "xaxis": Object {
+                        "automargin": true,
+                        "rangemode": "normal",
+                        "showgrid": true,
+                        "zeroline": false,
+                      },
+                      "yaxis": Object {
+                        "rangemode": "normal",
+                        "showgrid": true,
+                        "zeroline": false,
+                      },
+                    }
+                  }
+                  style={
+                    Object {
+                      "height": "100%",
+                      "width": "100%",
+                    }
+                  }
+                  useResizeHandler={true}
+                >
+                  <div
+                    id="explorerPlotComponent"
+                    style={
+                      Object {
+                        "height": "100%",
+                        "width": "100%",
+                      }
+                    }
+                  />
+                </PlotlyComponent>
+              </Plt>
+            </div>
+          </EuiFlexItem>
+          <EuiSpacer>
+            <div
+              className="euiSpacer euiSpacer--l"
+            />
+          </EuiSpacer>
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            >
+              <EuiFlexGroup
+                responsive={false}
+                style={
+                  Object {
+                    "maxHeight": 260,
+                    "overflowY": "auto",
+                  }
+                }
+              >
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow"
+                  style={
+                    Object {
+                      "maxHeight": 260,
+                      "overflowY": "auto",
+                    }
+                  }
+                >
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
+                    >
+                      <EuiFlexGroup
+                        alignItems="flexStart"
+                        direction="column"
+                        gutterSize="m"
+                        responsive={false}
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn"
+                        >
+                          <EuiFlexItem
+                            key="label-0"
+                          >
+                            <div
+                              className="euiFlexItem"
+                            >
+                              <EuiHealth
+                                color="#7492e7"
+                              >
+                                <div
+                                  className="euiHealth euiHealth--textSizeS"
+                                >
+                                  <EuiFlexGroup
+                                    alignItems="center"
+                                    gutterSize="xs"
+                                    responsive={false}
+                                  >
+                                    <div
+                                      className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                    >
+                                      <EuiFlexItem
+                                        grow={false}
+                                      >
+                                        <div
+                                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                                        >
+                                          <EuiIcon
+                                            color="#7492e7"
+                                            type="dot"
+                                          >
+                                            <EuiIconEmpty
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium euiIcon--customColor euiIcon-isLoading"
+                                              focusable="false"
+                                              role="img"
+                                              style={
+                                                Object {
+                                                  "color": "#7492e7",
+                                                }
+                                              }
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon--customColor euiIcon-isLoading"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={
+                                                  Object {
+                                                    "color": "#7492e7",
+                                                  }
+                                                }
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              />
+                                            </EuiIconEmpty>
+                                          </EuiIcon>
+                                        </div>
+                                      </EuiFlexItem>
+                                      <EuiFlexItem
+                                        grow={false}
+                                      >
+                                        <div
+                                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                                        >
+                                          <div
+                                            style={
+                                              Object {
+                                                "whiteSpace": "nowrap",
+                                              }
+                                            }
+                                          >
+                                            inventory
+                                          </div>
+                                        </div>
+                                      </EuiFlexItem>
+                                    </div>
+                                  </EuiFlexGroup>
+                                </div>
+                              </EuiHealth>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </div>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
+                    >
+                      <EuiFlexGroup
+                        alignItems="flexEnd"
+                        direction="column"
+                        gutterSize="m"
+                        responsive={false}
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionColumn"
+                        >
+                          <EuiFlexItem
+                            key="value-0"
+                          >
+                            <div
+                              className="euiFlexItem"
+                            >
+                              <EuiText
+                                size="s"
+                              >
+                                <div
+                                  className="euiText euiText--small"
+                                >
+                                  100
+                                  %
+                                </div>
+                              </EuiText>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </div>
+                  </EuiFlexItem>
+                </div>
+              </EuiFlexGroup>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer>
+        <div
+          className="euiSpacer euiSpacer--l"
+        />
+      </EuiSpacer>
+    </div>
+  </EuiPanel>
+</ServiceBreakdownPanel>
+`;
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_panel.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_panel.test.tsx.snap
new file mode 100644
index 0000000000..9c05f6040d
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_panel.test.tsx.snap
@@ -0,0 +1,522 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Service breakdown panel component renders service breakdown panel 1`] = `
+<SpanDetailPanel
+  data={
+    Object {
+      "gantt": Array [
+        Object {
+          "hoverinfo": "none",
+          "marker": Object {
+            "color": "rgba(0, 0, 0, 0)",
+          },
+          "orientation": "h",
+          "showlegend": false,
+          "type": "bar",
+          "width": 0.4,
+          "x": Array [
+            0,
+          ],
+          "y": Array [
+            "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+          ],
+        },
+        Object {
+          "hovertemplate": "%{x}<extra></extra>",
+          "marker": Object {
+            "color": "#7492e7",
+          },
+          "orientation": "h",
+          "text": Array [
+            "Error",
+          ],
+          "textfont": Object {
+            "color": Array [
+              "#c14125",
+            ],
+          },
+          "textposition": "outside",
+          "type": "bar",
+          "width": 0.4,
+          "x": Array [
+            19.91,
+          ],
+          "y": Array [
+            "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+          ],
+        },
+      ],
+      "ganttMaxX": 19.91,
+      "table": Array [
+        Object {
+          "end_time": "2020-11-10T17:55:45.239564396Z",
+          "error": "Error",
+          "latency": 19.91,
+          "service_name": "inventory",
+          "span_id": "32c641131b569afa",
+          "start_time": "2020-11-10T17:55:45.219652629Z",
+          "vs_benchmark": 0,
+        },
+      ],
+    }
+  }
+  mode="data_prepper"
+  setData={[MockFunction]}
+>
+  <EuiPanel
+    data-test-subj="span-gantt-chart-panel"
+  >
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+      data-test-subj="span-gantt-chart-panel"
+    >
+      <EuiFlexGroup>
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            >
+              <PanelTitle
+                title="Spans"
+                totalItems={1}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Spans
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (1)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButtonGroup
+                idSelected="timeline"
+                legend="Select view of spans"
+                onChange={[Function]}
+                options={
+                  Array [
+                    Object {
+                      "id": "timeline",
+                      "label": "Timeline",
+                    },
+                    Object {
+                      "id": "span_list",
+                      "label": "Span list",
+                    },
+                  ]
+                }
+              >
+                <fieldset
+                  className="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                  disabled={false}
+                >
+                  <EuiScreenReaderOnly>
+                    <legend
+                      className="euiScreenReaderOnly"
+                    >
+                      Select view of spans
+                    </legend>
+                  </EuiScreenReaderOnly>
+                  <div
+                    className="euiButtonGroup__buttons"
+                  >
+                    <EuiButtonGroupButton
+                      color="text"
+                      element="label"
+                      id="timeline"
+                      isDisabled={false}
+                      isIconOnly={false}
+                      isSelected={true}
+                      key="0"
+                      label="Timeline"
+                      name="random_html_id"
+                      onChange={[Function]}
+                      size="s"
+                    >
+                      <EuiButtonDisplay
+                        baseClassName="euiButtonGroupButton"
+                        className="euiButtonGroupButton-isSelected"
+                        color="text"
+                        element="label"
+                        fill={true}
+                        htmlFor="random_html_id"
+                        isDisabled={false}
+                        onClick={[Function]}
+                        size="s"
+                        textProps={
+                          Object {
+                            "className": "euiButtonGroupButton__textShift",
+                            "data-text": "Timeline",
+                            "ref": [Function],
+                            "title": "Timeline",
+                          }
+                        }
+                      >
+                        <label
+                          className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                          disabled={false}
+                          htmlFor="random_html_id"
+                          onClick={[Function]}
+                          style={
+                            Object {
+                              "minWidth": undefined,
+                            }
+                          }
+                        >
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="left"
+                            textProps={
+                              Object {
+                                "className": "euiButton__text euiButtonGroupButton__textShift",
+                                "data-text": "Timeline",
+                                "ref": [Function],
+                                "title": "Timeline",
+                              }
+                            }
+                          >
+                            <span
+                              className="euiButtonContent euiButton__content"
+                            >
+                              <span
+                                className="euiButton__text euiButtonGroupButton__textShift"
+                                data-text="Timeline"
+                                title="Timeline"
+                              >
+                                <input
+                                  checked={true}
+                                  className="euiScreenReaderOnly"
+                                  data-test-subj="timeline"
+                                  disabled={false}
+                                  id="random_html_id"
+                                  name="random_html_id"
+                                  onChange={[Function]}
+                                  type="radio"
+                                />
+                                Timeline
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </label>
+                      </EuiButtonDisplay>
+                    </EuiButtonGroupButton>
+                    <EuiButtonGroupButton
+                      color="text"
+                      element="label"
+                      id="span_list"
+                      isDisabled={false}
+                      isIconOnly={false}
+                      isSelected={false}
+                      key="1"
+                      label="Span list"
+                      name="random_html_id"
+                      onChange={[Function]}
+                      size="s"
+                    >
+                      <EuiButtonDisplay
+                        baseClassName="euiButtonGroupButton"
+                        className=""
+                        color="text"
+                        element="label"
+                        fill={false}
+                        htmlFor="random_html_id"
+                        isDisabled={false}
+                        onClick={[Function]}
+                        size="s"
+                        textProps={
+                          Object {
+                            "className": "euiButtonGroupButton__textShift",
+                            "data-text": "Span list",
+                            "ref": [Function],
+                            "title": "Span list",
+                          }
+                        }
+                      >
+                        <label
+                          className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                          disabled={false}
+                          htmlFor="random_html_id"
+                          onClick={[Function]}
+                          style={
+                            Object {
+                              "minWidth": undefined,
+                            }
+                          }
+                        >
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="left"
+                            textProps={
+                              Object {
+                                "className": "euiButton__text euiButtonGroupButton__textShift",
+                                "data-text": "Span list",
+                                "ref": [Function],
+                                "title": "Span list",
+                              }
+                            }
+                          >
+                            <span
+                              className="euiButtonContent euiButton__content"
+                            >
+                              <span
+                                className="euiButton__text euiButtonGroupButton__textShift"
+                                data-text="Span list"
+                                title="Span list"
+                              >
+                                <input
+                                  checked={false}
+                                  className="euiScreenReaderOnly"
+                                  data-test-subj="span_list"
+                                  disabled={false}
+                                  id="random_html_id"
+                                  name="random_html_id"
+                                  onChange={[Function]}
+                                  type="radio"
+                                />
+                                Span list
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </label>
+                      </EuiButtonDisplay>
+                    </EuiButtonGroupButton>
+                  </div>
+                </fieldset>
+              </EuiButtonGroup>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiHorizontalRule
+        margin="m"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+        />
+      </EuiHorizontalRule>
+      <div
+        style={
+          Object {
+            "maxHeight": 500,
+            "overflowY": "auto",
+          }
+        }
+      >
+        <Plt
+          data={
+            Array [
+              Object {
+                "hoverinfo": "none",
+                "marker": Object {
+                  "color": "rgba(0, 0, 0, 0)",
+                },
+                "orientation": "h",
+                "showlegend": false,
+                "type": "bar",
+                "width": 0.4,
+                "x": Array [
+                  0,
+                ],
+                "y": Array [
+                  "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+                ],
+              },
+              Object {
+                "hovertemplate": "%{x}<extra></extra>",
+                "marker": Object {
+                  "color": "#7492e7",
+                },
+                "orientation": "h",
+                "text": Array [
+                  "Error",
+                ],
+                "textfont": Object {
+                  "color": Array [
+                    "#c14125",
+                  ],
+                },
+                "textposition": "outside",
+                "type": "bar",
+                "width": 0.4,
+                "x": Array [
+                  19.91,
+                ],
+                "y": Array [
+                  "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+                ],
+              },
+            ]
+          }
+          layout={
+            Object {
+              "height": 110,
+              "margin": Object {
+                "b": 30,
+                "l": 260,
+                "r": 5,
+                "t": 30,
+              },
+              "width": 800,
+              "xaxis": Object {
+                "color": "#91989c",
+                "range": Array [
+                  0,
+                  23.892,
+                ],
+                "showline": true,
+                "side": "top",
+                "ticksuffix": " ms",
+              },
+              "yaxis": Object {
+                "showgrid": false,
+                "ticktext": Array [
+                  "inventory <br>HTTP GET ",
+                ],
+                "tickvals": Array [
+                  "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+                ],
+              },
+            }
+          }
+          onClickHandler={[Function]}
+          onHoverHandler={[Function]}
+          onUnhoverHandler={[Function]}
+        >
+          <PlotlyComponent
+            config={
+              Object {
+                "displayModeBar": false,
+              }
+            }
+            data={
+              Array [
+                Object {
+                  "hoverinfo": "none",
+                  "marker": Object {
+                    "color": "rgba(0, 0, 0, 0)",
+                  },
+                  "orientation": "h",
+                  "showlegend": false,
+                  "type": "bar",
+                  "width": 0.4,
+                  "x": Array [
+                    0,
+                  ],
+                  "y": Array [
+                    "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+                  ],
+                },
+                Object {
+                  "hovertemplate": "%{x}<extra></extra>",
+                  "marker": Object {
+                    "color": "#7492e7",
+                  },
+                  "orientation": "h",
+                  "text": Array [
+                    "Error",
+                  ],
+                  "textfont": Object {
+                    "color": Array [
+                      "#c14125",
+                    ],
+                  },
+                  "textposition": "outside",
+                  "type": "bar",
+                  "width": 0.4,
+                  "x": Array [
+                    19.91,
+                  ],
+                  "y": Array [
+                    "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+                  ],
+                },
+              ]
+            }
+            debug={false}
+            divId="explorerPlotComponent"
+            layout={
+              Object {
+                "autosize": true,
+                "barmode": "stack",
+                "height": 110,
+                "hovermode": "closest",
+                "legend": Object {
+                  "orientation": "h",
+                  "traceorder": "normal",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 260,
+                  "r": 5,
+                  "t": 30,
+                },
+                "showlegend": false,
+                "width": 800,
+                "xaxis": Object {
+                  "color": "#91989c",
+                  "range": Array [
+                    0,
+                    23.892,
+                  ],
+                  "showline": true,
+                  "side": "top",
+                  "ticksuffix": " ms",
+                },
+                "yaxis": Object {
+                  "showgrid": false,
+                  "ticktext": Array [
+                    "inventory <br>HTTP GET ",
+                  ],
+                  "tickvals": Array [
+                    "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+                  ],
+                },
+              }
+            }
+            onClick={[Function]}
+            onHover={[Function]}
+            onUnhover={[Function]}
+            style={
+              Object {
+                "height": "100%",
+                "width": "100%",
+              }
+            }
+            useResizeHandler={true}
+          >
+            <div
+              id="explorerPlotComponent"
+              style={
+                Object {
+                  "height": "100%",
+                  "width": "100%",
+                }
+              }
+            />
+          </PlotlyComponent>
+        </Plt>
+      </div>
+    </div>
+  </EuiPanel>
+</SpanDetailPanel>
+`;
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
new file mode 100644
index 0000000000..1aeeab3f1d
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
@@ -0,0 +1,3879 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Traces component renders empty traces page 1`] = `
+<Traces
+  appConfigs={Array []}
+  childBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Trace analytics",
+      },
+      Object {
+        "href": "#/trace_analytics/traces",
+        "text": "Traces",
+      },
+    ]
+  }
+  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/traces",
+                "text": "Traces",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  dataPrepperIndicesExist={true}
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  mode="data_prepper"
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
+  page="traces"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
+  }
+  query=""
+  setEndTime={[MockFunction]}
+  setFilters={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+  traceIdColumnAction={[Function]}
+>
+  <EuiTitle
+    size="l"
+  >
+    <h2
+      className="euiTitle euiTitle--large"
+      style={
+        Object {
+          "fontWeight": 430,
+        }
+      }
+    >
+      Traces
+    </h2>
+  </EuiTitle>
+  <DataSourcePicker
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    selectedMode="data_prepper"
+  >
+    <EuiPopover
+      anchorClassName="eui-textTruncate"
+      anchorPosition="downCenter"
+      button={
+        <EuiButtonEmpty
+          className="dscIndexPattern__triggerButton"
+          color="text"
+          data-test-subj="indexPattern-switch-link"
+          flush="left"
+          iconSide="right"
+          iconType="arrowDown"
+          onClick={[Function]}
+          title="data_prepper"
+        >
+          Data Prepper
+        </EuiButtonEmpty>
+      }
+      className="eui-textTruncate"
+      closePopover={[Function]}
+      display="inlineBlock"
+      hasArrow={true}
+      isOpen={false}
+      ownFocus={true}
+      panelPaddingSize="s"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownCenter eui-textTruncate"
+      >
+        <div
+          className="euiPopover__anchor eui-textTruncate"
+        >
+          <EuiButtonEmpty
+            className="dscIndexPattern__triggerButton"
+            color="text"
+            data-test-subj="indexPattern-switch-link"
+            flush="left"
+            iconSide="right"
+            iconType="arrowDown"
+            onClick={[Function]}
+            title="data_prepper"
+          >
+            <button
+              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+              data-test-subj="indexPattern-switch-link"
+              disabled={false}
+              onClick={[Function]}
+              title="data_prepper"
+              type="button"
+            >
+              <EuiButtonContent
+                className="euiButtonEmpty__content"
+                iconSide="right"
+                iconSize="m"
+                iconType="arrowDown"
+                textProps={
+                  Object {
+                    "className": "euiButtonEmpty__text",
+                  }
+                }
+              >
+                <span
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                >
+                  <EuiIcon
+                    className="euiButtonContent__icon"
+                    color="inherit"
+                    size="m"
+                    type="arrowDown"
+                  >
+                    <EuiIconEmpty
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                      focusable="false"
+                      role="img"
+                      style={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </EuiIconEmpty>
+                  </EuiIcon>
+                  <span
+                    className="euiButtonEmpty__text"
+                  >
+                    Data Prepper
+                  </span>
+                </span>
+              </EuiButtonContent>
+            </button>
+          </EuiButtonEmpty>
+        </div>
+      </div>
+    </EuiPopover>
+  </DataSourcePicker>
+  <TracesContent
+    appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/traces",
+          "text": "Traces",
+        },
+      ]
+    }
+    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/traces",
+                  "text": "Traces",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
+    dataPrepperIndicesExist={true}
+    endTime="now"
+    filters={Array []}
+    http={[MockFunction]}
+    mode="data_prepper"
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    page="traces"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
+    query=""
+    setEndTime={[MockFunction]}
+    setFilters={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQuery={[MockFunction]}
+    setStartTime={[MockFunction]}
+    startTime="now-5m"
+    traceIdColumnAction={[Function]}
+  >
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      mode="data_prepper"
+      page="traces"
+      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"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <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=""
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <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
+                        compressed={false}
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
+                        >
+                          <EuiFormControlLayoutCustomIcon
+                            size="m"
+                            type="search"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="search"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "maxWidth": "40vw",
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              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",
+                    },
+                  ]
+                }
+                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}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <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="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                          >
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              className="euiFormControlLayout__prepend"
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            >
+                              <EuiPopover
+                                anchorClassName="euiQuickSelectPopover__anchor"
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <EuiIcon
+                                      type="calendar"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                >
+                                  <div
+                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <button
+                                        aria-label="Date quick select"
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </EuiQuickSelectPopover>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiDatePickerRange
+                                className="euiDatePickerRange--inGroup"
+                                endDateControl={<div />}
+                                iconType={false}
+                                isCustom={true}
+                                startDateControl={<div />}
+                              >
+                                <div
+                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                >
+                                  <button
+                                    className="euiSuperDatePicker__prettyFormat"
+                                    data-test-subj="superDatePickerShowDatesButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                  >
+                                    Last 5 minutes
+                                    <span
+                                      className="euiSuperDatePicker__prettyFormatLink"
+                                    >
+                                      <EuiI18n
+                                        default="Show dates"
+                                        token="euiSuperDatePicker.showDatesButtonLabel"
+                                      >
+                                        Show dates
+                                      </EuiI18n>
+                                    </span>
+                                  </button>
+                                </div>
+                              </EuiDatePickerRange>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButton
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                iconType="refresh"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-click-metric-element="trace_analytics.refresh_button"
+                    data-test-subj="superDatePickerApplyTimeButton"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
+                        >
+                          <EuiIconEmpty
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        mode="data_prepper"
+        page="traces"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "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"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <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]}
+                    data-test-subj="global-filter-button"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      data-test-subj="global-filter-button"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Change all filters"
+                          iconType="filter"
+                          onClick={[Function]}
+                          title="Change all filters"
+                        >
+                          <button
+                            aria-label="Change all filters"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            title="Change all filters"
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              size="m"
+                              type="filter"
+                            >
+                              <EuiIconEmpty
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                  focusable="false"
+                                  height={16}
+                                  role="img"
+                                  style={null}
+                                  viewBox="0 0 16 16"
+                                  width={16}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                />
+                              </EuiIconEmpty>
+                            </EuiIcon>
+                          </button>
+                        </EuiButtonIcon>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    data-test-subj="addfilter"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      data-test-subj="addfilter"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonEmpty
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
+                              >
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  + Add filter
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <TracesTable
+      dataPrepperIndicesExist={true}
+      items={Array []}
+      loading={true}
+      mode="data_prepper"
+      refresh={[Function]}
+      traceIdColumnAction={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+          >
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <EuiFlexItem
+                grow={10}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow10"
+                >
+                  <PanelTitle
+                    title="Traces"
+                    totalItems={0}
+                  >
+                    <EuiText
+                      size="m"
+                    >
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <span
+                          className="panel-title"
+                        >
+                          Traces
+                        </span>
+                        <span
+                          className="panel-title-count"
+                        >
+                           (0)
+                        </span>
+                      </div>
+                    </EuiText>
+                  </PanelTitle>
+                </div>
+              </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="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>
+              }
+            >
+              <div
+                className="euiEmptyPrompt"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    No matches
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <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="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
+          </NoMatchMessage>
+        </div>
+      </EuiPanel>
+    </TracesTable>
+  </TracesContent>
+</Traces>
+`;
+
+exports[`Traces component renders jaeger traces page 1`] = `
+<Traces
+  appConfigs={Array []}
+  childBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Trace analytics",
+      },
+      Object {
+        "href": "#/trace_analytics/traces",
+        "text": "Traces",
+      },
+    ]
+  }
+  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/traces",
+                "text": "Traces",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  dataPrepperIndicesExist={false}
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  jaegerIndicesExist={true}
+  mode="jaeger"
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
+  page="traces"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
+  }
+  query=""
+  setEndTime={[MockFunction]}
+  setFilters={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+  traceIdColumnAction={[Function]}
+>
+  <EuiTitle
+    size="l"
+  >
+    <h2
+      className="euiTitle euiTitle--large"
+      style={
+        Object {
+          "fontWeight": 430,
+        }
+      }
+    >
+      Traces
+    </h2>
+  </EuiTitle>
+  <DataSourcePicker
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    selectedMode="jaeger"
+  >
+    <EuiPopover
+      anchorClassName="eui-textTruncate"
+      anchorPosition="downCenter"
+      button={
+        <EuiButtonEmpty
+          className="dscIndexPattern__triggerButton"
+          color="text"
+          data-test-subj="indexPattern-switch-link"
+          flush="left"
+          iconSide="right"
+          iconType="arrowDown"
+          onClick={[Function]}
+          title="jaeger"
+        >
+          Jaeger
+        </EuiButtonEmpty>
+      }
+      className="eui-textTruncate"
+      closePopover={[Function]}
+      display="inlineBlock"
+      hasArrow={true}
+      isOpen={false}
+      ownFocus={true}
+      panelPaddingSize="s"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownCenter eui-textTruncate"
+      >
+        <div
+          className="euiPopover__anchor eui-textTruncate"
+        >
+          <EuiButtonEmpty
+            className="dscIndexPattern__triggerButton"
+            color="text"
+            data-test-subj="indexPattern-switch-link"
+            flush="left"
+            iconSide="right"
+            iconType="arrowDown"
+            onClick={[Function]}
+            title="jaeger"
+          >
+            <button
+              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+              data-test-subj="indexPattern-switch-link"
+              disabled={false}
+              onClick={[Function]}
+              title="jaeger"
+              type="button"
+            >
+              <EuiButtonContent
+                className="euiButtonEmpty__content"
+                iconSide="right"
+                iconSize="m"
+                iconType="arrowDown"
+                textProps={
+                  Object {
+                    "className": "euiButtonEmpty__text",
+                  }
+                }
+              >
+                <span
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                >
+                  <EuiIcon
+                    className="euiButtonContent__icon"
+                    color="inherit"
+                    size="m"
+                    type="arrowDown"
+                  >
+                    <EuiIconArrowDown
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                      focusable="false"
+                      role="img"
+                      style={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                          fillRule="non-zero"
+                        />
+                      </svg>
+                    </EuiIconArrowDown>
+                  </EuiIcon>
+                  <span
+                    className="euiButtonEmpty__text"
+                  >
+                    Jaeger
+                  </span>
+                </span>
+              </EuiButtonContent>
+            </button>
+          </EuiButtonEmpty>
+        </div>
+      </div>
+    </EuiPopover>
+  </DataSourcePicker>
+  <TracesContent
+    appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/traces",
+          "text": "Traces",
+        },
+      ]
+    }
+    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/traces",
+                  "text": "Traces",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
+    dataPrepperIndicesExist={false}
+    endTime="now"
+    filters={Array []}
+    http={[MockFunction]}
+    jaegerIndicesExist={true}
+    mode="jaeger"
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    page="traces"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
+    query=""
+    setEndTime={[MockFunction]}
+    setFilters={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQuery={[MockFunction]}
+    setStartTime={[MockFunction]}
+    startTime="now-5m"
+    traceIdColumnAction={[Function]}
+  >
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      mode="jaeger"
+      page="traces"
+      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"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <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=""
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <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
+                        compressed={false}
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
+                        >
+                          <EuiFormControlLayoutCustomIcon
+                            size="m"
+                            type="search"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="search"
+                              >
+                                <EuiIconSearch
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                    />
+                                  </svg>
+                                </EuiIconSearch>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "maxWidth": "40vw",
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              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",
+                    },
+                  ]
+                }
+                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}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <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="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                          >
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              className="euiFormControlLayout__prepend"
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            >
+                              <EuiPopover
+                                anchorClassName="euiQuickSelectPopover__anchor"
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <EuiIcon
+                                      type="calendar"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                >
+                                  <div
+                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <button
+                                        aria-label="Date quick select"
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconArrowDown
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                    fillRule="non-zero"
+                                                  />
+                                                </svg>
+                                              </EuiIconArrowDown>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              >
+                                                <EuiIconCalendar
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                      fillRule="evenodd"
+                                                    />
+                                                  </svg>
+                                                </EuiIconCalendar>
+                                              </EuiIcon>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </EuiQuickSelectPopover>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiDatePickerRange
+                                className="euiDatePickerRange--inGroup"
+                                endDateControl={<div />}
+                                iconType={false}
+                                isCustom={true}
+                                startDateControl={<div />}
+                              >
+                                <div
+                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                >
+                                  <button
+                                    className="euiSuperDatePicker__prettyFormat"
+                                    data-test-subj="superDatePickerShowDatesButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                  >
+                                    Last 5 minutes
+                                    <span
+                                      className="euiSuperDatePicker__prettyFormatLink"
+                                    >
+                                      <EuiI18n
+                                        default="Show dates"
+                                        token="euiSuperDatePicker.showDatesButtonLabel"
+                                      >
+                                        Show dates
+                                      </EuiI18n>
+                                    </span>
+                                  </button>
+                                </div>
+                              </EuiDatePickerRange>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButton
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                iconType="refresh"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-click-metric-element="trace_analytics.refresh_button"
+                    data-test-subj="superDatePickerApplyTimeButton"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
+                        >
+                          <EuiIconRefresh
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M11.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
+                              />
+                            </svg>
+                          </EuiIconRefresh>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        mode="jaeger"
+        page="traces"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "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"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <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]}
+                    data-test-subj="global-filter-button"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      data-test-subj="global-filter-button"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Change all filters"
+                          iconType="filter"
+                          onClick={[Function]}
+                          title="Change all filters"
+                        >
+                          <button
+                            aria-label="Change all filters"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            title="Change all filters"
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              size="m"
+                              type="filter"
+                            >
+                              <EuiIconFilter
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit 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>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    data-test-subj="addfilter"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      data-test-subj="addfilter"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonEmpty
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
+                              >
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  + Add filter
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <TracesTable
+      dataPrepperIndicesExist={false}
+      items={Array []}
+      jaegerIndicesExist={true}
+      loading={true}
+      mode="jaeger"
+      refresh={[Function]}
+      traceIdColumnAction={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+          >
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <EuiFlexItem
+                grow={10}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow10"
+                >
+                  <PanelTitle
+                    title="Traces"
+                    totalItems={0}
+                  >
+                    <EuiText
+                      size="m"
+                    >
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <span
+                          className="panel-title"
+                        >
+                          Traces
+                        </span>
+                        <span
+                          className="panel-title-count"
+                        >
+                           (0)
+                        </span>
+                      </div>
+                    </EuiText>
+                  </PanelTitle>
+                </div>
+              </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="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>
+              }
+            >
+              <div
+                className="euiEmptyPrompt"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    No matches
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <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="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
+          </NoMatchMessage>
+        </div>
+      </EuiPanel>
+    </TracesTable>
+  </TracesContent>
+</Traces>
+`;
+
+exports[`Traces component renders traces page 1`] = `
+<Traces
+  appConfigs={Array []}
+  childBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Trace analytics",
+      },
+      Object {
+        "href": "#/trace_analytics/traces",
+        "text": "Traces",
+      },
+    ]
+  }
+  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/traces",
+                "text": "Traces",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  dataPrepperIndicesExist={true}
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  mode="data_prepper"
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
+  page="traces"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
+  }
+  query=""
+  setEndTime={[MockFunction]}
+  setFilters={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+  traceIdColumnAction={[Function]}
+>
+  <EuiTitle
+    size="l"
+  >
+    <h2
+      className="euiTitle euiTitle--large"
+      style={
+        Object {
+          "fontWeight": 430,
+        }
+      }
+    >
+      Traces
+    </h2>
+  </EuiTitle>
+  <DataSourcePicker
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    selectedMode="data_prepper"
+  >
+    <EuiPopover
+      anchorClassName="eui-textTruncate"
+      anchorPosition="downCenter"
+      button={
+        <EuiButtonEmpty
+          className="dscIndexPattern__triggerButton"
+          color="text"
+          data-test-subj="indexPattern-switch-link"
+          flush="left"
+          iconSide="right"
+          iconType="arrowDown"
+          onClick={[Function]}
+          title="data_prepper"
+        >
+          Data Prepper
+        </EuiButtonEmpty>
+      }
+      className="eui-textTruncate"
+      closePopover={[Function]}
+      display="inlineBlock"
+      hasArrow={true}
+      isOpen={false}
+      ownFocus={true}
+      panelPaddingSize="s"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownCenter eui-textTruncate"
+      >
+        <div
+          className="euiPopover__anchor eui-textTruncate"
+        >
+          <EuiButtonEmpty
+            className="dscIndexPattern__triggerButton"
+            color="text"
+            data-test-subj="indexPattern-switch-link"
+            flush="left"
+            iconSide="right"
+            iconType="arrowDown"
+            onClick={[Function]}
+            title="data_prepper"
+          >
+            <button
+              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+              data-test-subj="indexPattern-switch-link"
+              disabled={false}
+              onClick={[Function]}
+              title="data_prepper"
+              type="button"
+            >
+              <EuiButtonContent
+                className="euiButtonEmpty__content"
+                iconSide="right"
+                iconSize="m"
+                iconType="arrowDown"
+                textProps={
+                  Object {
+                    "className": "euiButtonEmpty__text",
+                  }
+                }
+              >
+                <span
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                >
+                  <EuiIcon
+                    className="euiButtonContent__icon"
+                    color="inherit"
+                    size="m"
+                    type="arrowDown"
+                  >
+                    <EuiIconArrowDown
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                      focusable="false"
+                      role="img"
+                      style={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                          fillRule="non-zero"
+                        />
+                      </svg>
+                    </EuiIconArrowDown>
+                  </EuiIcon>
+                  <span
+                    className="euiButtonEmpty__text"
+                  >
+                    Data Prepper
+                  </span>
+                </span>
+              </EuiButtonContent>
+            </button>
+          </EuiButtonEmpty>
+        </div>
+      </div>
+    </EuiPopover>
+  </DataSourcePicker>
+  <TracesContent
+    appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/traces",
+          "text": "Traces",
+        },
+      ]
+    }
+    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/traces",
+                  "text": "Traces",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
+    dataPrepperIndicesExist={true}
+    endTime="now"
+    filters={Array []}
+    http={[MockFunction]}
+    mode="data_prepper"
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
+    page="traces"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
+    query=""
+    setEndTime={[MockFunction]}
+    setFilters={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQuery={[MockFunction]}
+    setStartTime={[MockFunction]}
+    startTime="now-5m"
+    traceIdColumnAction={[Function]}
+  >
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      mode="data_prepper"
+      page="traces"
+      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"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <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=""
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <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
+                        compressed={false}
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
+                        >
+                          <EuiFormControlLayoutCustomIcon
+                            size="m"
+                            type="search"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="search"
+                              >
+                                <EuiIconSearch
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                    />
+                                  </svg>
+                                </EuiIconSearch>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "maxWidth": "40vw",
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              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",
+                    },
+                  ]
+                }
+                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}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <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="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                          >
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              className="euiFormControlLayout__prepend"
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            >
+                              <EuiPopover
+                                anchorClassName="euiQuickSelectPopover__anchor"
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <EuiIcon
+                                      type="calendar"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                >
+                                  <div
+                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <button
+                                        aria-label="Date quick select"
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconArrowDown
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                    fillRule="non-zero"
+                                                  />
+                                                </svg>
+                                              </EuiIconArrowDown>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              >
+                                                <EuiIconCalendar
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                      fillRule="evenodd"
+                                                    />
+                                                  </svg>
+                                                </EuiIconCalendar>
+                                              </EuiIcon>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </EuiQuickSelectPopover>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiDatePickerRange
+                                className="euiDatePickerRange--inGroup"
+                                endDateControl={<div />}
+                                iconType={false}
+                                isCustom={true}
+                                startDateControl={<div />}
+                              >
+                                <div
+                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                >
+                                  <button
+                                    className="euiSuperDatePicker__prettyFormat"
+                                    data-test-subj="superDatePickerShowDatesButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                  >
+                                    Last 5 minutes
+                                    <span
+                                      className="euiSuperDatePicker__prettyFormatLink"
+                                    >
+                                      <EuiI18n
+                                        default="Show dates"
+                                        token="euiSuperDatePicker.showDatesButtonLabel"
+                                      >
+                                        Show dates
+                                      </EuiI18n>
+                                    </span>
+                                  </button>
+                                </div>
+                              </EuiDatePickerRange>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButton
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                iconType="refresh"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-click-metric-element="trace_analytics.refresh_button"
+                    data-test-subj="superDatePickerApplyTimeButton"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
+                        >
+                          <EuiIconRefresh
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M11.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
+                              />
+                            </svg>
+                          </EuiIconRefresh>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        mode="data_prepper"
+        page="traces"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "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"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <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]}
+                    data-test-subj="global-filter-button"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      data-test-subj="global-filter-button"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Change all filters"
+                          iconType="filter"
+                          onClick={[Function]}
+                          title="Change all filters"
+                        >
+                          <button
+                            aria-label="Change all filters"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            title="Change all filters"
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              size="m"
+                              type="filter"
+                            >
+                              <EuiIconFilter
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit 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>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    data-test-subj="addfilter"
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      data-test-subj="addfilter"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonEmpty
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
+                              >
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  + Add filter
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <TracesTable
+      dataPrepperIndicesExist={true}
+      items={Array []}
+      loading={true}
+      mode="data_prepper"
+      refresh={[Function]}
+      traceIdColumnAction={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+          >
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <EuiFlexItem
+                grow={10}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow10"
+                >
+                  <PanelTitle
+                    title="Traces"
+                    totalItems={0}
+                  >
+                    <EuiText
+                      size="m"
+                    >
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <span
+                          className="panel-title"
+                        >
+                          Traces
+                        </span>
+                        <span
+                          className="panel-title-count"
+                        >
+                           (0)
+                        </span>
+                      </div>
+                    </EuiText>
+                  </PanelTitle>
+                </div>
+              </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="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>
+              }
+            >
+              <div
+                className="euiEmptyPrompt"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    No matches
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <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="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
+          </NoMatchMessage>
+        </div>
+      </EuiPanel>
+    </TracesTable>
+  </TracesContent>
+</Traces>
+`;
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces_table.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces_table.test.tsx.snap
new file mode 100644
index 0000000000..ac654a6f71
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces_table.test.tsx.snap
@@ -0,0 +1,3360 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Traces table component renders empty traces table message 1`] = `
+<TracesTable
+  dataPrepperIndicesExist={false}
+  items={Array []}
+  jaegerIndicesExist={false}
+  loading={false}
+  mode="data_prepper"
+  refresh={[MockFunction]}
+  traceIdColumnAction={[Function]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={10}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow10"
+            >
+              <PanelTitle
+                title="Traces"
+                totalItems={0}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Traces
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (0)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="m"
+      >
+        <div
+          className="euiSpacer euiSpacer--m"
+        />
+      </EuiSpacer>
+      <EuiHorizontalRule
+        margin="none"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full"
+        />
+      </EuiHorizontalRule>
+      <MissingConfigurationMessage
+        mode="data_prepper"
+      >
+        <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>
+          }
+        >
+          <div
+            className="euiEmptyPrompt"
+          >
+            <EuiTitle
+              size="m"
+            >
+              <h2
+                className="euiTitle euiTitle--medium"
+              >
+                Trace Analytics not set up
+              </h2>
+            </EuiTitle>
+            <EuiTextColor
+              color="subdued"
+            >
+              <span
+                className="euiTextColor euiTextColor--subdued"
+              >
+                <EuiSpacer
+                  size="m"
+                >
+                  <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>
+            <EuiButton
+              color="primary"
+              iconSide="right"
+              iconType="popout"
+              onClick={[Function]}
+            >
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                color="primary"
+                disabled={false}
+                element="button"
+                iconSide="right"
+                iconType="popout"
+                isDisabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                <button
+                  className="euiButton euiButton--primary"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
+                  type="button"
+                >
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="right"
+                    iconType="popout"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
+                  >
+                    <span
+                      className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                    >
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        size="m"
+                        type="popout"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
+                      >
+                        Learn more
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </EuiEmptyPrompt>
+      </MissingConfigurationMessage>
+    </div>
+  </EuiPanel>
+</TracesTable>
+`;
+
+exports[`Traces table component renders empty traces table message 2`] = `
+<TracesTable
+  dataPrepperIndicesExist={true}
+  items={Array []}
+  jaegerIndicesExist={false}
+  loading={false}
+  mode="data_prepper"
+  refresh={[MockFunction]}
+  traceIdColumnAction={[Function]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={10}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow10"
+            >
+              <PanelTitle
+                title="Traces"
+                totalItems={0}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Traces
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (0)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </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="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>
+          }
+        >
+          <div
+            className="euiEmptyPrompt"
+          >
+            <EuiTitle
+              size="m"
+            >
+              <h2
+                className="euiTitle euiTitle--medium"
+              >
+                No matches
+              </h2>
+            </EuiTitle>
+            <EuiTextColor
+              color="subdued"
+            >
+              <span
+                className="euiTextColor euiTextColor--subdued"
+              >
+                <EuiSpacer
+                  size="m"
+                >
+                  <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="xl"
+        >
+          <div
+            className="euiSpacer euiSpacer--xl"
+          />
+        </EuiSpacer>
+      </NoMatchMessage>
+    </div>
+  </EuiPanel>
+</TracesTable>
+`;
+
+exports[`Traces table component renders jaeger traces table 1`] = `
+<TracesTable
+  dataPrepperIndicesExist={false}
+  items={
+    Array [
+      Object {
+        "actions": "#",
+        "error_count": "Yes",
+        "last_updated": "11/10/2020 09:55:45",
+        "latency": 19.91,
+        "trace_group": "HTTP GET",
+        "trace_id": "00079a615e31e61766fcb20b557051c1",
+      },
+    ]
+  }
+  jaegerIndicesExist={true}
+  loading={false}
+  mode="jaeger"
+  refresh={[MockFunction]}
+  traceIdColumnAction={[Function]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={10}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow10"
+            >
+              <PanelTitle
+                title="Traces"
+                totalItems={1}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Traces
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (1)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="m"
+      >
+        <div
+          className="euiSpacer euiSpacer--m"
+        />
+      </EuiSpacer>
+      <EuiHorizontalRule
+        margin="none"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full"
+        />
+      </EuiHorizontalRule>
+      <EuiInMemoryTable
+        columns={
+          Array [
+            Object {
+              "align": "left",
+              "field": "trace_id",
+              "name": "Trace ID",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+            },
+            Object {
+              "align": "right",
+              "field": "latency",
+              "name": "Latency (ms)",
+              "sortable": true,
+              "truncateText": true,
+            },
+            Object {
+              "align": "right",
+              "field": "error_count",
+              "name": "Errors",
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "left",
+              "field": "last_updated",
+              "name": "Last updated",
+              "render": [Function],
+              "sortable": true,
+            },
+          ]
+        }
+        items={
+          Array [
+            Object {
+              "actions": "#",
+              "error_count": "Yes",
+              "last_updated": "11/10/2020 09:55:45",
+              "latency": 19.91,
+              "trace_group": "HTTP GET",
+              "trace_id": "00079a615e31e61766fcb20b557051c1",
+            },
+          ]
+        }
+        loading={false}
+        onTableChange={[Function]}
+        pagination={
+          Object {
+            "initialPageSize": 10,
+            "pageSizeOptions": Array [
+              5,
+              10,
+              15,
+            ],
+          }
+        }
+        responsive={true}
+        sorting={
+          Object {
+            "sort": Object {
+              "direction": "asc",
+              "field": "trace_id",
+            },
+          }
+        }
+        tableLayout="auto"
+      >
+        <EuiBasicTable
+          columns={
+            Array [
+              Object {
+                "align": "left",
+                "field": "trace_id",
+                "name": "Trace ID",
+                "render": [Function],
+                "sortable": true,
+                "truncateText": true,
+              },
+              Object {
+                "align": "right",
+                "field": "latency",
+                "name": "Latency (ms)",
+                "sortable": true,
+                "truncateText": true,
+              },
+              Object {
+                "align": "right",
+                "field": "error_count",
+                "name": "Errors",
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "left",
+                "field": "last_updated",
+                "name": "Last updated",
+                "render": [Function],
+                "sortable": true,
+              },
+            ]
+          }
+          items={
+            Array [
+              Object {
+                "actions": "#",
+                "error_count": "Yes",
+                "last_updated": "11/10/2020 09:55:45",
+                "latency": 19.91,
+                "trace_group": "HTTP GET",
+                "trace_id": "00079a615e31e61766fcb20b557051c1",
+              },
+            ]
+          }
+          loading={false}
+          noItemsMessage="No items found"
+          onChange={[Function]}
+          pagination={
+            Object {
+              "hidePerPageOptions": undefined,
+              "pageIndex": 0,
+              "pageSize": 10,
+              "pageSizeOptions": Array [
+                5,
+                10,
+                15,
+              ],
+              "totalItemCount": 1,
+            }
+          }
+          responsive={true}
+          sorting={
+            Object {
+              "allowNeutralSort": true,
+              "sort": Object {
+                "direction": "asc",
+                "field": "Trace ID",
+              },
+            }
+          }
+          tableLayout="auto"
+        >
+          <div
+            className="euiBasicTable"
+          >
+            <div>
+              <EuiTableHeaderMobile>
+                <div
+                  className="euiTableHeaderMobile"
+                >
+                  <EuiFlexGroup
+                    alignItems="baseline"
+                    justifyContent="spaceBetween"
+                    responsive={false}
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        />
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiTableSortMobile
+                            items={
+                              Array [
+                                Object {
+                                  "isSortAscending": true,
+                                  "isSorted": true,
+                                  "key": "_data_s_trace_id_0",
+                                  "name": "Trace ID",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_latency_1",
+                                  "name": "Latency (ms)",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_error_count_2",
+                                  "name": "Errors",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_last_updated_3",
+                                  "name": "Last updated",
+                                  "onSort": [Function],
+                                },
+                              ]
+                            }
+                          >
+                            <div
+                              className="euiTableSortMobile"
+                            >
+                              <EuiPopover
+                                anchorPosition="downRight"
+                                button={
+                                  <EuiButtonEmpty
+                                    flush="right"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                    size="xs"
+                                  >
+                                    <EuiI18n
+                                      default="Sorting"
+                                      token="euiTableSortMobile.sorting"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="none"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownRight"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      flush="right"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      onClick={[Function]}
+                                      size="xs"
+                                    >
+                                      <button
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconArrowDown
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                    fillRule="non-zero"
+                                                  />
+                                                </svg>
+                                              </EuiIconArrowDown>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text"
+                                            >
+                                              <EuiI18n
+                                                default="Sorting"
+                                                token="euiTableSortMobile.sorting"
+                                              >
+                                                Sorting
+                                              </EuiI18n>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </div>
+                          </EuiTableSortMobile>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </div>
+              </EuiTableHeaderMobile>
+              <EuiTable
+                id="random_html_id"
+                responsive={true}
+                tableLayout="auto"
+              >
+                <table
+                  className="euiTable euiTable--responsive euiTable--auto"
+                  id="random_html_id"
+                  tabIndex={-1}
+                >
+                  <EuiScreenReaderOnly>
+                    <caption
+                      className="euiScreenReaderOnly euiTableCaption"
+                    >
+                      <EuiDelayRender
+                        delay={500}
+                      />
+                    </caption>
+                  </EuiScreenReaderOnly>
+                  <EuiTableHeader>
+                    <thead>
+                      <tr>
+                        <EuiTableHeaderCell
+                          align="left"
+                          data-test-subj="tableHeaderCell_trace_id_0"
+                          isSortAscending={true}
+                          isSorted={true}
+                          key="_data_h_trace_id_0"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="ascending"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_trace_id_0"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSortAscending={true}
+                                isSorted={true}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Trace ID",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Trace ID"
+                                      >
+                                        Trace ID
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                  <EuiIcon
+                                    className="euiTableSortIcon"
+                                    size="m"
+                                    type="sortUp"
+                                  >
+                                    <EuiIconSortUp
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiTableSortIcon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiTableSortIcon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M8 4.207v8.237c0 .307-.224.556-.5.556s-.5-.249-.5-.556V4.207L2.904 8.303a.5.5 0 01-.707-.707l4.242-4.242a1.5 1.5 0 012.122 0l4.242 4.242a.5.5 0 11-.707.707L8 4.207z"
+                                        />
+                                      </svg>
+                                    </EuiIconSortUp>
+                                  </EuiIcon>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_latency_1"
+                          isSorted={false}
+                          key="_data_h_latency_1"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_latency_1"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Latency (ms)",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Latency (ms)"
+                                      >
+                                        Latency (ms)
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_error_count_2"
+                          isSorted={false}
+                          key="_data_h_error_count_2"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_error_count_2"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Errors",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Errors"
+                                      >
+                                        Errors
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="left"
+                          data-test-subj="tableHeaderCell_last_updated_3"
+                          isSorted={false}
+                          key="_data_h_last_updated_3"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_last_updated_3"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Last updated",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Last updated"
+                                      >
+                                        Last updated
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                      </tr>
+                    </thead>
+                  </EuiTableHeader>
+                  <EuiTableBody
+                    bodyRef={[Function]}
+                  >
+                    <tbody>
+                      <EuiTableRow
+                        isSelected={false}
+                      >
+                        <tr
+                          className="euiTableRow"
+                        >
+                          <EuiTableRowCell
+                            align="left"
+                            key="_data_column_trace_id_0_0"
+                            mobileOptions={
+                              Object {
+                                "header": "Trace ID",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Trace ID
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                              >
+                                <EuiFlexGroup
+                                  alignItems="center"
+                                  className=""
+                                  gutterSize="s"
+                                  key=".0"
+                                >
+                                  <div
+                                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                  >
+                                    <EuiFlexItem
+                                      grow={10}
+                                    >
+                                      <div
+                                        className="euiFlexItem euiFlexItem--flexGrow10"
+                                      >
+                                        <EuiLink
+                                          onClick={[Function]}
+                                        >
+                                          <button
+                                            className="euiLink euiLink--primary"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <div
+                                              title="00079a615e31e61766fcb20b557051c1"
+                                            >
+                                              00079a615e31e61766fcb...
+                                            </div>
+                                          </button>
+                                        </EuiLink>
+                                      </div>
+                                    </EuiFlexItem>
+                                    <EuiFlexItem
+                                      grow={false}
+                                    >
+                                      <div
+                                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                                      >
+                                        <EuiCopy
+                                          afterMessage="Copied"
+                                          textToCopy="00079a615e31e61766fcb20b557051c1"
+                                        >
+                                          <EuiToolTip
+                                            delay="regular"
+                                            onMouseOut={[Function]}
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Copy trace id"
+                                                iconType="copyClipboard"
+                                                onBlur={[Function]}
+                                                onClick={[Function]}
+                                                onFocus={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Copy trace id"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                  disabled={false}
+                                                  onBlur={[Function]}
+                                                  onClick={[Function]}
+                                                  onFocus={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="copyClipboard"
+                                                  >
+                                                    <EuiIconCopyClipboard
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit 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="M0 2.729V2a1 1 0 011-1h2v1H1v12h4v1H1a1 1 0 01-1-1V2.729zM12 5V2a1 1 0 00-1-1H9v1h2v3h1zm-1 1h2v9H6V6h5V5H6a1 1 0 00-1 1v9a1 1 0 001 1h7a1 1 0 001-1V6a1 1 0 00-1-1h-2v1z"
+                                                        />
+                                                        <path
+                                                          d="M7 10h5V9H7zM7 8h5V7H7zM7 12h5v-1H7zM7 14h5v-1H7zM9 2V1a1 1 0 00-1-1H4a1 1 0 00-1 1v1h1V1h4v1h1zM3 3h6V2H3z"
+                                                        />
+                                                      </svg>
+                                                    </EuiIconCopyClipboard>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </EuiCopy>
+                                      </div>
+                                    </EuiFlexItem>
+                                    <EuiFlexItem
+                                      grow={3}
+                                    >
+                                      <div
+                                        className="euiFlexItem euiFlexItem--flexGrow3"
+                                      />
+                                    </EuiFlexItem>
+                                  </div>
+                                </EuiFlexGroup>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_latency_0_1"
+                            mobileOptions={
+                              Object {
+                                "header": "Latency (ms)",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={true}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Latency (ms)
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText"
+                              >
+                                <span
+                                  className="euiTableCellContent__text"
+                                >
+                                  19.91
+                                </span>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_error_count_0_2"
+                            mobileOptions={
+                              Object {
+                                "header": "Errors",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Errors
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                No
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="left"
+                            key="_data_column_last_updated_0_3"
+                            mobileOptions={
+                              Object {
+                                "header": "Last updated",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Last updated
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--overflowingContent"
+                              >
+                                11/10/2020 09:55:45
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                        </tr>
+                      </EuiTableRow>
+                    </tbody>
+                  </EuiTableBody>
+                </table>
+              </EuiTable>
+            </div>
+            <PaginationBar
+              aria-controls="random_html_id"
+              onPageChange={[Function]}
+              onPageSizeChange={[Function]}
+              pagination={
+                Object {
+                  "hidePerPageOptions": undefined,
+                  "pageIndex": 0,
+                  "pageSize": 10,
+                  "pageSizeOptions": Array [
+                    5,
+                    10,
+                    15,
+                  ],
+                  "totalItemCount": 1,
+                }
+              }
+            >
+              <div>
+                <EuiSpacer
+                  size="m"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiTablePagination
+                  activePage={0}
+                  aria-controls="random_html_id"
+                  itemsPerPage={10}
+                  itemsPerPageOptions={
+                    Array [
+                      5,
+                      10,
+                      15,
+                    ]
+                  }
+                  onChangeItemsPerPage={[Function]}
+                  onChangePage={[Function]}
+                  pageCount={1}
+                >
+                  <EuiFlexGroup
+                    alignItems="center"
+                    justifyContent="spaceBetween"
+                    responsive={false}
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiPopover
+                            anchorPosition="upRight"
+                            button={
+                              <EuiButtonEmpty
+                                color="text"
+                                data-test-subj="tablePaginationPopoverButton"
+                                iconSide="right"
+                                iconType="arrowDown"
+                                onClick={[Function]}
+                                size="xs"
+                              >
+                                <EuiI18n
+                                  default="Rows per page"
+                                  token="euiTablePagination.rowsPerPage"
+                                />
+                                : 
+                                10
+                              </EuiButtonEmpty>
+                            }
+                            closePopover={[Function]}
+                            display="inlineBlock"
+                            hasArrow={true}
+                            isOpen={false}
+                            ownFocus={true}
+                            panelPaddingSize="none"
+                          >
+                            <div
+                              className="euiPopover euiPopover--anchorUpRight"
+                            >
+                              <div
+                                className="euiPopover__anchor"
+                              >
+                                <EuiButtonEmpty
+                                  color="text"
+                                  data-test-subj="tablePaginationPopoverButton"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  onClick={[Function]}
+                                  size="xs"
+                                >
+                                  <button
+                                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                                    data-test-subj="tablePaginationPopoverButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiButtonContent
+                                      className="euiButtonEmpty__content"
+                                      iconSide="right"
+                                      iconSize="s"
+                                      iconType="arrowDown"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButtonEmpty__text",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                      >
+                                        <EuiIcon
+                                          className="euiButtonContent__icon"
+                                          color="inherit"
+                                          size="s"
+                                          type="arrowDown"
+                                        >
+                                          <EuiIconArrowDown
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                            focusable="false"
+                                            role="img"
+                                            style={null}
+                                          >
+                                            <svg
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                              focusable="false"
+                                              height={16}
+                                              role="img"
+                                              style={null}
+                                              viewBox="0 0 16 16"
+                                              width={16}
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            >
+                                              <path
+                                                d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                fillRule="non-zero"
+                                              />
+                                            </svg>
+                                          </EuiIconArrowDown>
+                                        </EuiIcon>
+                                        <span
+                                          className="euiButtonEmpty__text"
+                                        >
+                                          <EuiI18n
+                                            default="Rows per page"
+                                            token="euiTablePagination.rowsPerPage"
+                                          >
+                                            Rows per page
+                                          </EuiI18n>
+                                          : 
+                                          10
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonEmpty>
+                              </div>
+                            </div>
+                          </EuiPopover>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiPagination
+                            activePage={0}
+                            aria-controls="random_html_id"
+                            onPageClick={[Function]}
+                            pageCount={1}
+                          >
+                            <nav
+                              className="euiPagination"
+                            >
+                              <EuiI18n
+                                default="Previous page, {page}"
+                                token="euiPagination.previousPage"
+                                values={
+                                  Object {
+                                    "page": 0,
+                                  }
+                                }
+                              >
+                                <EuiI18n
+                                  default="Previous page"
+                                  token="euiPagination.disabledPreviousPage"
+                                >
+                                  <EuiButtonIcon
+                                    aria-label="Previous page"
+                                    color="text"
+                                    data-test-subj="pagination-button-previous"
+                                    disabled={true}
+                                    iconType="arrowLeft"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      aria-label="Previous page"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="pagination-button-previous"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="arrowLeft"
+                                      >
+                                        <EuiIconArrowLeft
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit 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="M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z"
+                                              fillRule="nonzero"
+                                            />
+                                          </svg>
+                                        </EuiIconArrowLeft>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                              </EuiI18n>
+                              <ul
+                                className="euiPagination__list"
+                              >
+                                <PaginationButton
+                                  key="0"
+                                  pageIndex={0}
+                                >
+                                  <li
+                                    className="euiPagination__item"
+                                  >
+                                    <EuiPaginationButton
+                                      aria-controls="random_html_id"
+                                      hideOnMobile={true}
+                                      isActive={true}
+                                      onClick={[Function]}
+                                      pageIndex={0}
+                                      totalPages={1}
+                                    >
+                                      <EuiI18n
+                                        default="Page {page} of {totalPages}"
+                                        token="euiPaginationButton.longPageString"
+                                        values={
+                                          Object {
+                                            "page": 1,
+                                            "totalPages": 1,
+                                          }
+                                        }
+                                      >
+                                        <EuiI18n
+                                          default="Page {page}"
+                                          token="euiPaginationButton.shortPageString"
+                                          values={
+                                            Object {
+                                              "page": 1,
+                                            }
+                                          }
+                                        >
+                                          <EuiButtonEmpty
+                                            aria-controls="random_html_id"
+                                            aria-current={true}
+                                            aria-label="Page 1 of 1"
+                                            className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                            color="text"
+                                            data-test-subj="pagination-button-0"
+                                            href="#random_html_id"
+                                            isDisabled={true}
+                                            onClick={[Function]}
+                                            size="s"
+                                          >
+                                            <button
+                                              aria-controls="random_html_id"
+                                              aria-current={true}
+                                              aria-label="Page 1 of 1"
+                                              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                              data-test-subj="pagination-button-0"
+                                              disabled={true}
+                                              onClick={[Function]}
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButtonEmpty__content"
+                                                iconSide="left"
+                                                iconSize="m"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButtonEmpty__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButtonEmpty__content"
+                                                >
+                                                  <span
+                                                    className="euiButtonEmpty__text"
+                                                  >
+                                                    1
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonEmpty>
+                                        </EuiI18n>
+                                      </EuiI18n>
+                                    </EuiPaginationButton>
+                                  </li>
+                                </PaginationButton>
+                              </ul>
+                              <EuiI18n
+                                default="Next page, {page}"
+                                token="euiPagination.nextPage"
+                                values={
+                                  Object {
+                                    "page": 2,
+                                  }
+                                }
+                              >
+                                <EuiI18n
+                                  default="Next page"
+                                  token="euiPagination.disabledNextPage"
+                                >
+                                  <EuiButtonIcon
+                                    aria-label="Next page"
+                                    color="text"
+                                    data-test-subj="pagination-button-next"
+                                    disabled={true}
+                                    iconType="arrowRight"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      aria-label="Next page"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="pagination-button-next"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="arrowRight"
+                                      >
+                                        <EuiIconArrowRight
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit 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="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                                              fillRule="nonzero"
+                                            />
+                                          </svg>
+                                        </EuiIconArrowRight>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                              </EuiI18n>
+                            </nav>
+                          </EuiPagination>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </EuiTablePagination>
+              </div>
+            </PaginationBar>
+          </div>
+        </EuiBasicTable>
+      </EuiInMemoryTable>
+    </div>
+  </EuiPanel>
+</TracesTable>
+`;
+
+exports[`Traces table component renders traces table 1`] = `
+<TracesTable
+  dataPrepperIndicesExist={true}
+  items={
+    Array [
+      Object {
+        "actions": "#",
+        "error_count": "Yes",
+        "last_updated": "11/10/2020 09:55:45",
+        "latency": 19.91,
+        "percentile_in_trace_group": 30,
+        "trace_group": "HTTP GET",
+        "trace_id": "00079a615e31e61766fcb20b557051c1",
+      },
+    ]
+  }
+  jaegerIndicesExist={false}
+  loading={false}
+  mode="data_prepper"
+  refresh={[MockFunction]}
+  traceIdColumnAction={[Function]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={10}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow10"
+            >
+              <PanelTitle
+                title="Traces"
+                totalItems={1}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Traces
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (1)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="m"
+      >
+        <div
+          className="euiSpacer euiSpacer--m"
+        />
+      </EuiSpacer>
+      <EuiHorizontalRule
+        margin="none"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full"
+        />
+      </EuiHorizontalRule>
+      <EuiInMemoryTable
+        columns={
+          Array [
+            Object {
+              "align": "left",
+              "field": "trace_id",
+              "name": "Trace ID",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+            },
+            Object {
+              "align": "left",
+              "field": "trace_group",
+              "name": "Trace group",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+            },
+            Object {
+              "align": "right",
+              "field": "latency",
+              "name": "Latency (ms)",
+              "sortable": true,
+              "truncateText": true,
+            },
+            Object {
+              "align": "right",
+              "field": "percentile_in_trace_group",
+              "name": <React.Fragment>
+                <div>
+                  Percentile in trace group
+                </div>
+              </React.Fragment>,
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "error_count",
+              "name": "Errors",
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "left",
+              "field": "last_updated",
+              "name": "Last updated",
+              "render": [Function],
+              "sortable": true,
+            },
+          ]
+        }
+        items={
+          Array [
+            Object {
+              "actions": "#",
+              "error_count": "Yes",
+              "last_updated": "11/10/2020 09:55:45",
+              "latency": 19.91,
+              "percentile_in_trace_group": 30,
+              "trace_group": "HTTP GET",
+              "trace_id": "00079a615e31e61766fcb20b557051c1",
+            },
+          ]
+        }
+        loading={false}
+        onTableChange={[Function]}
+        pagination={
+          Object {
+            "initialPageSize": 10,
+            "pageSizeOptions": Array [
+              5,
+              10,
+              15,
+            ],
+          }
+        }
+        responsive={true}
+        sorting={
+          Object {
+            "sort": Object {
+              "direction": "asc",
+              "field": "trace_id",
+            },
+          }
+        }
+        tableLayout="auto"
+      >
+        <EuiBasicTable
+          columns={
+            Array [
+              Object {
+                "align": "left",
+                "field": "trace_id",
+                "name": "Trace ID",
+                "render": [Function],
+                "sortable": true,
+                "truncateText": true,
+              },
+              Object {
+                "align": "left",
+                "field": "trace_group",
+                "name": "Trace group",
+                "render": [Function],
+                "sortable": true,
+                "truncateText": true,
+              },
+              Object {
+                "align": "right",
+                "field": "latency",
+                "name": "Latency (ms)",
+                "sortable": true,
+                "truncateText": true,
+              },
+              Object {
+                "align": "right",
+                "field": "percentile_in_trace_group",
+                "name": <React.Fragment>
+                  <div>
+                    Percentile in trace group
+                  </div>
+                </React.Fragment>,
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "error_count",
+                "name": "Errors",
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "left",
+                "field": "last_updated",
+                "name": "Last updated",
+                "render": [Function],
+                "sortable": true,
+              },
+            ]
+          }
+          items={
+            Array [
+              Object {
+                "actions": "#",
+                "error_count": "Yes",
+                "last_updated": "11/10/2020 09:55:45",
+                "latency": 19.91,
+                "percentile_in_trace_group": 30,
+                "trace_group": "HTTP GET",
+                "trace_id": "00079a615e31e61766fcb20b557051c1",
+              },
+            ]
+          }
+          loading={false}
+          noItemsMessage="No items found"
+          onChange={[Function]}
+          pagination={
+            Object {
+              "hidePerPageOptions": undefined,
+              "pageIndex": 0,
+              "pageSize": 10,
+              "pageSizeOptions": Array [
+                5,
+                10,
+                15,
+              ],
+              "totalItemCount": 1,
+            }
+          }
+          responsive={true}
+          sorting={
+            Object {
+              "allowNeutralSort": true,
+              "sort": Object {
+                "direction": "asc",
+                "field": "Trace ID",
+              },
+            }
+          }
+          tableLayout="auto"
+        >
+          <div
+            className="euiBasicTable"
+          >
+            <div>
+              <EuiTableHeaderMobile>
+                <div
+                  className="euiTableHeaderMobile"
+                >
+                  <EuiFlexGroup
+                    alignItems="baseline"
+                    justifyContent="spaceBetween"
+                    responsive={false}
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        />
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiTableSortMobile
+                            items={
+                              Array [
+                                Object {
+                                  "isSortAscending": true,
+                                  "isSorted": true,
+                                  "key": "_data_s_trace_id_0",
+                                  "name": "Trace ID",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_trace_group_1",
+                                  "name": "Trace group",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_latency_2",
+                                  "name": "Latency (ms)",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_percentile_in_trace_group_3",
+                                  "name": <React.Fragment>
+                                    <div>
+                                      Percentile in trace group
+                                    </div>
+                                  </React.Fragment>,
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_error_count_4",
+                                  "name": "Errors",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_last_updated_5",
+                                  "name": "Last updated",
+                                  "onSort": [Function],
+                                },
+                              ]
+                            }
+                          >
+                            <div
+                              className="euiTableSortMobile"
+                            >
+                              <EuiPopover
+                                anchorPosition="downRight"
+                                button={
+                                  <EuiButtonEmpty
+                                    flush="right"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                    size="xs"
+                                  >
+                                    <EuiI18n
+                                      default="Sorting"
+                                      token="euiTableSortMobile.sorting"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="none"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownRight"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      flush="right"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      onClick={[Function]}
+                                      size="xs"
+                                    >
+                                      <button
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text"
+                                            >
+                                              <EuiI18n
+                                                default="Sorting"
+                                                token="euiTableSortMobile.sorting"
+                                              >
+                                                Sorting
+                                              </EuiI18n>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </div>
+                          </EuiTableSortMobile>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </div>
+              </EuiTableHeaderMobile>
+              <EuiTable
+                id="random_html_id"
+                responsive={true}
+                tableLayout="auto"
+              >
+                <table
+                  className="euiTable euiTable--responsive euiTable--auto"
+                  id="random_html_id"
+                  tabIndex={-1}
+                >
+                  <EuiScreenReaderOnly>
+                    <caption
+                      className="euiScreenReaderOnly euiTableCaption"
+                    >
+                      <EuiDelayRender
+                        delay={500}
+                      />
+                    </caption>
+                  </EuiScreenReaderOnly>
+                  <EuiTableHeader>
+                    <thead>
+                      <tr>
+                        <EuiTableHeaderCell
+                          align="left"
+                          data-test-subj="tableHeaderCell_trace_id_0"
+                          isSortAscending={true}
+                          isSorted={true}
+                          key="_data_h_trace_id_0"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="ascending"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_trace_id_0"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSortAscending={true}
+                                isSorted={true}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Trace ID",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Trace ID"
+                                      >
+                                        Trace ID
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                  <EuiIcon
+                                    className="euiTableSortIcon"
+                                    size="m"
+                                    type="sortUp"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="left"
+                          data-test-subj="tableHeaderCell_trace_group_1"
+                          isSorted={false}
+                          key="_data_h_trace_group_1"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_trace_group_1"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Trace group",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Trace group"
+                                      >
+                                        Trace group
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_latency_2"
+                          isSorted={false}
+                          key="_data_h_latency_2"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_latency_2"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Latency (ms)",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Latency (ms)"
+                                      >
+                                        Latency (ms)
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_percentile_in_trace_group_3"
+                          isSorted={false}
+                          key="_data_h_percentile_in_trace_group_3"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_percentile_in_trace_group_3"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Percentile in trace group",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Percentile in trace group"
+                                      >
+                                        <div>
+                                          Percentile in trace group
+                                        </div>
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_error_count_4"
+                          isSorted={false}
+                          key="_data_h_error_count_4"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_error_count_4"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Errors",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Errors"
+                                      >
+                                        Errors
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="left"
+                          data-test-subj="tableHeaderCell_last_updated_5"
+                          isSorted={false}
+                          key="_data_h_last_updated_5"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_last_updated_5"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Last updated",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Last updated"
+                                      >
+                                        Last updated
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                      </tr>
+                    </thead>
+                  </EuiTableHeader>
+                  <EuiTableBody
+                    bodyRef={[Function]}
+                  >
+                    <tbody>
+                      <EuiTableRow
+                        isSelected={false}
+                      >
+                        <tr
+                          className="euiTableRow"
+                        >
+                          <EuiTableRowCell
+                            align="left"
+                            key="_data_column_trace_id_0_0"
+                            mobileOptions={
+                              Object {
+                                "header": "Trace ID",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Trace ID
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                              >
+                                <EuiFlexGroup
+                                  alignItems="center"
+                                  className=""
+                                  gutterSize="s"
+                                  key=".0"
+                                >
+                                  <div
+                                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                  >
+                                    <EuiFlexItem
+                                      grow={10}
+                                    >
+                                      <div
+                                        className="euiFlexItem euiFlexItem--flexGrow10"
+                                      >
+                                        <EuiLink
+                                          data-test-subj="trace-link"
+                                          onClick={[Function]}
+                                        >
+                                          <button
+                                            className="euiLink euiLink--primary"
+                                            data-test-subj="trace-link"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <div
+                                              title="00079a615e31e61766fcb20b557051c1"
+                                            >
+                                              00079a615e31e61766fcb...
+                                            </div>
+                                          </button>
+                                        </EuiLink>
+                                      </div>
+                                    </EuiFlexItem>
+                                    <EuiFlexItem
+                                      grow={false}
+                                    >
+                                      <div
+                                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                                      >
+                                        <EuiCopy
+                                          afterMessage="Copied"
+                                          textToCopy="00079a615e31e61766fcb20b557051c1"
+                                        >
+                                          <EuiToolTip
+                                            delay="regular"
+                                            onMouseOut={[Function]}
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Copy trace id"
+                                                iconType="copyClipboard"
+                                                onBlur={[Function]}
+                                                onClick={[Function]}
+                                                onFocus={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Copy trace id"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                  disabled={false}
+                                                  onBlur={[Function]}
+                                                  onClick={[Function]}
+                                                  onFocus={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="copyClipboard"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </EuiCopy>
+                                      </div>
+                                    </EuiFlexItem>
+                                    <EuiFlexItem
+                                      grow={3}
+                                    >
+                                      <div
+                                        className="euiFlexItem euiFlexItem--flexGrow3"
+                                      />
+                                    </EuiFlexItem>
+                                  </div>
+                                </EuiFlexGroup>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="left"
+                            key="_data_column_trace_group_0_1"
+                            mobileOptions={
+                              Object {
+                                "header": "Trace group",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Trace group
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                              >
+                                <EuiText
+                                  className=""
+                                  key=".0"
+                                  size="s"
+                                >
+                                  <div
+                                    className="euiText euiText--small"
+                                  >
+                                    HTTP GET
+                                  </div>
+                                </EuiText>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_latency_0_2"
+                            mobileOptions={
+                              Object {
+                                "header": "Latency (ms)",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={true}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Latency (ms)
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText"
+                              >
+                                <span
+                                  className="euiTableCellContent__text"
+                                >
+                                  19.91
+                                </span>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_percentile_in_trace_group_0_3"
+                            mobileOptions={
+                              Object {
+                                "header": <React.Fragment>
+                                  <div>
+                                    Percentile in trace group
+                                  </div>
+                                </React.Fragment>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <div>
+                                  Percentile in trace group
+                                </div>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                <EuiText
+                                  className=""
+                                  key=".0"
+                                  size="s"
+                                >
+                                  <div
+                                    className="euiText euiText--small"
+                                  >
+                                    30th
+                                  </div>
+                                </EuiText>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_error_count_0_4"
+                            mobileOptions={
+                              Object {
+                                "header": "Errors",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Errors
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                No
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="left"
+                            key="_data_column_last_updated_0_5"
+                            mobileOptions={
+                              Object {
+                                "header": "Last updated",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Last updated
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--overflowingContent"
+                              >
+                                11/10/2020 09:55:45
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                        </tr>
+                      </EuiTableRow>
+                    </tbody>
+                  </EuiTableBody>
+                </table>
+              </EuiTable>
+            </div>
+            <PaginationBar
+              aria-controls="random_html_id"
+              onPageChange={[Function]}
+              onPageSizeChange={[Function]}
+              pagination={
+                Object {
+                  "hidePerPageOptions": undefined,
+                  "pageIndex": 0,
+                  "pageSize": 10,
+                  "pageSizeOptions": Array [
+                    5,
+                    10,
+                    15,
+                  ],
+                  "totalItemCount": 1,
+                }
+              }
+            >
+              <div>
+                <EuiSpacer
+                  size="m"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiTablePagination
+                  activePage={0}
+                  aria-controls="random_html_id"
+                  itemsPerPage={10}
+                  itemsPerPageOptions={
+                    Array [
+                      5,
+                      10,
+                      15,
+                    ]
+                  }
+                  onChangeItemsPerPage={[Function]}
+                  onChangePage={[Function]}
+                  pageCount={1}
+                >
+                  <EuiFlexGroup
+                    alignItems="center"
+                    justifyContent="spaceBetween"
+                    responsive={false}
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiPopover
+                            anchorPosition="upRight"
+                            button={
+                              <EuiButtonEmpty
+                                color="text"
+                                data-test-subj="tablePaginationPopoverButton"
+                                iconSide="right"
+                                iconType="arrowDown"
+                                onClick={[Function]}
+                                size="xs"
+                              >
+                                <EuiI18n
+                                  default="Rows per page"
+                                  token="euiTablePagination.rowsPerPage"
+                                />
+                                : 
+                                10
+                              </EuiButtonEmpty>
+                            }
+                            closePopover={[Function]}
+                            display="inlineBlock"
+                            hasArrow={true}
+                            isOpen={false}
+                            ownFocus={true}
+                            panelPaddingSize="none"
+                          >
+                            <div
+                              className="euiPopover euiPopover--anchorUpRight"
+                            >
+                              <div
+                                className="euiPopover__anchor"
+                              >
+                                <EuiButtonEmpty
+                                  color="text"
+                                  data-test-subj="tablePaginationPopoverButton"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  onClick={[Function]}
+                                  size="xs"
+                                >
+                                  <button
+                                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                                    data-test-subj="tablePaginationPopoverButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiButtonContent
+                                      className="euiButtonEmpty__content"
+                                      iconSide="right"
+                                      iconSize="s"
+                                      iconType="arrowDown"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButtonEmpty__text",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                      >
+                                        <EuiIcon
+                                          className="euiButtonContent__icon"
+                                          color="inherit"
+                                          size="s"
+                                          type="arrowDown"
+                                        >
+                                          <EuiIconEmpty
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                            focusable="false"
+                                            role="img"
+                                            style={null}
+                                          >
+                                            <svg
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                              focusable="false"
+                                              height={16}
+                                              role="img"
+                                              style={null}
+                                              viewBox="0 0 16 16"
+                                              width={16}
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            />
+                                          </EuiIconEmpty>
+                                        </EuiIcon>
+                                        <span
+                                          className="euiButtonEmpty__text"
+                                        >
+                                          <EuiI18n
+                                            default="Rows per page"
+                                            token="euiTablePagination.rowsPerPage"
+                                          >
+                                            Rows per page
+                                          </EuiI18n>
+                                          : 
+                                          10
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonEmpty>
+                              </div>
+                            </div>
+                          </EuiPopover>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiPagination
+                            activePage={0}
+                            aria-controls="random_html_id"
+                            onPageClick={[Function]}
+                            pageCount={1}
+                          >
+                            <nav
+                              className="euiPagination"
+                            >
+                              <EuiI18n
+                                default="Previous page, {page}"
+                                token="euiPagination.previousPage"
+                                values={
+                                  Object {
+                                    "page": 0,
+                                  }
+                                }
+                              >
+                                <EuiI18n
+                                  default="Previous page"
+                                  token="euiPagination.disabledPreviousPage"
+                                >
+                                  <EuiButtonIcon
+                                    aria-label="Previous page"
+                                    color="text"
+                                    data-test-subj="pagination-button-previous"
+                                    disabled={true}
+                                    iconType="arrowLeft"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      aria-label="Previous page"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="pagination-button-previous"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="arrowLeft"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                              </EuiI18n>
+                              <ul
+                                className="euiPagination__list"
+                              >
+                                <PaginationButton
+                                  key="0"
+                                  pageIndex={0}
+                                >
+                                  <li
+                                    className="euiPagination__item"
+                                  >
+                                    <EuiPaginationButton
+                                      aria-controls="random_html_id"
+                                      hideOnMobile={true}
+                                      isActive={true}
+                                      onClick={[Function]}
+                                      pageIndex={0}
+                                      totalPages={1}
+                                    >
+                                      <EuiI18n
+                                        default="Page {page} of {totalPages}"
+                                        token="euiPaginationButton.longPageString"
+                                        values={
+                                          Object {
+                                            "page": 1,
+                                            "totalPages": 1,
+                                          }
+                                        }
+                                      >
+                                        <EuiI18n
+                                          default="Page {page}"
+                                          token="euiPaginationButton.shortPageString"
+                                          values={
+                                            Object {
+                                              "page": 1,
+                                            }
+                                          }
+                                        >
+                                          <EuiButtonEmpty
+                                            aria-controls="random_html_id"
+                                            aria-current={true}
+                                            aria-label="Page 1 of 1"
+                                            className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                            color="text"
+                                            data-test-subj="pagination-button-0"
+                                            href="#random_html_id"
+                                            isDisabled={true}
+                                            onClick={[Function]}
+                                            size="s"
+                                          >
+                                            <button
+                                              aria-controls="random_html_id"
+                                              aria-current={true}
+                                              aria-label="Page 1 of 1"
+                                              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                              data-test-subj="pagination-button-0"
+                                              disabled={true}
+                                              onClick={[Function]}
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButtonEmpty__content"
+                                                iconSide="left"
+                                                iconSize="m"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButtonEmpty__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButtonEmpty__content"
+                                                >
+                                                  <span
+                                                    className="euiButtonEmpty__text"
+                                                  >
+                                                    1
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonEmpty>
+                                        </EuiI18n>
+                                      </EuiI18n>
+                                    </EuiPaginationButton>
+                                  </li>
+                                </PaginationButton>
+                              </ul>
+                              <EuiI18n
+                                default="Next page, {page}"
+                                token="euiPagination.nextPage"
+                                values={
+                                  Object {
+                                    "page": 2,
+                                  }
+                                }
+                              >
+                                <EuiI18n
+                                  default="Next page"
+                                  token="euiPagination.disabledNextPage"
+                                >
+                                  <EuiButtonIcon
+                                    aria-label="Next page"
+                                    color="text"
+                                    data-test-subj="pagination-button-next"
+                                    disabled={true}
+                                    iconType="arrowRight"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      aria-label="Next page"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="pagination-button-next"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="arrowRight"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                              </EuiI18n>
+                            </nav>
+                          </EuiPagination>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </EuiTablePagination>
+              </div>
+            </PaginationBar>
+          </div>
+        </EuiBasicTable>
+      </EuiInMemoryTable>
+    </div>
+  </EuiPanel>
+</TracesTable>
+`;
diff --git a/public/components/trace_analytics/components/traces/service_breakdown_panel.tsx b/public/components/trace_analytics/components/traces/service_breakdown_panel.tsx
new file mode 100644
index 0000000000..6f8703a03e
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/service_breakdown_panel.tsx
@@ -0,0 +1,84 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHealth,
+  EuiHorizontalRule,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useMemo } from 'react';
+import { Plt } from '../../../visualizations/plotly/plot';
+import { PanelTitle } from '../common/helper_functions';
+
+export function ServiceBreakdownPanel(props: { data: Plotly.Data[] }) {
+  const layout = useMemo(
+    () =>
+      ({
+        height: 200,
+        width: 200,
+        showlegend: false,
+        margin: {
+          l: 5,
+          r: 5,
+          b: 5,
+          t: 5,
+        },
+      } as Partial<Plotly.Layout>),
+    [props.data]
+  );
+
+  const renderStats = () => {
+    return props.data.length > 0 ? (
+      <EuiFlexGroup responsive={false} style={{ maxHeight: 260, overflowY: 'auto' }}>
+        <EuiFlexItem>
+          <EuiFlexGroup direction="column" alignItems="flexStart" gutterSize="m" responsive={false}>
+            {props.data[0].marker.colors.map((color, i) => (
+              <EuiFlexItem key={`label-${i}`}>
+                <EuiHealth color={color}>
+                  <div style={{ whiteSpace: 'nowrap' }}>{props.data[0].labels[i]}</div>
+                </EuiHealth>
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem />
+        <EuiFlexItem />
+        <EuiFlexItem>
+          <EuiFlexGroup direction="column" alignItems="flexEnd" gutterSize="m" responsive={false}>
+            {props.data[0].values.map((value, i) => (
+              <EuiFlexItem key={`value-${i}`}>
+                <EuiText size="s">{_.round(value, 2)}%</EuiText>
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    ) : null;
+  };
+
+  const stats = useMemo(() => renderStats(), [props.data]);
+
+  return (
+    <>
+      <EuiPanel>
+        <PanelTitle title="Time spent by service" data-test-subj='time-spent-by-service-panel'/>
+        <EuiHorizontalRule margin="m" />
+        <EuiFlexGroup direction="column" alignItems="center">
+          <EuiFlexItem>
+            {props.data?.length > 0 ? <Plt data={props.data} layout={layout} /> : null}
+          </EuiFlexItem>
+          <EuiSpacer />
+          <EuiFlexItem>{stats}</EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer />
+      </EuiPanel>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/traces/span_detail_flyout.tsx b/public/components/trace_analytics/components/traces/span_detail_flyout.tsx
new file mode 100644
index 0000000000..5a3089bc1a
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/span_detail_flyout.tsx
@@ -0,0 +1,240 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButtonIcon,
+  EuiCodeBlock,
+  EuiCopy,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiHorizontalRule,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import _ from 'lodash';
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import { HttpSetup } from '../../../../../../../src/core/public';
+import { TRACE_ANALYTICS_DATE_FORMAT } from '../../../../../common/constants/trace_analytics';
+import { TraceAnalyticsMode } from '../../home';
+import { handleSpansFlyoutRequest } from '../../requests/traces_request_handler';
+import { microToMilliSec, nanoToMilliSec } from '../common/helper_functions';
+import { FlyoutListItem } from './flyout_list_item';
+
+export function SpanDetailFlyout(props: {
+  http: HttpSetup;
+  spanId: string;
+  isFlyoutVisible: boolean;
+  closeFlyout: () => void;
+  addSpanFilter: (field: string, value: any) => void;
+  mode: TraceAnalyticsMode;
+}) {
+  const { mode } = props;
+  const [span, setSpan] = useState<any>({});
+
+  useEffect(() => {
+    handleSpansFlyoutRequest(props.http, props.spanId, setSpan, mode);
+  }, [props.spanId]);
+
+  const getListItem = (field: string, title: React.ReactNode, description: React.ReactNode) => {
+    return (
+      <FlyoutListItem
+        title={title}
+        description={description}
+        key={`list-item-${title}`}
+        addSpanFilter={() => props.addSpanFilter(field, span[field])}
+      />
+    );
+  };
+
+  const isEmpty = (value) => {
+    return (
+      value == null ||
+      (value.hasOwnProperty('length') && value.length === 0) ||
+      (value.constructor === Object && Object.keys(value).length === 0)
+    );
+  };
+
+  const renderContent = () => {
+    if (!span || _.isEmpty(span)) return '-';
+    const overviewList = [
+      getListItem(
+        'spanId',
+        'Span ID',
+        (mode === 'data_prepper' ? span.spanId : span.spanID) ? (
+          <EuiFlexGroup gutterSize="xs" style={{ marginTop: -4, marginBottom: -4 }}>
+            <EuiFlexItem grow={false}>
+              <EuiCopy textToCopy={mode === 'data_prepper' ? span.spanId : span.spanID}>
+                {(copy) => (
+                  <EuiButtonIcon aria-label="copy-button" onClick={copy} iconType="copyClipboard" />
+                )}
+              </EuiCopy>
+            </EuiFlexItem>
+            <EuiFlexItem>{mode === 'data_prepper' ? span.spanId : span.spanID}</EuiFlexItem>
+          </EuiFlexGroup>
+        ) : (
+          '-'
+        )
+      ),
+      getListItem(
+        'parentSpanId',
+        'Parent span ID',
+        (mode === 'data_prepper' ? span.parentSpanId : span.references.length) ? (
+          <EuiFlexGroup gutterSize="xs" style={{ marginTop: -4, marginBottom: -4 }}>
+            <EuiFlexItem grow={false}>
+              <EuiCopy
+                textToCopy={mode === 'data_prepper' ? span.parentSpanId : span.references[0].spanID}
+              >
+                {(copy) => (
+                  <EuiButtonIcon aria-label="copy-button" onClick={copy} iconType="copyClipboard" />
+                )}
+              </EuiCopy>
+            </EuiFlexItem>
+            <EuiFlexItem data-test-subj="parentSpanId">
+              {mode === 'data_prepper' ? span.parentSpanId : span.references[0].spanID}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        ) : (
+          '-'
+        )
+      ),
+      getListItem(
+        'serviceName',
+        'Service',
+        (mode === 'data_prepper' ? span.serviceName : span.process.serviceName) || '-'
+      ),
+      getListItem(
+        'name',
+        'Operation',
+        (mode === 'data_prepper' ? span.name : span.operationName) || '-'
+      ),
+      getListItem(
+        'durationInNanos',
+        'Duration',
+        `${
+          mode === 'data_prepper'
+            ? _.round(nanoToMilliSec(Math.max(0, span.durationInNanos)), 2)
+            : _.round(microToMilliSec(Math.max(0, span.duration)), 2)
+        } ms`
+      ),
+      getListItem(
+        'startTime',
+        'Start time',
+        mode === 'data_prepper'
+          ? moment(span.startTime).format(TRACE_ANALYTICS_DATE_FORMAT)
+          : moment(_.round(microToMilliSec(Math.max(0, span.startTime)), 2)).format(
+              TRACE_ANALYTICS_DATE_FORMAT
+            )
+      ),
+      getListItem(
+        'endTime',
+        'End time',
+        mode === 'data_prepper'
+          ? moment(span.endTime).format(TRACE_ANALYTICS_DATE_FORMAT)
+          : moment(_.round(microToMilliSec(Math.max(0, span.startTime + span.duration)), 2)).format(
+              TRACE_ANALYTICS_DATE_FORMAT
+            )
+      ),
+      getListItem(
+        'status.code',
+        'Errors',
+        (mode === 'data_prepper' ? span['status.code'] === 2 : span.tag.error) ? (
+          <EuiText color="danger" size="s" style={{ fontWeight: 700 }}>
+            Yes
+          </EuiText>
+        ) : (
+          'No'
+        )
+      ),
+    ];
+    const ignoredKeys = new Set([
+      'spanId',
+      'spanID',
+      'parentSpanId',
+      'serviceName',
+      'name',
+      'operationName',
+      'durationInNanos',
+      'duration',
+      'startTime',
+      'startTimeMillis',
+      'endTime',
+      'status.code',
+      'events',
+      'traceId',
+      'traceID',
+      'traceGroup',
+      'traceGroupFields.endTime',
+      'traceGroupFields.statusCode',
+      'traceGroupFields.durationInNanos',
+    ]);
+    const attributesList = Object.keys(span)
+      .filter((key) => !ignoredKeys.has(key))
+      .sort((keyA, keyB) => {
+        const isANull = isEmpty(span[keyA]);
+        const isBNull = isEmpty(span[keyB]);
+        if ((isANull && isBNull) || (!isANull && !isBNull)) return keyA < keyB ? -1 : 1;
+        if (isANull) return 1;
+        return -1;
+      })
+      .map((key) => {
+        if (isEmpty(span[key])) return getListItem(key, key, '-');
+        let value = span[key];
+        if (typeof value === 'object') value = JSON.stringify(value);
+        return getListItem(key, key, value);
+      });
+
+    const eventsComponent = _.isEmpty(span.events) ? null : (
+      <>
+        <EuiText size="m">
+          <span className="panel-title">Event</span>
+        </EuiText>
+        <EuiCodeBlock language="json" paddingSize="s" isCopyable overflowHeight={400}>
+          {JSON.stringify(span.events, null, 2)}
+        </EuiCodeBlock>
+        <EuiSpacer size="xs" />
+        <EuiHorizontalRule margin="s" />
+      </>
+    );
+
+    return (
+      <>
+        <EuiText size="m">
+          <span className="panel-title">Overview</span>
+        </EuiText>
+        <EuiSpacer size="s" />
+        {overviewList}
+        <EuiSpacer size="xs" />
+        <EuiHorizontalRule margin="s" />
+        {eventsComponent}
+        <EuiText size="m">
+          <span className="panel-title">Span attributes</span>
+          {attributesList.length === 0 || attributesList.length ? (
+            <span className="panel-title-count">{` (${attributesList.length})`}</span>
+          ) : null}
+        </EuiText>
+        <EuiSpacer size="s" />
+        {attributesList}
+      </>
+    );
+  };
+
+  return (
+    <>
+      <EuiFlyout data-test-subj="spanDetailFlyout" onClose={props.closeFlyout} size="s">
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle>
+            <h2>Span detail</h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>{renderContent()}</EuiFlyoutBody>
+      </EuiFlyout>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/traces/span_detail_panel.tsx b/public/components/trace_analytics/components/traces/span_detail_panel.tsx
new file mode 100644
index 0000000000..4c2ebedb63
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/span_detail_panel.tsx
@@ -0,0 +1,291 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import {
+  EuiBadge,
+  EuiButtonGroup,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiPanel,
+  EuiSpacer,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useMemo, useState } from 'react';
+import { HttpSetup } from '../../../../../../../src/core/public';
+import { Plt } from '../../../visualizations/plotly/plot';
+import { TraceAnalyticsMode } from '../../home';
+import { handleSpansGanttRequest } from '../../requests/traces_request_handler';
+import { PanelTitle } from '../common/helper_functions';
+import { SpanDetailFlyout } from './span_detail_flyout';
+import { SpanDetailTable } from './span_detail_table';
+
+export function SpanDetailPanel(props: {
+  http: HttpSetup;
+  traceId: string;
+  colorMap: any;
+  mode: TraceAnalyticsMode
+  page?: string;
+  openSpanFlyout?: any;
+  data?: { gantt: any[]; table: any[]; ganttMaxX: number };
+  setData?: (data: { gantt: any[]; table: any[]; ganttMaxX: number }) => void;
+}) {
+  const { mode } = props;
+  const storedFilters = sessionStorage.getItem('TraceAnalyticsSpanFilters');
+  const fromApp = props.page === 'app';
+  const [spanFilters, setSpanFilters] = useState<Array<{ field: string; value: any }>>(
+    storedFilters ? JSON.parse(storedFilters) : []
+  );
+  const [DSL, setDSL] = useState<any>({});
+  let data: { gantt: any[]; table: any[]; ganttMaxX: number },
+    setData: (data: { gantt: any[]; table: any[]; ganttMaxX: number }) => void;
+  if (props.data && props.setData) {
+    [data, setData] = [props.data, props.setData];
+  } else {
+    [data, setData] = useState<{ gantt: any[]; table: any[]; ganttMaxX: number }>({
+      gantt: [],
+      table: [],
+      ganttMaxX: 0,
+    });
+  }
+
+  const setSpanFiltersWithStorage = (newFilters: Array<{ field: string; value: any }>) => {
+    setSpanFilters(newFilters);
+    sessionStorage.setItem('TraceAnalyticsSpanFilters', JSON.stringify(newFilters));
+  };
+
+  const addSpanFilter = (field: string, value: any) => {
+    const newFilters = [...spanFilters];
+    const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
+    if (index === -1) {
+      newFilters.push({ field, value });
+    } else {
+      newFilters.splice(index, 1, { field, value });
+    }
+    setSpanFiltersWithStorage(newFilters);
+  };
+
+  const removeSpanFilter = (field: string) => {
+    const newFilters = [...spanFilters];
+    const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
+    if (index !== -1) {
+      newFilters.splice(index, 1);
+      setSpanFiltersWithStorage(newFilters);
+    }
+  };
+
+  const refresh = _.debounce(() => {
+    if (_.isEmpty(props.colorMap)) return;
+    const refreshDSL = spanFiltersToDSL();
+    setDSL(refreshDSL);
+    handleSpansGanttRequest(props.traceId, props.http, setData, props.colorMap, refreshDSL, mode);
+  }, 150);
+
+  const spanFiltersToDSL = () => {
+    const spanDSL: any = mode === 'jaeger' ? {
+      query: {
+        bool: {
+          must: [
+            {
+              term: {
+                traceID: props.traceId,
+              },
+            },
+          ],
+          filter: [],
+          should: [],
+          must_not: [],
+        },
+      },
+    } : {
+      query: {
+        bool: {
+          must: [
+            {
+              term: {
+                traceId: props.traceId,
+              },
+            },
+          ],
+          filter: [],
+          should: [],
+          must_not: [],
+        },
+      },
+    };
+    spanFilters.map(({ field, value }) => {
+      if (value != null) {
+        spanDSL.query.bool.must.push({
+          term: {
+            [field]: value,
+          },
+        });
+      }
+    });
+    return spanDSL;
+  };
+
+  useEffect(() => {
+    refresh();
+  }, [props.colorMap, spanFilters]);
+
+  const getSpanDetailLayout = (plotTraces: Plotly.Data[], maxX: number): Partial<Plotly.Layout> => {
+    // get unique labels from traces
+    const yLabels = plotTraces
+      .map((d) => d.y[0])
+      .filter((label, i, self) => self.indexOf(label) === i);
+    // remove uuid when displaying y-ticks
+    const yTexts = yLabels.map((label) => label.substring(0, label.length - 36));
+
+    return {
+      height: 25 * plotTraces.length + 60,
+      width: 800,
+      margin: {
+        l: 260,
+        r: 5,
+        b: 30,
+        t: 30,
+      },
+      xaxis: {
+        ticksuffix: ' ms',
+        side: 'top',
+        color: '#91989c',
+        showline: true,
+        range: [0, maxX * 1.2],
+      },
+      yaxis: {
+        showgrid: false,
+        tickvals: yLabels,
+        ticktext: yTexts,
+      },
+    };
+  };
+
+  const layout = useMemo(
+    () => getSpanDetailLayout(data.gantt, data.ganttMaxX),
+    [data.gantt, data.ganttMaxX]
+  );
+
+  const [currentSpan, setCurrentSpan] = useState('');
+
+  const onClick = (event: any) => {
+    if (!event?.points) return;
+    const point = event.points[0];
+    if (fromApp) {
+      props.openSpanFlyout(point.data.spanId);
+    } else {
+      setCurrentSpan(point.data.spanId);
+    }
+  };
+
+  const renderFilters = useMemo(() => {
+    return spanFilters.map(({ field, value }) => (
+      <EuiFlexItem grow={false} key={`span-filter-badge-${field}`}>
+        <EuiBadge
+          iconType="cross"
+          iconSide="right"
+          iconOnClick={() => removeSpanFilter(field)}
+          iconOnClickAriaLabel="remove current filter"
+        >
+          {`${field}: ${value}`}
+        </EuiBadge>
+      </EuiFlexItem>
+    ));
+  }, [spanFilters]);
+
+  const onHover = () => {
+    const dragLayer = document.getElementsByClassName('nsewdrag')?.[0];
+    dragLayer.style.cursor = 'pointer';
+  };
+
+  const onUnhover = () => {
+    const dragLayer = document.getElementsByClassName('nsewdrag')?.[0];
+    dragLayer.style.cursor = '';
+  };
+
+  const toggleOptions = [
+    {
+      id: 'timeline',
+      label: 'Timeline',
+    },
+    {
+      id: 'span_list',
+      label: 'Span list',
+    },
+  ];
+  const [toggleIdSelected, setToggleIdSelected] = useState(toggleOptions[0].id);
+
+  const spanDetailTable = useMemo(
+    () => (
+      <SpanDetailTable
+        http={props.http}
+        hiddenColumns={mode === 'jaeger' ? ['traceID', 'traceGroup'] : ['traceId', 'traceGroup']}
+        DSL={DSL}
+        mode={mode}
+        openFlyout={(spanId: string) => {
+          if (fromApp) {
+            props.openSpanFlyout(spanId);
+          } else {
+            setCurrentSpan(spanId);
+          }
+        }}
+      />
+    ),
+    [DSL, setCurrentSpan]
+  );
+
+  return (
+    <>
+      <EuiPanel data-test-subj='span-gantt-chart-panel'>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <PanelTitle title="Spans" totalItems={data.gantt.length / 2} />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonGroup
+              legend="Select view of spans"
+              options={toggleOptions}
+              idSelected={toggleIdSelected}
+              onChange={(id) => setToggleIdSelected(id)}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        {spanFilters.length > 0 && (
+          <>
+            <EuiSpacer size="s" />
+            <EuiFlexGroup gutterSize="s" wrap>
+              {renderFilters}
+            </EuiFlexGroup>
+          </>
+        )}
+        <EuiHorizontalRule margin="m" />
+        <div style={{ overflowY: 'auto', maxHeight: 500 }}>
+          {toggleIdSelected === 'timeline' ? (
+            <Plt
+              data={data.gantt}
+              layout={layout}
+              onClickHandler={onClick}
+              onHoverHandler={onHover}
+              onUnhoverHandler={onUnhover}
+            />
+          ) : (
+            spanDetailTable
+          )}
+        </div>
+      </EuiPanel>
+      {!!currentSpan && (
+        <SpanDetailFlyout
+          http={props.http}
+          spanId={currentSpan}
+          isFlyoutVisible={!!currentSpan}
+          closeFlyout={() => setCurrentSpan('')}
+          addSpanFilter={addSpanFilter}
+          mode={mode}
+        />
+      )}
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/traces/span_detail_table.tsx b/public/components/trace_analytics/components/traces/span_detail_table.tsx
new file mode 100644
index 0000000000..30f60010f8
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/span_detail_table.tsx
@@ -0,0 +1,288 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import { EuiDataGrid, EuiDataGridColumn, EuiLink, EuiText } from '@elastic/eui';
+import _ from 'lodash';
+import moment from 'moment';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { HttpSetup } from '../../../../../../../src/core/public';
+import { TRACE_ANALYTICS_DATE_FORMAT } from '../../../../../common/constants/trace_analytics';
+import { TraceAnalyticsMode } from '../../home';
+import { handleSpansRequest } from '../../requests/traces_request_handler';
+import { microToMilliSec, nanoToMilliSec, NoMatchMessage } from '../common/helper_functions';
+
+interface SpanDetailTableProps {
+  http: HttpSetup;
+  hiddenColumns: string[];
+  openFlyout: (spanId: string) => void;
+  mode: TraceAnalyticsMode;
+  DSL?: any;
+  setTotal?: (total: number) => void;
+}
+
+export interface SpanSearchParams {
+  from: number;
+  size: number;
+  sortingColumns: Array<{
+    [id: string]: 'asc' | 'desc';
+  }>;
+}
+
+export function SpanDetailTable(props: SpanDetailTableProps) {
+  const [tableParams, setTableParams] = useState({
+    size: 10,
+    page: 0,
+    sortingColumns: [] as Array<{
+      id: string;
+      direction: 'asc' | 'desc';
+    }>,
+  });
+  const { mode } = props;
+  const [items, setItems] = useState<any>([]);
+  const [total, setTotal] = useState(0);
+
+  useEffect(() => {
+    const spanSearchParams: SpanSearchParams = {
+      from: tableParams.page * tableParams.size,
+      size: tableParams.size,
+      sortingColumns: tableParams.sortingColumns.map(({ id, direction }) => ({ [id]: direction })),
+    };
+    handleSpansRequest(props.http, setItems, setTotal, spanSearchParams, props.DSL, mode);
+  }, [tableParams, props.DSL]);
+
+  useEffect(() => {
+    if (props.setTotal) props.setTotal(total);
+  }, [total]);
+
+  const columns: EuiDataGridColumn[] = [
+    ...(mode === 'jaeger'
+      ? [
+          {
+            id: 'spanID',
+            display: 'Span ID',
+          },
+        ]
+      : [
+          {
+            id: 'spanId',
+            display: 'Span ID',
+          },
+        ]),
+    ...(mode === 'jaeger'
+      ? [
+          {
+            id: 'references',
+            display: 'Parent span ID',
+          },
+        ]
+      : [
+          {
+            id: 'parentSpanId',
+            display: 'Parent span ID',
+          },
+        ]),
+    ...(mode === 'jaeger'
+      ? [
+          {
+            id: 'traceID',
+            display: 'Trace ID',
+          },
+        ]
+      : [
+          {
+            id: 'traceId',
+            display: 'Trace ID',
+          },
+        ]),
+    ...(mode === 'jaeger'
+      ? []
+      : [
+          {
+            id: 'traceGroup',
+            display: 'Trace group',
+          },
+        ]),
+    ...(mode === 'jaeger'
+      ? [
+          {
+            id: 'process',
+            display: 'Service',
+          },
+        ]
+      : [
+          {
+            id: 'serviceName',
+            display: 'Service',
+          },
+        ]),
+    ...(mode === 'jaeger'
+      ? [
+          {
+            id: 'operationName',
+            display: 'Operation',
+          },
+        ]
+      : [
+          {
+            id: 'name',
+            display: 'Operation',
+          },
+        ]),
+    ...(mode === 'jaeger'
+      ? [
+          {
+            id: 'duration',
+            display: 'Duration',
+          },
+        ]
+      : [
+          {
+            id: 'durationInNanos',
+            display: 'Duration',
+          },
+        ]),
+    {
+      id: 'startTime',
+      display: 'Start time',
+    },
+    ...(mode === 'jaeger'
+      ? [
+          {
+            id: 'jaegerEndTime',
+            display: 'End time',
+          },
+        ]
+      : [
+          {
+            id: 'endTime',
+            display: 'End time',
+          },
+        ]),
+    ...(mode === 'jaeger'
+      ? [
+          {
+            id: 'tag',
+            display: 'Errors',
+          },
+        ]
+      : [
+          {
+            id: 'status.code',
+            display: 'Errors',
+          },
+        ]),
+  ];
+
+  const [visibleColumns, setVisibleColumns] = useState(() =>
+    columns
+      .filter(({ id }) => props.hiddenColumns.findIndex((column) => column === id) === -1)
+      .map(({ id }) => id)
+  );
+
+  const renderCellValue = useMemo(() => {
+    return ({ rowIndex, columnId }: { rowIndex: number; columnId: string }) => {
+      const adjustedRowIndex = rowIndex - tableParams.page * tableParams.size;
+      if (!items.hasOwnProperty(adjustedRowIndex)) return '-';
+      const value = items[adjustedRowIndex][columnId];
+      if ((value == null || value === '') && columnId !== 'jaegerEndTime') return '-';
+      switch (columnId) {
+        case 'tag':
+          return value.error === true ? (
+            <EuiText color="danger" size="s">
+              Yes
+            </EuiText>
+          ) : (
+            'No'
+          );
+        case 'references':
+          return value.length > 0 ? value[0].spanID : '';
+        case 'process':
+          return value.serviceName;
+        case 'spanId':
+          return (
+            <EuiLink data-test-subj="spanId-link" onClick={() => props.openFlyout(value)}>
+              {value}
+            </EuiLink>
+          );
+        case 'spanID':
+          return <EuiLink onClick={() => props.openFlyout(value)}>{value}</EuiLink>;
+        case 'durationInNanos':
+          return `${_.round(nanoToMilliSec(Math.max(0, value)), 2)} ms`;
+        case 'duration':
+          return `${_.round(microToMilliSec(Math.max(0, value)), 2)} ms`;
+        case 'startTime':
+          return mode === 'jaeger'
+            ? moment(_.round(microToMilliSec(Math.max(0, value)), 2)).format(
+                TRACE_ANALYTICS_DATE_FORMAT
+              )
+            : moment(value).format(TRACE_ANALYTICS_DATE_FORMAT);
+        case 'jaegerEndTime':
+          return moment(
+            _.round(
+              microToMilliSec(
+                Math.max(0, items[adjustedRowIndex].startTime + items[adjustedRowIndex].duration)
+              ),
+              2
+            )
+          ).format(TRACE_ANALYTICS_DATE_FORMAT);
+        case 'endTime':
+          return moment(value).format(TRACE_ANALYTICS_DATE_FORMAT);
+        case 'status.code':
+          return value === 2 ? (
+            <EuiText color="danger" size="s">
+              Yes
+            </EuiText>
+          ) : (
+            'No'
+          );
+
+        default:
+          return value;
+      }
+    };
+  }, [items, tableParams.page, tableParams.size]);
+
+  const onSort = useCallback(
+    (sortingColumns) => {
+      setTableParams({
+        ...tableParams,
+        sortingColumns,
+      });
+    },
+    [setTableParams]
+  );
+
+  const onChangeItemsPerPage = useCallback((size) => setTableParams({ ...tableParams, size }), [
+    tableParams,
+    setTableParams,
+  ]);
+  const onChangePage = useCallback((page) => setTableParams({ ...tableParams, page }), [
+    tableParams,
+    setTableParams,
+  ]);
+
+  return (
+    <>
+      <EuiDataGrid
+        aria-labelledby="span-detail-data-grid"
+        columns={columns}
+        columnVisibility={{ visibleColumns, setVisibleColumns }}
+        rowCount={total}
+        renderCellValue={renderCellValue}
+        sorting={mode === 'jaeger' ? undefined : { columns: tableParams.sortingColumns, onSort }}
+        toolbarVisibility={mode === 'jaeger' ? false : true}
+        pagination={{
+          pageIndex: tableParams.page,
+          pageSize: tableParams.size,
+          pageSizeOptions: [10, 50, 100],
+          onChangeItemsPerPage,
+          onChangePage,
+        }}
+      />
+      {total === 0 && <NoMatchMessage size="xl" />}
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/traces/traces_table.tsx b/public/components/trace_analytics/components/traces/traces_table.tsx
new file mode 100644
index 0000000000..03fa6c68aa
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/traces_table.tsx
@@ -0,0 +1,293 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import {
+  EuiButtonIcon,
+  EuiCopy,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiTableFieldDataColumnType,
+  EuiText,
+  PropertySort,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useMemo, useState } from 'react';
+import { TRACES_MAX_NUM } from '../../../../../common/constants/trace_analytics';
+import { TraceAnalyticsMode } from '../../home';
+import {
+  MissingConfigurationMessage,
+  NoMatchMessage,
+  PanelTitle,
+} from '../common/helper_functions';
+
+interface TracesTableProps {
+  items: any[];
+  refresh: (sort?: PropertySort) => void;
+  mode: TraceAnalyticsMode;
+  loading: boolean;
+  traceIdColumnAction: any;
+  jaegerIndicesExist: boolean;
+  dataPrepperIndicesExist: boolean;
+}
+
+export function TracesTable(props: TracesTableProps) {
+  const { items, refresh, mode, loading, traceIdColumnAction } = props;
+  const renderTitleBar = (totalItems?: number) => {
+    return (
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem grow={10}>
+          <PanelTitle title="Traces" totalItems={totalItems} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  const columns = useMemo(
+    () => {
+      if (mode === 'data_prepper') {
+        return(
+      [
+        {
+          field: 'trace_id',
+          name: 'Trace ID',
+          align: 'left',
+          sortable: true,
+          truncateText: true,
+          render: (item) => (
+            <EuiFlexGroup gutterSize="s" alignItems="center">
+              <EuiFlexItem grow={10}>
+                <EuiLink data-test-subj='trace-link' onClick={() => traceIdColumnAction(item)}>
+                  {item.length < 24 ? (
+                    item
+                  ) : (
+                    <div title={item}>{_.truncate(item, { length: 24 })}</div>
+                  )}
+                </EuiLink>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiCopy textToCopy={item}>
+                  {(copy) => (
+                    <EuiButtonIcon
+                      aria-label="Copy trace id"
+                      iconType="copyClipboard"
+                      onClick={copy}
+                    >
+                      Click to copy
+                    </EuiButtonIcon>
+                  )}
+                </EuiCopy>
+              </EuiFlexItem>
+              <EuiFlexItem grow={3} />
+            </EuiFlexGroup>
+          ),
+        },
+        {
+          field: 'trace_group',
+          name: 'Trace group',
+          align: 'left',
+          sortable: true,
+          truncateText: true,
+          render: (item) =>
+            item ? (
+              <EuiText size="s">
+                {item.length < 36 ? (
+                  item
+                ) : (
+                  <div title={item}>{_.truncate(item, { length: 36 })}</div>
+                )}
+              </EuiText>
+            ) : (
+              '-'
+            ),
+        },
+        {
+          field: 'latency',
+          name: 'Latency (ms)',
+          align: 'right',
+          sortable: true,
+          truncateText: true,
+        },
+        {
+          field: 'percentile_in_trace_group',
+          name: (
+            <>
+              <div>Percentile in trace group</div>
+              {/* <div style={{ marginRight: 5 }}>trace group</div> */}
+            </>
+          ),
+          align: 'right',
+          sortable: true,
+          render: (item) =>
+            item === 0 || item ? <EuiText size="s">{`${_.round(item, 2)}th`}</EuiText> : '-',
+        },
+        {
+          field: 'error_count',
+          name: 'Errors',
+          align: 'right',
+          sortable: true,
+          render: (item) =>
+            item == null ? (
+              '-'
+            ) : item > 0 ? (
+              <EuiText color="danger" size="s">
+                Yes
+              </EuiText>
+            ) : (
+              'No'
+            ),
+        },
+        {
+          field: 'last_updated',
+          name: 'Last updated',
+          align: 'left',
+          sortable: true,
+          render: (item) => (item === 0 || item ? item : '-'),
+        },
+      ] as Array<EuiTableFieldDataColumnType<any>>)
+    } else {
+      return (
+        [
+          {
+            field: 'trace_id',
+            name: 'Trace ID',
+            align: 'left',
+            sortable: true,
+            truncateText: true,
+            render: (item) => (
+              <EuiFlexGroup gutterSize="s" alignItems="center">
+                <EuiFlexItem grow={10}>
+                  <EuiLink onClick={() => traceIdColumnAction(item)}>
+                    {item.length < 24 ? (
+                      item
+                    ) : (
+                      <div title={item}>{_.truncate(item, { length: 24 })}</div>
+                    )}
+                  </EuiLink>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiCopy textToCopy={item}>
+                    {(copy) => (
+                      <EuiButtonIcon
+                        aria-label="Copy trace id"
+                        iconType="copyClipboard"
+                        onClick={copy}
+                      >
+                        Click to copy
+                      </EuiButtonIcon>
+                    )}
+                  </EuiCopy>
+                </EuiFlexItem>
+                <EuiFlexItem grow={3} />
+              </EuiFlexGroup>
+            ),
+          },
+          {
+            field: 'latency',
+            name: 'Latency (ms)',
+            align: 'right',
+            sortable: true,
+            truncateText: true,
+          },
+          {
+            field: 'error_count',
+            name: 'Errors',
+            align: 'right',
+            sortable: true,
+            render: (item) =>
+              item == null ? (
+                '-'
+              ) : item > 0 ? (
+                <EuiText color="danger" size="s">
+                  Yes
+                </EuiText>
+              ) : (
+                'No'
+              ),
+          },
+          {
+            field: 'last_updated',
+            name: 'Last updated',
+            align: 'left',
+            sortable: true,
+            render: (item) => (item === 0 || item ? item : '-'),
+          },
+        ] as Array<EuiTableFieldDataColumnType<any>>)
+    }
+    },
+    [items]
+  );
+
+  const titleBar = useMemo(() => renderTitleBar(items?.length), [items]);
+
+  const [sorting, setSorting] = useState<{ sort: PropertySort }>({
+    sort: {
+      field: 'trace_id',
+      direction: 'asc',
+    },
+  });
+
+  const onTableChange = async ({ currPage, sort }: { currPage: any; sort: any }) => {
+    if (typeof sort?.field !== 'string') return;
+
+    // maps table column key to DSL aggregation name
+    const fieldMappings = {
+      trace_id: '_key',
+      trace_group: null,
+      latency: 'latency',
+      percentile_in_trace_group: null,
+      error_count: 'error_count',
+      last_updated: 'last_updated',
+    };
+    const field = fieldMappings[sort.field as keyof typeof fieldMappings];
+    if (!field || items?.length < TRACES_MAX_NUM) {
+      setSorting({ sort });
+      return;
+    }
+
+    // using await when sorting the default sorted field leads to a bug in UI
+    if (sort.field === 'trace_id') {
+      refresh({ ...sort, field });
+      setSorting({ sort });
+      return;
+    }
+
+    await refresh({ ...sort, field });
+    setSorting({ sort });
+  };
+
+  return (
+    <>
+      <EuiPanel>
+        {titleBar}
+        <EuiSpacer size="m" />
+        <EuiHorizontalRule margin="none" />
+        {!((mode === 'data_prepper' && props.dataPrepperIndicesExist) || (mode === 'jaeger' && props.jaegerIndicesExist)) ? (
+          <MissingConfigurationMessage mode={mode}/>
+        ) : items?.length > 0 ? (
+          <EuiInMemoryTable
+            tableLayout="auto"
+            items={items}
+            columns={columns}
+            pagination={{
+              initialPageSize: 10,
+              pageSizeOptions: [5, 10, 15],
+            }}
+            sorting={sorting}
+            onTableChange={onTableChange}
+            loading={loading}
+          />
+        ) : (
+          <NoMatchMessage size="xl" />
+        )}
+      </EuiPanel>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/home.tsx b/public/components/trace_analytics/home.tsx
new file mode 100644
index 0000000000..d9c443ff15
--- /dev/null
+++ b/public/components/trace_analytics/home.tsx
@@ -0,0 +1,250 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiGlobalToastList } from '@elastic/eui';
+import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
+import React, { ReactChild, useEffect, useState } from 'react';
+import { Route, RouteComponentProps } from 'react-router-dom';
+import {
+  ChromeBreadcrumb,
+  ChromeStart,
+  HttpStart,
+} from '../../../../../src/core/public';
+import { ObservabilitySideBar } from '../common/side_nav';
+import { FilterType } from './components/common/filters/filters';
+import { SearchBarProps } from './components/common/search_bar';
+import { Dashboard } from './components/dashboard';
+import { Services, ServiceView } from './components/services';
+import { Traces, TraceView } from './components/traces';
+import { handleDataPrepperIndicesExistRequest, handleJaegerIndicesExistRequest } from './requests/request_handler';
+
+export interface TraceAnalyticsCoreDeps {
+  parentBreadcrumbs: ChromeBreadcrumb[];
+  http: HttpStart;
+  chrome: ChromeStart;
+}
+
+interface HomeProps extends RouteComponentProps, TraceAnalyticsCoreDeps {}
+
+export type TraceAnalyticsMode = 'jaeger' | 'data_prepper'
+
+export interface TraceAnalyticsComponentDeps extends TraceAnalyticsCoreDeps, SearchBarProps {
+  mode: TraceAnalyticsMode;
+  modes: {
+    id: string;
+    title: string;
+  }[];
+  setMode: (mode: TraceAnalyticsMode) => void;
+  jaegerIndicesExist: boolean;
+  dataPrepperIndicesExist: boolean;
+}
+
+export const Home = (props: HomeProps) => {
+  const [dataPrepperIndicesExist, setDataPrepperIndicesExist] = useState(false);
+  const [jaegerIndicesExist, setJaegerIndicesExist] = useState(false);
+  const [mode, setMode] = useState<TraceAnalyticsMode>(sessionStorage.getItem('TraceAnalyticsMode') as TraceAnalyticsMode || 'jaeger')
+  const storedFilters = sessionStorage.getItem('TraceAnalyticsFilters');
+  const [query, setQuery] = useState<string>(sessionStorage.getItem('TraceAnalyticsQuery') || '');
+  const [filters, setFilters] = useState<FilterType[]>(
+    storedFilters ? JSON.parse(storedFilters) : []
+  );
+  const [startTime, setStartTime] = useState<string>(
+    sessionStorage.getItem('TraceAnalyticsStartTime') || 'now-5m'
+  );
+  const [endTime, setEndTime] = useState<string>(
+    sessionStorage.getItem('TraceAnalyticsEndTime') || 'now'
+  );
+
+  const setFiltersWithStorage = (newFilters: FilterType[]) => {
+    setFilters(newFilters);
+    sessionStorage.setItem('TraceAnalyticsFilters', JSON.stringify(newFilters));
+  };
+  const setQueryWithStorage = (newQuery: string) => {
+    setQuery(newQuery);
+    sessionStorage.setItem('TraceAnalyticsQuery', newQuery);
+  };
+  const setStartTimeWithStorage = (newStartTime: string) => {
+    setStartTime(newStartTime);
+    sessionStorage.setItem('TraceAnalyticsStartTime', newStartTime);
+  };
+  const setEndTimeWithStorage = (newEndTime: string) => {
+    setEndTime(newEndTime);
+    sessionStorage.setItem('TraceAnalyticsEndTime', newEndTime);
+  };
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const setToast = (title: string, color = 'success', text?: ReactChild, side?: string) => {
+    if (!text) text = '';
+    setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]);
+  };
+
+  useEffect(() => {
+    handleDataPrepperIndicesExistRequest(props.http, setDataPrepperIndicesExist)
+    handleJaegerIndicesExistRequest(props.http, setJaegerIndicesExist);
+  }, []);
+
+
+  const modes = [
+    { id: 'jaeger', title: 'Jaeger', 'data-test-subj': 'jaeger-mode' },
+    { id: 'data_prepper', title: 'Data Prepper', 'data-test-subj': 'data-prepper-mode' },
+  ];
+
+  useEffect(() => {
+    if (!sessionStorage.getItem('TraceAnalyticsMode')){
+      if (dataPrepperIndicesExist) {
+        setMode('data_prepper');
+      } else if (jaegerIndicesExist) {
+        setMode('jaeger');
+      }
+    }
+  }, [jaegerIndicesExist, dataPrepperIndicesExist]);
+
+  const dashboardBreadcrumbs = [
+    {
+      text: 'Trace analytics',
+      href: '#/trace_analytics/home',
+    },
+    {
+      text: 'Dashboard',
+      href: '#/trace_analytics/home',
+    },
+  ];
+
+  const serviceBreadcrumbs = [
+    {
+      text: 'Trace analytics',
+      href: '#/trace_analytics/home',
+    },
+    {
+      text: 'Services',
+      href: '#/trace_analytics/services',
+    },
+  ];
+
+  const traceBreadcrumbs = [
+    {
+      text: 'Trace analytics',
+      href: '#/trace_analytics/home',
+    },
+    {
+      text: 'Traces',
+      href: '#/trace_analytics/traces',
+    },
+  ];
+
+  const nameColumnAction = (item: any) =>
+    location.assign(`#/trace_analytics/services/${encodeURIComponent(item)}`);
+
+  const traceColumnAction = () => location.assign('#/trace_analytics/traces');
+
+  const traceIdColumnAction = (item: any) =>
+    location.assign(`#/trace_analytics/traces/${encodeURIComponent(item)}`);
+
+  const [appConfigs, _] = useState([]);
+
+  const commonProps: TraceAnalyticsComponentDeps = {
+    parentBreadcrumbs: props.parentBreadcrumbs,
+    http: props.http,
+    chrome: props.chrome,
+    query,
+    setQuery: setQueryWithStorage,
+    filters,
+    appConfigs: appConfigs,
+    setFilters: setFiltersWithStorage,
+    startTime,
+    setStartTime: setStartTimeWithStorage,
+    endTime,
+    setEndTime: setEndTimeWithStorage,
+    mode,
+    modes,
+    setMode: (mode: TraceAnalyticsMode) => {setMode(mode)},
+    jaegerIndicesExist,
+    dataPrepperIndicesExist,
+  };
+
+  return (
+    <>
+      <EuiGlobalToastList
+          toasts={toasts}
+          dismissToast={(removedToast) => {
+            setToasts(toasts.filter((toast) => toast.id !== removedToast.id));
+          }}
+          toastLifeTimeMs={6000}
+      />
+      <Route
+        exact
+        path={['/trace_analytics', '/trace_analytics/home']}
+        render={(routerProps) => (
+          <ObservabilitySideBar>
+            <Dashboard page="dashboard" childBreadcrumbs={dashboardBreadcrumbs} {...commonProps} setToast={setToast} toasts={toasts} />
+          </ObservabilitySideBar>
+        )}
+      />
+      <Route
+        exact
+        path="/trace_analytics/traces"
+        render={(routerProps) => (
+          <ObservabilitySideBar>
+            <Traces
+              page="traces"
+              childBreadcrumbs={traceBreadcrumbs}
+              traceIdColumnAction={traceIdColumnAction}
+              {...commonProps}
+            />
+          </ObservabilitySideBar>
+        )}
+      />
+      <Route
+        path="/trace_analytics/traces/:id+"
+        render={(routerProps) => (
+          <TraceView
+            parentBreadcrumbs={props.parentBreadcrumbs}
+            chrome={props.chrome}
+            http={props.http}
+            traceId={decodeURIComponent(routerProps.match.params.id)}
+            mode={mode}
+          />
+        )}
+      />
+      <Route
+        exact
+        path="/trace_analytics/services"
+        render={(routerProps) => (
+          <ObservabilitySideBar>
+            <Services
+              page="services"
+              childBreadcrumbs={serviceBreadcrumbs}
+              nameColumnAction={nameColumnAction}
+              traceColumnAction={traceColumnAction}
+              {...commonProps}
+            />
+          </ObservabilitySideBar>
+        )}
+      />
+      <Route
+        path="/trace_analytics/services/:id+"
+        render={(routerProps) => (
+          <ServiceView
+            serviceName={decodeURIComponent(routerProps.match.params.id)}
+            {...commonProps}
+            addFilter={(filter: FilterType) => {
+              for (const addedFilter of filters) {
+                if (
+                  addedFilter.field === filter.field &&
+                  addedFilter.operator === filter.operator &&
+                  addedFilter.value === filter.value
+                ) {
+                  return;
+                }
+              }
+              const newFilters = [...filters, filter];
+              setFiltersWithStorage(newFilters);
+            }}
+          />
+        )}
+      />
+    </>
+  );
+};