From 2613008cca91a8afd3dc72e9b452fa04d4cd36c0 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 10 Jan 2023 20:26:19 -0500
Subject: [PATCH] Support Jaeger data in trace-analytics (#150)

Signed-off-by: Derek Ho <dxho@amazon.com>
(cherry picked from commit f70041533baa9a826c6d928147309c9351d6c720)
---
 common/constants/explorer.ts                  |    1 +
 common/constants/trace_analytics.ts           |    5 +-
 .../service_config.test.tsx.snap              |    4 +-
 .../__tests__/create.test.tsx                 |   16 +-
 .../__tests__/service_config.test.tsx         |    4 +-
 .../components/application.tsx                |    5 +-
 .../config_components/service_config.tsx      |    3 +-
 .../config_components/trace_config.tsx        |    8 +-
 .../service_detail_flyout.tsx                 |   12 +-
 .../flyout_components/trace_detail_flyout.tsx |    2 +-
 .../flyout_components/trace_detail_render.tsx |   11 +-
 .../components/application_analytics/home.tsx |    7 +-
 .../explorer/events_views/docViewRow.tsx      |    6 +-
 .../events_views/trace_block/trace_block.tsx  |    5 +-
 .../__snapshots__/search_bar.test.tsx.snap    |    2 +
 .../__tests__/helper_functions.test.tsx       |    5 +-
 .../common/__tests__/search_bar.test.tsx      |    1 +
 .../__tests__/filter_edit_popover.test.tsx    |    2 +-
 .../filters/__tests__/filter_helpers.test.tsx |    6 +-
 .../common/filters/filter_helpers.tsx         |   16 +-
 .../components/common/filters/filters.tsx     |    6 +-
 .../components/common/helper_functions.tsx    |   54 +-
 .../error_rate_plt_.test.tsx.snap             |   20 +-
 .../throughput_plt.test.tsx.snap              |   16 +-
 .../common/plots/error_rate_plt.tsx           |   20 +-
 .../common/plots/throughput_plt.tsx           |   14 +-
 .../components/common/search_bar.tsx          |    1 +
 .../__snapshots__/dashboard.test.tsx.snap     | 5010 +++++++++++++----
 .../__snapshots__/mode_picker.test.tsx.snap   |  805 +++
 .../top_error_rates_table.test.tsx.snap       | 2195 ++++++++
 .../top_latency_table.test.tsx.snap           | 3167 +++++++++++
 .../dashboard/__tests__/dashboard.test.tsx    |   58 +-
 .../dashboard/__tests__/mode_picker.test.tsx  |   30 +
 .../__tests__/top_error_rates_table.test.tsx  |   76 +
 .../__tests__/top_latency_table.test.tsx      |   76 +
 .../components/dashboard/dashboard.tsx        |   12 +-
 .../dashboard/dashboard_content.tsx           |  246 +-
 .../components/dashboard/dashboard_table.tsx  |    3 +-
 .../components/dashboard/mode_picker.tsx      |   99 +
 .../dashboard/top_error_rates_table.tsx       |  273 +
 .../components/dashboard/top_groups_page.tsx  |   78 +
 .../dashboard/top_latency_table.tsx           |  407 ++
 .../__snapshots__/service_view.test.tsx.snap  |    1 +
 .../__snapshots__/services.test.tsx.snap      | 1745 +++++-
 .../services_table.test.tsx.snap              | 1562 ++++-
 .../services/__tests__/service_view.test.tsx  |    2 +-
 .../services/__tests__/services.test.tsx      |   59 +-
 .../__tests__/services_table.test.tsx         |   63 +-
 .../components/services/service_view.tsx      |   87 +-
 .../components/services/services.tsx          |    2 +
 .../components/services/services_content.tsx  |   39 +-
 .../components/services/services_table.tsx    |   29 +-
 .../span_detail_flyout.test.tsx.snap          |    1 +
 .../span_detail_panel.test.tsx.snap           |    1 +
 .../span_detail_table.test.tsx.snap           |   25 +
 .../__snapshots__/trace_view.test.tsx.snap    |    1 +
 .../__snapshots__/traces.test.tsx.snap        | 1733 +++++-
 .../__snapshots__/traces_table.test.tsx.snap  | 1391 ++++-
 .../__tests__/span_detail_flyout.test.tsx     |    2 +
 .../__tests__/span_detail_panel.test.tsx      |    2 +-
 .../__tests__/span_detail_table.test.tsx      |   25 +-
 .../traces/__tests__/trace_view.test.tsx      |    1 +
 .../traces/__tests__/traces.test.tsx          |   57 +-
 .../traces/__tests__/traces_table.test.tsx    |   43 +-
 .../components/traces/span_detail_flyout.tsx  |   36 +-
 .../components/traces/span_detail_panel.tsx   |   26 +-
 .../components/traces/span_detail_table.tsx   |   91 +-
 .../components/traces/trace_view.tsx          |   48 +-
 .../components/traces/traces.tsx              |    2 +
 .../components/traces/traces_content.tsx      |   21 +-
 .../components/traces/traces_table.tsx        |   91 +-
 public/components/trace_analytics/home.tsx    |   66 +-
 .../requests/dashboard_request_handler.ts     |  225 +-
 .../requests/queries/dashboard_queries.ts     |  716 ++-
 .../requests/queries/services_queries.ts      |  194 +-
 .../requests/queries/traces_queries.ts        |  225 +-
 .../requests/request_handler.ts               |   41 +-
 .../requests/services_request_handler.ts      |   32 +-
 .../requests/traces_request_handler.ts        |  101 +-
 server/routes/trace_analytics_dsl_router.ts   |   34 +-
 test/constants.ts                             |   57 +
 81 files changed, 19997 insertions(+), 1667 deletions(-)
 create mode 100644 public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/mode_picker.test.tsx.snap
 create mode 100644 public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/top_error_rates_table.test.tsx.snap
 create mode 100644 public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/top_latency_table.test.tsx.snap
 create mode 100644 public/components/trace_analytics/components/dashboard/__tests__/mode_picker.test.tsx
 create mode 100644 public/components/trace_analytics/components/dashboard/__tests__/top_error_rates_table.test.tsx
 create mode 100644 public/components/trace_analytics/components/dashboard/__tests__/top_latency_table.test.tsx
 create mode 100644 public/components/trace_analytics/components/dashboard/mode_picker.tsx
 create mode 100644 public/components/trace_analytics/components/dashboard/top_error_rates_table.tsx
 create mode 100644 public/components/trace_analytics/components/dashboard/top_groups_page.tsx
 create mode 100644 public/components/trace_analytics/components/dashboard/top_latency_table.tsx

diff --git a/common/constants/explorer.ts b/common/constants/explorer.ts
index 75393f1775..73a763d27c 100644
--- a/common/constants/explorer.ts
+++ b/common/constants/explorer.ts
@@ -43,6 +43,7 @@ export const REDIRECT_TAB = 'redirect_tab';
 export const PAGE_SIZE = 50;
 export const DEFAULT_COLUMNS = ['', 'Time', '_source'];
 export const OTEL_TRACE_ID = 'traceId';
+export const JAEGER_TRACE_ID = 'traceID';
 export const DATE_PICKER_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 export const TIME_INTERVAL_OPTIONS = [
   {
diff --git a/common/constants/trace_analytics.ts b/common/constants/trace_analytics.ts
index f480a25f6d..e1ea188715 100644
--- a/common/constants/trace_analytics.ts
+++ b/common/constants/trace_analytics.ts
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+export const JAEGER_INDEX_NAME = '*jaeger-span-*';
+export const JAEGER_SERVICE_INDEX_NAME = '*jaeger-service*';
 export const DATA_PREPPER_INDEX_NAME = 'otel-v1-apm-span-*';
 export const DATA_PREPPER_SERVICE_INDEX_NAME = 'otel-v1-apm-service-map*';
 export const TRACE_ANALYTICS_DATE_FORMAT = 'MM/DD/YYYY HH:mm:ss';
@@ -13,5 +15,6 @@ export const SERVICE_MAP_MAX_EDGES = 1000;
 export const TRACES_MAX_NUM = 3000;
 export const TRACE_ANALYTICS_DOCUMENTATION_LINK = 'https://opensearch.org/docs/latest/observability-plugin/trace/index/';
 
-export const TRACE_ANALYTICS_INDICES_ROUTE = '/api/observability/trace_analytics/indices';
+export const TRACE_ANALYTICS_JAEGER_INDICES_ROUTE = '/api/observability/trace_analytics/jaeger_indices';
+export const TRACE_ANALYTICS_DATA_PREPPER_INDICES_ROUTE = '/api/observability/trace_analytics/data_prepper_indices';
 export const TRACE_ANALYTICS_DSL_ROUTE = '/api/observability/trace_analytics/query';
diff --git a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
index 72c328ba59..8b128989e8 100644
--- a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
+++ b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`Service Config component renders empty service config 1`] = `
   endTime="now"
   filters={Array []}
   http={[MockFunction]}
-  indicesExist={true}
+  mode="data_prepper"
   name=""
   parentBreadcrumb={
     Object {
@@ -1101,7 +1101,7 @@ exports[`Service Config component renders with one service selected 1`] = `
     ]
   }
   http={[MockFunction]}
-  indicesExist={true}
+  mode="data_prepper"
   name=""
   parentBreadcrumb={
     Object {
diff --git a/public/components/application_analytics/__tests__/create.test.tsx b/public/components/application_analytics/__tests__/create.test.tsx
index 5fda0c03a8..15cfb1c6c5 100644
--- a/public/components/application_analytics/__tests__/create.test.tsx
+++ b/public/components/application_analytics/__tests__/create.test.tsx
@@ -56,9 +56,9 @@ describe('Create Page', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={true}
         name=""
         description=""
+        mode='data_prepper'
         setNameWithStorage={setNameWithStorage}
         setDescriptionWithStorage={setDescriptionWithStorage}
         setQueryWithStorage={setQueryWithStorage}
@@ -120,9 +120,9 @@ describe('Create Page', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={true}
         name="Chic Application"
         description="This is my chic application."
+        mode='data_prepper'   
         setNameWithStorage={setNameWithStorage}
         setDescriptionWithStorage={setDescriptionWithStorage}
         setQueryWithStorage={setQueryWithStorage}
@@ -184,9 +184,9 @@ describe('Create Page', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={true}
         name=""
         description=""
+        mode='data_prepper'
         setNameWithStorage={setNameWithStorage}
         setDescriptionWithStorage={setDescriptionWithStorage}
         setQueryWithStorage={setQueryWithStorage}
@@ -251,9 +251,9 @@ describe('Create Page', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={true}
         name=""
         description=""
+        mode='data_prepper'
         setNameWithStorage={setNameWithStorage}
         setDescriptionWithStorage={setDescriptionWithStorage}
         setQueryWithStorage={setQueryWithStorage}
@@ -327,9 +327,9 @@ describe('Create Page', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={true}
         name=""
         description=""
+        mode='data_prepper'
         setNameWithStorage={setNameWithStorage}
         setDescriptionWithStorage={setDescriptionWithStorage}
         setQueryWithStorage={setQueryWithStorage}
@@ -403,9 +403,9 @@ describe('Create Page', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={true}
         name=""
         description=""
+        mode='data_prepper'
         setNameWithStorage={setNameWithStorage}
         setDescriptionWithStorage={setDescriptionWithStorage}
         setQueryWithStorage={setQueryWithStorage}
@@ -479,9 +479,9 @@ describe('Create Page', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={true}
         name=""
         description=""
+        mode='data_prepper'
         setNameWithStorage={setNameWithStorage}
         setDescriptionWithStorage={setDescriptionWithStorage}
         setQueryWithStorage={setQueryWithStorage}
@@ -555,9 +555,9 @@ describe('Create Page', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={true}
         name=""
         description=""
+        mode='data_prepper'
         setNameWithStorage={setNameWithStorage}
         setDescriptionWithStorage={setDescriptionWithStorage}
         setQueryWithStorage={setQueryWithStorage}
diff --git a/public/components/application_analytics/__tests__/service_config.test.tsx b/public/components/application_analytics/__tests__/service_config.test.tsx
index d574ba9427..e12847295a 100644
--- a/public/components/application_analytics/__tests__/service_config.test.tsx
+++ b/public/components/application_analytics/__tests__/service_config.test.tsx
@@ -46,7 +46,7 @@ describe('Service Config component', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={true}
+        mode='data_prepper'
         dslService={dslService}
         selectedServices={[]}
         setSelectedServices={setSelectedServices}
@@ -108,7 +108,7 @@ describe('Service Config component', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={true}
+        mode='data_prepper'
         dslService={dslService}
         selectedServices={[]}
         setSelectedServices={setSelectedServices}
diff --git a/public/components/application_analytics/components/application.tsx b/public/components/application_analytics/components/application.tsx
index 69006f179f..b758942583 100644
--- a/public/components/application_analytics/components/application.tsx
+++ b/public/components/application_analytics/components/application.tsx
@@ -113,6 +113,7 @@ export function Application(props: AppDetailProps) {
     setFilters,
     callback,
     queryManager,
+    mode,
   } = props;
   const [application, setApplication] = useState<ApplicationType>({
     id: '',
@@ -230,7 +231,7 @@ export function Application(props: AppDetailProps) {
   }, [appId, application.name]);
 
   useEffect(() => {
-    const DSL = filtersToDsl(filters, query, appStartTime, appEndTime, 'app', appConfigs);
+    const DSL = filtersToDsl(mode, filters, query, appStartTime, appEndTime, 'app', appConfigs);
     setSpanDSL(DSL);
   }, [filters, appConfigs, query, appStartTime, appEndTime]);
 
@@ -350,6 +351,7 @@ export function Application(props: AppDetailProps) {
             openFlyout={setSpanFlyoutId}
             DSL={spanDSL}
             setTotal={setTotalSpans}
+            mode='data_prepper'
           />
         </EuiPanel>
       </>
@@ -563,6 +565,7 @@ export function Application(props: AppDetailProps) {
             isFlyoutVisible={!!spanFlyoutId}
             closeFlyout={closeSpanFlyout}
             addSpanFilter={addSpanFilter}
+            mode="data_prepper"
           />
         )}
         {traceFlyoutId && (
diff --git a/public/components/application_analytics/components/config_components/service_config.tsx b/public/components/application_analytics/components/config_components/service_config.tsx
index 30b78adcdc..bfeb5029fa 100644
--- a/public/components/application_analytics/components/config_components/service_config.tsx
+++ b/public/components/application_analytics/components/config_components/service_config.tsx
@@ -40,6 +40,7 @@ export const ServiceConfig = (props: ServiceConfigProps) => {
     selectedServices,
     setSelectedServices,
   } = props;
+  const { mode } = props;
   const [servicesOpen, setServicesOpen] = useState(false);
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
   const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
@@ -49,7 +50,7 @@ export const ServiceConfig = (props: ServiceConfigProps) => {
   const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
 
   useEffect(() => {
-    handleServiceMapRequest(http, dslService, setServiceMap);
+    handleServiceMapRequest(http, dslService, mode, setServiceMap);
   }, []);
 
   useEffect(() => {
diff --git a/public/components/application_analytics/components/config_components/trace_config.tsx b/public/components/application_analytics/components/config_components/trace_config.tsx
index 92d0d40bf1..afa329aad4 100644
--- a/public/components/application_analytics/components/config_components/trace_config.tsx
+++ b/public/components/application_analytics/components/config_components/trace_config.tsx
@@ -17,7 +17,7 @@ import {
 } from '@elastic/eui';
 import DSLService from 'public/services/requests/dsl';
 import React, { useEffect, useState } from 'react';
-import { FilterType } from 'public/components/trace_analytics/components/common/filters/filters';
+import { FilterType } from '../../../../../public/components/trace_analytics/components/common/filters/filters';
 import { OptionType } from '../../../../../common/types/application_analytics';
 import { filtersToDsl } from '../../../trace_analytics/components/common/helper_functions';
 import { handleDashboardRequest } from '../../../trace_analytics/requests/dashboard_request_handler';
@@ -42,6 +42,7 @@ export const TraceConfig = (props: TraceConfigProps) => {
     endTime,
     selectedTraces,
     setSelectedTraces,
+    mode
   } = props;
   const [traceOpen, setTraceOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -54,9 +55,9 @@ export const TraceConfig = (props: TraceConfigProps) => {
 
   useEffect(() => {
     setLoading(true);
-    const timeFilterDSL = filtersToDsl([], '', startTime, endTime);
+    const timeFilterDSL = filtersToDsl(mode, [], '', startTime, endTime);
     const latencyTrendStartTime = dateMath.parse(endTime, { roundUp: true })?.subtract(24, 'hours').toISOString()!;
-    const latencyTrendDSL = filtersToDsl(filters, query, latencyTrendStartTime, endTime);
+    const latencyTrendDSL = filtersToDsl(mode, filters, query, latencyTrendStartTime, endTime);
     handleDashboardRequest(
       http,
       dslService,
@@ -64,6 +65,7 @@ export const TraceConfig = (props: TraceConfigProps) => {
       latencyTrendDSL,
       traceItems,
       setTraceItems,
+      mode,
       setPercentileMap
     ).then(() => setLoading(false));
     setRedirect(false);
diff --git a/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx b/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx
index 07a7e0a5a2..ecfc017542 100644
--- a/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx
+++ b/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx
@@ -19,7 +19,7 @@ import {
   handleServiceMapRequest,
   handleServiceViewRequest,
 } from '../../../../../public/components/trace_analytics/requests/services_request_handler';
-import { filtersToDsl } from '../../../../../public/components/trace_analytics/components/common/helper_functions';
+import { filtersToDsl, processTimeStamp } from '../../../../../public/components/trace_analytics/components/common/helper_functions';
 import { ServiceMap } from '../../../../../public/components/trace_analytics/components/services';
 import { ServiceObject } from '../../../../../public/components/trace_analytics/components/common/plots/service_map';
 import { SpanDetailTable } from '../../../../../public/components/trace_analytics/components/traces/span_detail_table';
@@ -44,6 +44,7 @@ export function ServiceDetailFlyout(props: ServiceFlyoutProps) {
     query,
     closeServiceFlyout,
     openSpanFlyout,
+    mode,
   } = props;
   const [fields, setFields] = useState<any>({});
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
@@ -110,16 +111,17 @@ export function ServiceDetailFlyout(props: ServiceFlyoutProps) {
           DSL={DSL}
           openFlyout={openSpanFlyout}
           setTotal={setTotal}
+          mode={mode}
         />
       </>
     );
   }, [serviceName, fields, serviceMap, DSL, serviceMapIdSelected]);
 
   useEffect(() => {
-    const serviceDSL = filtersToDsl(filters, query, startTime, endTime, 'app', appConfigs);
-    handleServiceViewRequest(serviceName, http, serviceDSL, setFields);
-    handleServiceMapRequest(http, serviceDSL, setServiceMap, serviceName);
-    const spanDSL = filtersToDsl(filters, query, startTime, endTime, 'app', appConfigs);
+    const serviceDSL = filtersToDsl(mode, filters, query, processTimeStamp(startTime, mode), processTimeStamp(endTime, mode), 'app', appConfigs);
+    handleServiceViewRequest(serviceName, http, serviceDSL, setFields, mode);
+    handleServiceMapRequest(http, serviceDSL, mode, setServiceMap, serviceName);
+    const spanDSL = filtersToDsl(mode, filters, query, startTime, endTime, 'app', appConfigs);
     spanDSL.query.bool.must.push({
       term: {
         serviceName,
diff --git a/public/components/application_analytics/components/flyout_components/trace_detail_flyout.tsx b/public/components/application_analytics/components/flyout_components/trace_detail_flyout.tsx
index ce687f306c..a5ec5569a2 100644
--- a/public/components/application_analytics/components/flyout_components/trace_detail_flyout.tsx
+++ b/public/components/application_analytics/components/flyout_components/trace_detail_flyout.tsx
@@ -17,7 +17,7 @@ interface TraceFlyoutProps extends TraceAnalyticsComponentDeps {
 export function TraceDetailFlyout(props: TraceFlyoutProps) {
   const { traceId, http, closeTraceFlyout, openSpanFlyout } = props;
   const renderContent = (
-    <TraceDetailRender traceId={traceId} http={http} openSpanFlyout={openSpanFlyout} />
+    <TraceDetailRender traceId={traceId} http={http} openSpanFlyout={openSpanFlyout} mode='data_prepper'/>
   );
   return (
     <EuiFlyout data-test-subj="traceDetailFlyout" onClose={closeTraceFlyout} size="m">
diff --git a/public/components/application_analytics/components/flyout_components/trace_detail_render.tsx b/public/components/application_analytics/components/flyout_components/trace_detail_render.tsx
index 34a91e01b1..bb55a94d96 100644
--- a/public/components/application_analytics/components/flyout_components/trace_detail_render.tsx
+++ b/public/components/application_analytics/components/flyout_components/trace_detail_render.tsx
@@ -14,14 +14,16 @@ import {
 } from '../../../trace_analytics/requests/traces_request_handler';
 import { HttpStart } from '../../../../../../../src/core/public';
 import { getListItem } from '../../helpers/utils';
+import { TraceAnalyticsMode } from '../../../../../public/components/trace_analytics/home';
 
 interface TraceDetailRenderProps {
   traceId: string;
   http: HttpStart;
   openSpanFlyout: (spanId: string) => void;
+  mode : TraceAnalyticsMode
 }
 
-export const TraceDetailRender = ({ traceId, http, openSpanFlyout }: TraceDetailRenderProps) => {
+export const TraceDetailRender = ({ traceId, http, openSpanFlyout, mode }: TraceDetailRenderProps) => {
   const [fields, setFields] = useState<any>({});
   const [serviceBreakdownData, setServiceBreakdownData] = useState([]);
   const [payloadData, setPayloadData] = useState('');
@@ -66,6 +68,7 @@ export const TraceDetailRender = ({ traceId, http, openSpanFlyout }: TraceDetail
           colorMap={colorMap}
           page="app"
           openSpanFlyout={openSpanFlyout}
+          mode={mode}
         />
         <EuiSpacer size="xs" />
         <EuiHorizontalRule margin="s" />
@@ -83,9 +86,9 @@ export const TraceDetailRender = ({ traceId, http, openSpanFlyout }: TraceDetail
   }, [traceId, fields, serviceBreakdownData, colorMap, payloadData]);
 
   useEffect(() => {
-    handleTraceViewRequest(traceId, http, fields, setFields);
-    handleServicesPieChartRequest(traceId, http, setServiceBreakdownData, setColorMap);
-    handlePayloadRequest(traceId, http, payloadData, setPayloadData);
+    handleTraceViewRequest(traceId, http, fields, setFields, mode);
+    handleServicesPieChartRequest(traceId, http, setServiceBreakdownData, setColorMap, mode);
+    handlePayloadRequest(traceId, http, payloadData, setPayloadData, mode);
   }, [traceId]);
 
   return renderContent;
diff --git a/public/components/application_analytics/home.tsx b/public/components/application_analytics/home.tsx
index 4e44470fd3..89dec51cfa 100644
--- a/public/components/application_analytics/home.tsx
+++ b/public/components/application_analytics/home.tsx
@@ -20,7 +20,7 @@ import { Application } from './components/application';
 import { CreateApp } from './components/create';
 import { TraceAnalyticsComponentDeps, TraceAnalyticsCoreDeps } from '../trace_analytics/home';
 import { FilterType } from '../trace_analytics/components/common/filters/filters';
-import { handleIndicesExistRequest } from '../trace_analytics/requests/request_handler';
+import { handleDataPrepperIndicesExistRequest } from '../trace_analytics/requests/request_handler';
 import { ObservabilitySideBar } from '../common/side_nav';
 import { NotificationsStart } from '../../../../../src/core/public';
 import { APP_ANALYTICS_API_PREFIX } from '../../../common/constants/application_analytics';
@@ -114,7 +114,7 @@ export const Home = (props: HomeProps) => {
   };
 
   useEffect(() => {
-    handleIndicesExistRequest(http, setIndicesExist);
+    handleDataPrepperIndicesExistRequest(http, setIndicesExist);
   }, []);
 
   const commonProps: AppAnalyticsComponentDeps = {
@@ -137,7 +137,8 @@ export const Home = (props: HomeProps) => {
     setStartTime,
     endTime,
     setEndTime,
-    indicesExist,
+    mode: 'data_prepper',
+    dataPrepperIndicesExist:  indicesExist 
   };
 
   const setToast = (title: string, color = 'success', text?: ReactChild) => {
diff --git a/public/components/event_analytics/explorer/events_views/docViewRow.tsx b/public/components/event_analytics/explorer/events_views/docViewRow.tsx
index e1d0342156..c0da0366ab 100644
--- a/public/components/event_analytics/explorer/events_views/docViewRow.tsx
+++ b/public/components/event_analytics/explorer/events_views/docViewRow.tsx
@@ -12,7 +12,7 @@ import { useEffect } from 'react';
 import { IExplorerFields, IField } from '../../../../../common/types/explorer';
 import { DocFlyout } from './doc_flyout';
 import { HttpStart } from '../../../../../../../src/core/public';
-import { OTEL_TRACE_ID, DATE_PICKER_FORMAT } from '../../../../../common/constants/explorer';
+import { OTEL_TRACE_ID, DATE_PICKER_FORMAT, JAEGER_TRACE_ID } from '../../../../../common/constants/explorer';
 import { SurroundingFlyout } from './surrounding_flyout';
 import PPLService from '../../../../services/requests/ppl';
 import { isValidTraceId } from '../../utils';
@@ -77,13 +77,13 @@ export const DocViewRow = forwardRef((props: IDocViewRowProps, ref) => {
         <span>
           <dl className="source truncate-by-height">
             {toPairs(doc).map((entry: string[]) => {
-              const isTraceField = entry[0] === OTEL_TRACE_ID;
+              const isTraceField = (entry[0] === OTEL_TRACE_ID || entry[0] === JAEGER_TRACE_ID);
               return (
                 <span key={uniqueId('grid-desc')}>
                   <dt>{entry[0]}:</dt>
                   <dd>
                     <span>
-                      {isTraceField && isValidTraceId(entry[1]) && !isFlyout ? (
+                      {isTraceField && (isValidTraceId(entry[1]) || entry[0] === JAEGER_TRACE_ID) && !isFlyout ? (
                         <EuiLink onClick={tracesFlyout}>{entry[1]}</EuiLink>
                       ) : (
                         entry[1]
diff --git a/public/components/event_analytics/explorer/events_views/trace_block/trace_block.tsx b/public/components/event_analytics/explorer/events_views/trace_block/trace_block.tsx
index e90476c926..98d62ddbd7 100644
--- a/public/components/event_analytics/explorer/events_views/trace_block/trace_block.tsx
+++ b/public/components/event_analytics/explorer/events_views/trace_block/trace_block.tsx
@@ -22,7 +22,7 @@ interface props {
 }
 
 export const TraceBlock = ({ http, hit, logTraceId }: props) => {
-  if (logTraceId === '' || !isValidTraceId(logTraceId)) {
+  if ((!hit.traceID || hit.traceID.length === 0) && (logTraceId === '' || !isValidTraceId(logTraceId))){
     return (
       <>
         <EuiCallOut iconType="help" title="No Trace Id found in the event.">
@@ -42,6 +42,7 @@ export const TraceBlock = ({ http, hit, logTraceId }: props) => {
       </>
     );
   }
+  const mode = (!hit.traceID || hit.traceID.length === 0) ? 'data_prepper' : 'jaeger'
 
-  return <TraceDetailRender traceId={logTraceId} http={http} />;
+  return <TraceDetailRender traceId={hit.traceID || logTraceId} http={http} mode={mode}/>;
 };
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
index 9c3997a729..ae5d60c25d 100644
--- 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
@@ -375,6 +375,7 @@ exports[`Search bar components renders search bar 1`] = `
   appConfigs={Array []}
   endTime="now"
   filters={Array []}
+  mode="data_prepper"
   page="dashboard"
   query="test"
   refresh={[MockFunction]}
@@ -974,6 +975,7 @@ exports[`Search bar components renders search bar 1`] = `
   <Filters
     appConfigs={Array []}
     filters={Array []}
+    mode="data_prepper"
     page="dashboard"
     setFilters={[MockFunction]}
   >
diff --git a/public/components/trace_analytics/components/common/__tests__/helper_functions.test.tsx b/public/components/trace_analytics/components/common/__tests__/helper_functions.test.tsx
index 730db77b5a..335bd6c8bf 100644
--- a/public/components/trace_analytics/components/common/__tests__/helper_functions.test.tsx
+++ b/public/components/trace_analytics/components/common/__tests__/helper_functions.test.tsx
@@ -5,6 +5,7 @@
 
 import { configure, mount, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
+import { TraceAnalyticsMode } from 'public/components/trace_analytics/home';
 import React from 'react';
 import { TEST_SERVICE_MAP, TEST_SERVICE_MAP_GRAPH } from '../../../../../../test/constants';
 import {
@@ -37,7 +38,7 @@ describe('Helper functions', () => {
 
   it('renders no match and missing configuration messages', () => {
     const noMatchMessage = shallow(<NoMatchMessage size="s" />);
-    const missingConfigurationMessage = shallow(<MissingConfigurationMessage />);
+    const missingConfigurationMessage = shallow(<MissingConfigurationMessage mode='data_prepper'/>)
     expect(noMatchMessage).toMatchSnapshot();
     expect(missingConfigurationMessage).toMatchSnapshot();
   });
@@ -120,6 +121,7 @@ describe('Helper functions', () => {
   it('converts filters to DSL', () => {
     const getTestDslFromFilters = (field = 'traceGroup', operator = 'exists') =>
       filtersToDsl(
+        'data_prepper',
         [
           {
             field,
@@ -148,6 +150,7 @@ describe('Helper functions', () => {
     );
 
     const customDSL = filtersToDsl(
+      'data_prepper',
       [
         {
           field: 'serviceName',
diff --git a/public/components/trace_analytics/components/common/__tests__/search_bar.test.tsx b/public/components/trace_analytics/components/common/__tests__/search_bar.test.tsx
index 9e0c8ed124..3a44d6535e 100644
--- a/public/components/trace_analytics/components/common/__tests__/search_bar.test.tsx
+++ b/public/components/trace_analytics/components/common/__tests__/search_bar.test.tsx
@@ -40,6 +40,7 @@ describe('Search bar components', () => {
         filters={[]}
         setFilters={setFilters}
         appConfigs={[]}
+        mode={'data_prepper'}
       />
     );
     expect(wrapper).toMatchSnapshot();
diff --git a/public/components/trace_analytics/components/common/filters/__tests__/filter_edit_popover.test.tsx b/public/components/trace_analytics/components/common/filters/__tests__/filter_edit_popover.test.tsx
index 4d2b0f401c..c179423840 100644
--- a/public/components/trace_analytics/components/common/filters/__tests__/filter_edit_popover.test.tsx
+++ b/public/components/trace_analytics/components/common/filters/__tests__/filter_edit_popover.test.tsx
@@ -16,7 +16,7 @@ describe('Filter popover component', () => {
   it('renders filter popover', () => {
     const setFilter = jest.fn();
     const closePopover = jest.fn();
-    const filterFieldOptions = getFilterFields('dashboard').map((field) => ({ label: field }));
+    const filterFieldOptions = getFilterFields('data_prepper', 'dashboard').map((field) => ({ label: field }));
     const wrapper = mount(
       <FilterEditPopover
         filterFieldOptions={filterFieldOptions}
diff --git a/public/components/trace_analytics/components/common/filters/__tests__/filter_helpers.test.tsx b/public/components/trace_analytics/components/common/filters/__tests__/filter_helpers.test.tsx
index 9084e4207c..a2c0f33e30 100644
--- a/public/components/trace_analytics/components/common/filters/__tests__/filter_helpers.test.tsx
+++ b/public/components/trace_analytics/components/common/filters/__tests__/filter_helpers.test.tsx
@@ -17,7 +17,7 @@ describe('Filter helper functions', () => {
   configure({ adapter: new Adapter() });
 
   it('returns fields by page', () => {
-    const fields = getFilterFields('dashboard');
+    const fields = getFilterFields('data_prepper', 'dashboard');
     expect(fields).toEqual([
       'traceGroup',
       'serviceName',
@@ -28,8 +28,8 @@ describe('Filter helper functions', () => {
   });
 
   it('returns valid fields by page', () => {
-    const dashboardFields = getValidFilterFields('dashboard');
-    const servicesFields = getValidFilterFields('services');
+    const dashboardFields = getValidFilterFields('data_prepper', 'dashboard');
+    const servicesFields = getValidFilterFields('data_prepper', 'services');
     expect(dashboardFields).toEqual([
       'traceGroup',
       'serviceName',
diff --git a/public/components/trace_analytics/components/common/filters/filter_helpers.tsx b/public/components/trace_analytics/components/common/filters/filter_helpers.tsx
index 1410bfea00..d2e52fee10 100644
--- a/public/components/trace_analytics/components/common/filters/filter_helpers.tsx
+++ b/public/components/trace_analytics/components/common/filters/filter_helpers.tsx
@@ -11,20 +11,26 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import _ from 'lodash';
+import { TraceAnalyticsMode } from 'public/components/trace_analytics/home';
 import React from 'react';
 
-const getFields = (page: 'dashboard' | 'traces' | 'services' | 'app') =>
-  ({
+const getFields = (mode: TraceAnalyticsMode, page: 'dashboard' | 'traces' | 'services' | 'app') =>
+  (mode === 'data_prepper' ? {
     dashboard: ['traceGroup', 'serviceName', 'error', 'status.message', 'latency'],
     traces: ['traceId', 'traceGroup', 'serviceName', 'error', 'status.message', 'latency'],
     services: ['traceGroup', 'serviceName', 'error', 'status.message', 'latency'],
     app: ['traceId', 'traceGroup', 'serviceName'],
+  }[page] : {
+    dashboard: ['process.serviceName', 'error', 'latency'],
+    traces: ['traceID', 'operationName', 'process.serviceName', 'error', 'latency'],
+    services: ['process.serviceName', 'error', 'latency'],
+    app: ['traceID', 'process.serviceName'],
   }[page]);
 // filters will take effect and can be manually added
-export const getFilterFields = (page: 'dashboard' | 'traces' | 'services' | 'app') => getFields(page);
+export const getFilterFields = (mode: TraceAnalyticsMode, page: 'dashboard' | 'traces' | 'services' | 'app') => getFields(mode, page);
 // filters will take effect
-export const getValidFilterFields = (page: 'dashboard' | 'traces' | 'services' | 'app') => {
-  const fields = getFields(page);
+export const getValidFilterFields = (mode: TraceAnalyticsMode, page: 'dashboard' | 'traces' | 'services' | 'app') => {
+  const fields = getFields(mode, page);
   if (page !== 'services') return [...fields, 'Latency percentile within trace group'];
   return fields;
 };
diff --git a/public/components/trace_analytics/components/common/filters/filters.tsx b/public/components/trace_analytics/components/common/filters/filters.tsx
index d5a296b151..ea06985eba 100644
--- a/public/components/trace_analytics/components/common/filters/filters.tsx
+++ b/public/components/trace_analytics/components/common/filters/filters.tsx
@@ -16,6 +16,7 @@ import {
   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';
@@ -34,6 +35,7 @@ export interface FiltersProps {
   filters: FilterType[];
   appConfigs?: FilterType[];
   setFilters: (filters: FilterType[]) => void;
+  mode: TraceAnalyticsMode;
 }
 
 interface FiltersOwnProps extends FiltersProps {
@@ -50,9 +52,9 @@ export function Filters(props: FiltersOwnProps) {
     props.setFilters(newFilters);
   };
 
-  const validFilterFields = useMemo(() => getValidFilterFields(props.page), [props.page]);
+  const validFilterFields = useMemo(() => getValidFilterFields(props.mode, props.page), [props.page]);
   const filterFieldOptions = useMemo(
-    () => getFilterFields(props.page).map((field) => ({ label: field })),
+    () => getFilterFields(props.mode, props.page).map((field) => ({ label: field })),
     [props.page]
   );
 
diff --git a/public/components/trace_analytics/components/common/helper_functions.tsx b/public/components/trace_analytics/components/common/helper_functions.tsx
index 04e48f6b15..f93222fb2e 100644
--- a/public/components/trace_analytics/components/common/helper_functions.tsx
+++ b/public/components/trace_analytics/components/common/helper_functions.tsx
@@ -13,8 +13,11 @@ import {
   DATA_PREPPER_INDEX_NAME,
   DATA_PREPPER_SERVICE_INDEX_NAME,
   TRACE_ANALYTICS_DOCUMENTATION_LINK,
+  JAEGER_INDEX_NAME,
+  JAEGER_SERVICE_INDEX_NAME,
 } from '../../../../../common/constants/trace_analytics';
 import { uiSettingsService } from '../../../../../common/utils';
+import { TraceAnalyticsMode } from '../../home';
 import { serviceMapColorPalette } from './color_palette';
 import { FilterType } from './filters/filters';
 import { ServiceObject } from './plots/service_map';
@@ -48,14 +51,14 @@ export function NoMatchMessage(props: { size: SpacerSize }) {
   );
 }
 
-export function MissingConfigurationMessage() {
+export function MissingConfigurationMessage(props: {mode: TraceAnalyticsMode}) {
   return (
     <>
       <EuiEmptyPrompt
         title={<h2>Trace Analytics not set up</h2>}
         body={
           <EuiText>
-            {`The indices required for trace analytics (${DATA_PREPPER_INDEX_NAME} and ${DATA_PREPPER_SERVICE_INDEX_NAME}) do not exist or you do not have permission to access them.`}
+            {`The indices required for trace analytics (${props.mode === 'jaeger' ? JAEGER_INDEX_NAME : DATA_PREPPER_INDEX_NAME} and ${props.mode === 'jaeger' ? JAEGER_SERVICE_INDEX_NAME : DATA_PREPPER_SERVICE_INDEX_NAME}) do not exist or you do not have permission to access them.`}
           </EuiText>
         }
         actions={
@@ -73,6 +76,15 @@ export function MissingConfigurationMessage() {
   );
 }
 
+// Processes time (like 'now-5y') to microseconds for jaeger since this is how they store the start time. Otherwise leave it the same.
+export function processTimeStamp(time: string, mode: TraceAnalyticsMode) {
+  if (mode === 'jaeger') {
+    const timeMoment = dateMath.parse(time)!;
+    return timeMoment.unix() * 1000000;
+  }
+  return time;
+}
+
 export function renderBenchmark(value: number) {
   if (typeof value !== 'number') return null;
   const benchmarkColor = value === 0 ? '#9ea8a9' : value > 0 ? '#c23f25' : '#3f7e23';
@@ -89,6 +101,16 @@ export function nanoToMilliSec(nano: number) {
   return nano / 1000000;
 }
 
+export function microToMilliSec(micro: number) {
+  if (typeof micro !== 'number') return 0;
+  return micro / 1000;
+}
+
+export function milliToMicroSec(ms: number) {
+  if (typeof ms !== 'number') return 0;
+  return ms * 1000;
+}
+
 export function milliToNanoSec(ms: number) {
   if (typeof ms !== 'number') return 0;
   return ms * 1000000;
@@ -294,10 +316,11 @@ export const getPercentileFilter = (
 };
 
 export const filtersToDsl = (
+  mode: TraceAnalyticsMode,
   filters: FilterType[],
   query: string,
-  startTime: string,
-  endTime: string,
+  startTime: any,
+  endTime: any,
   page?: string,
   appConfigs: FilterType[] = []
 ) => {
@@ -358,8 +381,19 @@ export const filtersToDsl = (
 
       let filterQuery = {};
       let field = filter.field;
-      if (field === 'latency') field = 'traceGroupFields.durationInNanos';
-      else if (field === 'error') field = 'traceGroupFields.statusCode';
+      if (field === 'latency'){
+        if (mode === 'data_prepper') {
+          field = 'traceGroupFields.durationInNanos';
+        } else if (mode === 'jaeger') {
+          field = 'duration';
+        }
+      } else if (field === 'error') {
+        if (mode === 'data_prepper') {
+          field = 'traceGroupFields.statusCode';
+        } else if (mode === 'jaeger') {
+          field = 'tag.error'
+        }
+      }
       let value;
 
       switch (filter.operator) {
@@ -380,6 +414,10 @@ export const filtersToDsl = (
             value = milliToNanoSec(value);
           } else if (field === 'traceGroupFields.statusCode') {
             value = value[0].label === 'true' ? '2' : '0';
+          } else if (field === 'duration') {
+            value = milliToMicroSec(parseFloat(value));
+          } else if (field === 'tag.error') {
+            value = value[0].label === 'true' ? true : false;
           }
 
           filterQuery = {
@@ -398,6 +436,10 @@ export const filtersToDsl = (
             if (range.lte) range.lte = milliToNanoSec(parseInt(range.lte || '')).toString();
             if (range.gte) range.gte = milliToNanoSec(parseInt(range.gte || '')).toString();
           }
+          if (field === 'duration') {
+            if (range.lte) range.lte = milliToMicroSec(parseInt(range.lte || '')).toString();
+            if (range.gte) range.gte = milliToMicroSec(parseInt(range.gte || '')).toString();
+          }
           filterQuery = {
             range: {
               [field]: range,
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/error_rate_plt_.test.tsx.snap b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/error_rate_plt_.test.tsx.snap
index a996b25431..f08a4f459f 100644
--- a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/error_rate_plt_.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/error_rate_plt_.test.tsx.snap
@@ -10,11 +10,21 @@ exports[`Error rate plot component renders error rate plot 1`] = `
       }
     }
   >
-    <PanelTitle
-      title="Trace error rate over time"
-    />
-    <EuiHorizontalRule
-      margin="m"
+    <EuiFlexGroup
+      gutterSize="xs"
+      justifyContent="spaceBetween"
+    >
+      <PanelTitle
+        title="Trace error rate over time"
+      />
+      <EuiButtonGroup
+        buttonSize="s"
+        color="text"
+        onChange={[Function]}
+      />
+    </EuiFlexGroup>
+    <EuiSpacer
+      size="m"
     />
     <Plt
       data={
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/throughput_plt.test.tsx.snap b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/throughput_plt.test.tsx.snap
index 49b00d65e1..200de55a57 100644
--- a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/throughput_plt.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/throughput_plt.test.tsx.snap
@@ -10,9 +10,19 @@ exports[`Throughput plot component renders throughput plot 1`] = `
       }
     }
   >
-    <PanelTitle
-      title="Traces over time"
-    />
+    <EuiFlexGroup
+      gutterSize="xs"
+      justifyContent="spaceBetween"
+    >
+      <PanelTitle
+        title="Traces over time"
+      />
+      <EuiButtonGroup
+        buttonSize="s"
+        color="text"
+        onChange={[Function]}
+      />
+    </EuiFlexGroup>
     <EuiHorizontalRule
       margin="m"
     />
diff --git a/public/components/trace_analytics/components/common/plots/error_rate_plt.tsx b/public/components/trace_analytics/components/common/plots/error_rate_plt.tsx
index 7486245361..0ef040529e 100644
--- a/public/components/trace_analytics/components/common/plots/error_rate_plt.tsx
+++ b/public/components/trace_analytics/components/common/plots/error_rate_plt.tsx
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiHorizontalRule, EuiPanel } from '@elastic/eui';
+import { EuiButtonGroup, EuiHorizontalRule, EuiPanel, EuiFlexGroup, EuiSpacer, EuiButtonGroupOptionProps } from '@elastic/eui';
 import moment from 'moment';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Plt } from '../../../../visualizations/plotly/plot';
 import {
   fixedIntervalToMilli,
@@ -18,6 +18,9 @@ export function ErrorRatePlt(props: {
   items: { items: Plotly.Data[]; fixedInterval: string };
   setStartTime: (startTime: string) => void;
   setEndTime: (endTime: string) => void;
+  setIdSelected: (mode: string) => void;
+  idSelected: string;
+  toggleButtons: EuiButtonGroupOptionProps[];
 }) {
   const getLayout = () =>
     ({
@@ -89,8 +92,17 @@ export function ErrorRatePlt(props: {
   return (
     <>
       <EuiPanel style={{ minWidth: 433, minHeight: 308 }}>
-        <PanelTitle title="Trace error rate over time" />
-        <EuiHorizontalRule margin="m" />
+        <EuiFlexGroup justifyContent='spaceBetween' gutterSize='xs'>  
+          <PanelTitle title="Trace error rate over time" />
+          <EuiButtonGroup
+              options={props.toggleButtons}
+              idSelected={props.idSelected}
+              onChange={(id) => props.setIdSelected(id as 'error_rate' | 'throughput')}
+              buttonSize="s"
+              color="text"
+            />
+        </EuiFlexGroup>
+        <EuiSpacer size="m" />
         {props.items?.items?.length > 0 ? (
           <Plt data={props.items.items} layout={layout} onClickHandler={onClick} />
         ) : (
diff --git a/public/components/trace_analytics/components/common/plots/throughput_plt.tsx b/public/components/trace_analytics/components/common/plots/throughput_plt.tsx
index aba6bb2833..a7370bf0cc 100644
--- a/public/components/trace_analytics/components/common/plots/throughput_plt.tsx
+++ b/public/components/trace_analytics/components/common/plots/throughput_plt.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiHorizontalRule, EuiPanel } from '@elastic/eui';
+import { EuiButtonGroup, EuiFlexGroup, EuiHorizontalRule, EuiPanel } from '@elastic/eui';
 import moment from 'moment';
 import React, { useMemo } from 'react';
 import { Plt } from '../../../../visualizations/plotly/plot';
@@ -18,6 +18,9 @@ export function ThroughputPlt(props: {
   items: { items: Plotly.Data[]; fixedInterval: string };
   setStartTime: (startTime: string) => void;
   setEndTime: (endTime: string) => void;
+  setIdSelected: (mode: string) => void;
+  idSelected: string;
+  toggleButtons: any[];
 }) {
   const layout = useMemo(
     () =>
@@ -85,7 +88,16 @@ export function ThroughputPlt(props: {
   return (
     <>
       <EuiPanel style={{ minWidth: 433, minHeight: 308 }}>
+      <EuiFlexGroup justifyContent='spaceBetween' gutterSize='xs'>  
         <PanelTitle title="Traces over time" />
+        <EuiButtonGroup
+            options={props.toggleButtons}
+            idSelected={props.idSelected}
+            onChange={(id: string) => props.setIdSelected(id as 'error_rate' | 'throughput')}
+            buttonSize="s"
+            color="text"
+          />
+      </EuiFlexGroup>
         <EuiHorizontalRule margin="m" />
         {props.items?.items?.length > 0 ? (
           <Plt data={props.items.items} layout={layout} onClickHandler={onClick} />
diff --git a/public/components/trace_analytics/components/common/search_bar.tsx b/public/components/trace_analytics/components/common/search_bar.tsx
index 0b0721981f..fa1bbc563a 100644
--- a/public/components/trace_analytics/components/common/search_bar.tsx
+++ b/public/components/trace_analytics/components/common/search_bar.tsx
@@ -98,6 +98,7 @@ export function SearchBar(props: SearchBarOwnProps) {
             filters={props.filters}
             setFilters={props.setFilters}
             appConfigs={props.appConfigs}
+            mode={props.mode}
           />
         </>
       )}
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
index ab6226b0ff..8d722ce6d4 100644
--- a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
+++ b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
@@ -46,10 +46,23 @@ exports[`Dashboard component renders dashboard 1`] = `
       },
     }
   }
+  dataPrepperIndicesExist={true}
   endTime="now"
   filters={Array []}
   http={[MockFunction]}
-  indicesExist={true}
+  mode="data_prepper"
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
   page="dashboard"
   parentBreadcrumbs={
     Array [
@@ -94,6 +107,128 @@ exports[`Dashboard component renders dashboard 1`] = `
       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={
@@ -139,10 +274,23 @@ exports[`Dashboard component renders dashboard 1`] = `
         },
       }
     }
+    dataPrepperIndicesExist={true}
     endTime="now"
     filters={Array []}
     http={[MockFunction]}
-    indicesExist={true}
+    mode="data_prepper"
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
     page="dashboard"
     parentBreadcrumbs={
       Array [
@@ -177,6 +325,7 @@ exports[`Dashboard component renders dashboard 1`] = `
       appConfigs={Array []}
       endTime="now"
       filters={Array []}
+      mode="data_prepper"
       page="dashboard"
       query=""
       refresh={[Function]}
@@ -798,6 +947,7 @@ exports[`Dashboard component renders dashboard 1`] = `
       <Filters
         appConfigs={Array []}
         filters={Array []}
+        mode="data_prepper"
         page="dashboard"
         setFilters={
           [MockFunction] {
@@ -1000,205 +1150,287 @@ exports[`Dashboard component renders dashboard 1`] = `
         className="euiSpacer euiSpacer--m"
       />
     </EuiSpacer>
-    <DashboardTable
-      addFilter={[Function]}
-      addPercentileFilter={[Function]}
-      filters={Array []}
-      items={Array []}
-      loading={false}
-      page="dashboard"
-      setRedirect={[Function]}
-    >
-      <EuiPanel>
-        <div
-          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-        >
-          <EuiFlexGroup
-            alignItems="center"
-            gutterSize="s"
+    <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"
           >
-            <div
-              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            <EuiFlexGroup
+              alignItems="center"
+              gutterSize="s"
             >
-              <EuiFlexItem
-                grow={10}
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
               >
-                <div
-                  className="euiFlexItem euiFlexItem--flexGrow10"
+                <EuiFlexItem
+                  grow={10}
                 >
-                  <PanelTitle
-                    title="Latency by trace group"
-                    totalItems={0}
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrow10"
                   >
-                    <EuiText
-                      size="m"
+                    <PanelTitle
+                      title="Latency by trace group"
+                      totalItems={0}
                     >
-                      <div
-                        className="euiText euiText--medium"
+                      <EuiText
+                        size="m"
                       >
-                        <span
-                          className="panel-title"
-                        >
-                          Latency by trace group
-                        </span>
-                        <span
-                          className="panel-title-count"
+                        <div
+                          className="euiText euiText--medium"
                         >
-                           (0)
-                        </span>
-                      </div>
-                    </EuiText>
-                  </PanelTitle>
-                </div>
-              </EuiFlexItem>
-              <EuiFlexItem
-                grow={false}
-              >
-                <div
-                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                          <span
+                            className="panel-title"
+                          >
+                            Latency by trace group
+                          </span>
+                          <span
+                            className="panel-title-count"
+                          >
+                             (0)
+                          </span>
+                        </div>
+                      </EuiText>
+                    </PanelTitle>
+                  </div>
+                </EuiFlexItem>
+                <EuiFlexItem
+                  grow={false}
                 >
-                  <EuiLink
-                    data-test-subj="dashboard-table-percentile-button-1"
-                    onClick={[Function]}
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <button
-                      className="euiLink euiLink--primary"
+                    <EuiLink
                       data-test-subj="dashboard-table-percentile-button-1"
-                      disabled={false}
                       onClick={[Function]}
-                      type="button"
                     >
-                      <EuiText
-                        size="xs"
+                      <button
+                        className="euiLink euiLink--primary"
+                        data-test-subj="dashboard-table-percentile-button-1"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="button"
                       >
-                        <div
-                          className="euiText euiText--extraSmall"
+                        <EuiText
+                          size="xs"
                         >
-                          <span
-                            style={
-                              Object {
-                                "color": "#957ac9",
+                          <div
+                            className="euiText euiText--extraSmall"
+                          >
+                            <span
+                              style={
+                                Object {
+                                  "color": "#957ac9",
+                                }
                               }
-                            }
+                            >
+                              □
+                            </span>
+                             &lt; 95 percentile
+                          </div>
+                        </EuiText>
+                      </button>
+                    </EuiLink>
+                  </div>
+                </EuiFlexItem>
+                <EuiFlexItem
+                  grow={1}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrow1"
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <EuiLink
+                      data-test-subj="dashboard-table-percentile-button-2"
+                      onClick={[Function]}
+                    >
+                      <button
+                        className="euiLink euiLink--primary"
+                        data-test-subj="dashboard-table-percentile-button-2"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <EuiText
+                          size="xs"
+                        >
+                          <div
+                            className="euiText euiText--extraSmall"
                           >
-                            □
-                          </span>
-                           &lt; 95 percentile
-                        </div>
-                      </EuiText>
-                    </button>
-                  </EuiLink>
-                </div>
-              </EuiFlexItem>
-              <EuiFlexItem
-                grow={1}
+                            <span
+                              style={
+                                Object {
+                                  "color": "#957ac9",
+                                }
+                              }
+                            >
+                              ■
+                            </span>
+                             &gt;= 95 percentile
+                          </div>
+                        </EuiText>
+                      </button>
+                    </EuiLink>
+                  </div>
+                </EuiFlexItem>
+                <EuiFlexItem
+                  grow={1}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrow1"
+                  />
+                </EuiFlexItem>
+              </div>
+            </EuiFlexGroup>
+            <EuiSpacer
+              size="m"
+            >
+              <div
+                className="euiSpacer euiSpacer--m"
+              />
+            </EuiSpacer>
+            <EuiHorizontalRule
+              margin="none"
+            >
+              <hr
+                className="euiHorizontalRule euiHorizontalRule--full"
+              />
+            </EuiHorizontalRule>
+            <NoMatchMessage
+              size="xl"
+            >
+              <EuiSpacer
+                size="xl"
               >
                 <div
-                  className="euiFlexItem euiFlexItem--flexGrow1"
+                  className="euiSpacer euiSpacer--xl"
                 />
-              </EuiFlexItem>
-              <EuiFlexItem
-                grow={false}
+              </EuiSpacer>
+              <EuiEmptyPrompt
+                body={
+                  <EuiText>
+                    No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                  </EuiText>
+                }
+                title={
+                  <h2>
+                    No matches
+                  </h2>
+                }
               >
                 <div
-                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                  className="euiEmptyPrompt"
                 >
-                  <EuiLink
-                    data-test-subj="dashboard-table-percentile-button-2"
-                    onClick={[Function]}
+                  <EuiTitle
+                    size="m"
                   >
-                    <button
-                      className="euiLink euiLink--primary"
-                      data-test-subj="dashboard-table-percentile-button-2"
-                      disabled={false}
-                      onClick={[Function]}
-                      type="button"
+                    <h2
+                      className="euiTitle euiTitle--medium"
                     >
-                      <EuiText
-                        size="xs"
+                      No matches
+                    </h2>
+                  </EuiTitle>
+                  <EuiTextColor
+                    color="subdued"
+                  >
+                    <span
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      <EuiSpacer
+                        size="m"
                       >
                         <div
-                          className="euiText euiText--extraSmall"
+                          className="euiSpacer euiSpacer--m"
+                        />
+                      </EuiSpacer>
+                      <EuiText>
+                        <div
+                          className="euiText euiText--medium"
                         >
-                          <span
-                            style={
-                              Object {
-                                "color": "#957ac9",
-                              }
-                            }
-                          >
-                            ■
-                          </span>
-                           &gt;= 95 percentile
+                          <EuiText>
+                            <div
+                              className="euiText euiText--medium"
+                            >
+                              No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                            </div>
+                          </EuiText>
                         </div>
                       </EuiText>
-                    </button>
-                  </EuiLink>
+                    </span>
+                  </EuiTextColor>
                 </div>
-              </EuiFlexItem>
-              <EuiFlexItem
-                grow={1}
+              </EuiEmptyPrompt>
+              <EuiSpacer
+                size="xl"
               >
                 <div
-                  className="euiFlexItem euiFlexItem--flexGrow1"
+                  className="euiSpacer euiSpacer--xl"
                 />
-              </EuiFlexItem>
-            </div>
-          </EuiFlexGroup>
-          <EuiSpacer
-            size="m"
+              </EuiSpacer>
+            </NoMatchMessage>
+          </div>
+        </EuiPanel>
+      </DashboardTable>
+      <EuiSpacer>
+        <div
+          className="euiSpacer euiSpacer--l"
+        />
+      </EuiSpacer>
+      <EuiFlexGroup
+        alignItems="baseline"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={4}
           >
             <div
-              className="euiSpacer euiSpacer--m"
-            />
-          </EuiSpacer>
-          <EuiHorizontalRule
-            margin="none"
-          >
-            <hr
-              className="euiHorizontalRule euiHorizontalRule--full"
-            />
-          </EuiHorizontalRule>
-          <NoMatchMessage
-            size="xl"
-          >
-            <EuiSpacer
-              size="xl"
-            >
-              <div
-                className="euiSpacer euiSpacer--xl"
-              />
-            </EuiSpacer>
-            <EuiEmptyPrompt
-              body={
-                <EuiText>
-                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-                </EuiText>
-              }
-              title={
-                <h2>
-                  No matches
-                </h2>
-              }
+              className="euiFlexItem euiFlexItem--flexGrow4"
             >
-              <div
-                className="euiEmptyPrompt"
+              <ServiceMap
+                addFilter={[Function]}
+                currService=""
+                idSelected="latency"
+                page="dashboard"
+                serviceMap={Object {}}
+                setIdSelected={[Function]}
               >
-                <EuiTitle
-                  size="m"
-                >
-                  <h2
-                    className="euiTitle euiTitle--medium"
-                  >
-                    No matches
-                  </h2>
-                </EuiTitle>
-                <EuiTextColor
-                  color="subdued"
-                >
-                  <span
-                    className="euiTextColor euiTextColor--subdued"
+                <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"
                     >
@@ -1206,614 +1438,524 @@ exports[`Dashboard component renders dashboard 1`] = `
                         className="euiSpacer euiSpacer--m"
                       />
                     </EuiSpacer>
-                    <EuiText>
-                      <div
-                        className="euiText euiText--medium"
+                    <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}
                       >
-                        <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"
+                        <EuiScreenReaderOnly>
+                          <legend
+                            className="euiScreenReaderOnly"
+                          />
+                        </EuiScreenReaderOnly>
+                        <div
+                          className="euiButtonGroup__buttons"
                         >
-                          <EuiButtonDisplay
-                            baseClassName="euiButtonGroupButton"
-                            className="euiButtonGroupButton-isSelected"
+                          <EuiButtonGroupButton
                             color="text"
                             element="label"
-                            fill={true}
-                            htmlFor="random_html_id"
+                            id="latency"
                             isDisabled={false}
-                            onClick={[Function]}
+                            isIconOnly={false}
+                            isSelected={true}
+                            key="0"
+                            label="Latency"
+                            name="random_html_id"
+                            onChange={[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}
+                            <EuiButtonDisplay
+                              baseClassName="euiButtonGroupButton"
+                              className="euiButtonGroupButton-isSelected"
+                              color="text"
+                              element="label"
+                              fill={true}
                               htmlFor="random_html_id"
+                              isDisabled={false}
                               onClick={[Function]}
-                              style={
+                              size="s"
+                              textProps={
                                 Object {
-                                  "minWidth": undefined,
+                                  "className": "euiButtonGroupButton__textShift",
+                                  "data-text": "Latency",
+                                  "ref": [Function],
+                                  "title": "Latency",
                                 }
                               }
                             >
-                              <EuiButtonContent
-                                className="euiButton__content"
-                                iconSide="left"
-                                textProps={
+                              <label
+                                className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                                disabled={false}
+                                htmlFor="random_html_id"
+                                onClick={[Function]}
+                                style={
                                   Object {
-                                    "className": "euiButton__text euiButtonGroupButton__textShift",
-                                    "data-text": "Latency",
-                                    "ref": [Function],
-                                    "title": "Latency",
+                                    "minWidth": undefined,
                                   }
                                 }
                               >
-                                <span
-                                  className="euiButtonContent euiButton__content"
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="left"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text euiButtonGroupButton__textShift",
+                                      "data-text": "Latency",
+                                      "ref": [Function],
+                                      "title": "Latency",
+                                    }
+                                  }
                                 >
                                   <span
-                                    className="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Latency"
-                                    title="Latency"
+                                    className="euiButtonContent euiButton__content"
                                   >
-                                    <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
+                                      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>
-                                </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=""
+                                </EuiButtonContent>
+                              </label>
+                            </EuiButtonDisplay>
+                          </EuiButtonGroupButton>
+                          <EuiButtonGroupButton
                             color="text"
                             element="label"
-                            fill={false}
-                            htmlFor="random_html_id"
+                            id="error_rate"
                             isDisabled={false}
-                            onClick={[Function]}
+                            isIconOnly={false}
+                            isSelected={false}
+                            key="1"
+                            label="Error rate"
+                            name="random_html_id"
+                            onChange={[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}
+                            <EuiButtonDisplay
+                              baseClassName="euiButtonGroupButton"
+                              className=""
+                              color="text"
+                              element="label"
+                              fill={false}
                               htmlFor="random_html_id"
+                              isDisabled={false}
                               onClick={[Function]}
-                              style={
+                              size="s"
+                              textProps={
                                 Object {
-                                  "minWidth": undefined,
+                                  "className": "euiButtonGroupButton__textShift",
+                                  "data-text": "Error rate",
+                                  "ref": [Function],
+                                  "title": "Error rate",
                                 }
                               }
                             >
-                              <EuiButtonContent
-                                className="euiButton__content"
-                                iconSide="left"
-                                textProps={
+                              <label
+                                className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                disabled={false}
+                                htmlFor="random_html_id"
+                                onClick={[Function]}
+                                style={
                                   Object {
-                                    "className": "euiButton__text euiButtonGroupButton__textShift",
-                                    "data-text": "Error rate",
-                                    "ref": [Function],
-                                    "title": "Error rate",
+                                    "minWidth": undefined,
                                   }
                                 }
                               >
-                                <span
-                                  className="euiButtonContent euiButton__content"
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="left"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text euiButtonGroupButton__textShift",
+                                      "data-text": "Error rate",
+                                      "ref": [Function],
+                                      "title": "Error rate",
+                                    }
+                                  }
                                 >
                                   <span
-                                    className="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Error rate"
-                                    title="Error rate"
+                                    className="euiButtonContent euiButton__content"
                                   >
-                                    <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
+                                      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>
-                                </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=""
+                                </EuiButtonContent>
+                              </label>
+                            </EuiButtonDisplay>
+                          </EuiButtonGroupButton>
+                          <EuiButtonGroupButton
                             color="text"
                             element="label"
-                            fill={false}
-                            htmlFor="random_html_id"
+                            id="throughput"
                             isDisabled={false}
-                            onClick={[Function]}
+                            isIconOnly={false}
+                            isSelected={false}
+                            key="2"
+                            label="Throughput"
+                            name="random_html_id"
+                            onChange={[Function]}
                             size="s"
-                            textProps={
-                              Object {
-                                "className": "euiButtonGroupButton__textShift",
-                                "data-text": "Throughput",
-                                "ref": [Function],
-                                "title": "Throughput",
-                              }
-                            }
                           >
-                            <label
-                              className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-                              disabled={false}
+                            <EuiButtonDisplay
+                              baseClassName="euiButtonGroupButton"
+                              className=""
+                              color="text"
+                              element="label"
+                              fill={false}
                               htmlFor="random_html_id"
+                              isDisabled={false}
                               onClick={[Function]}
-                              style={
+                              size="s"
+                              textProps={
                                 Object {
-                                  "minWidth": undefined,
+                                  "className": "euiButtonGroupButton__textShift",
+                                  "data-text": "Throughput",
+                                  "ref": [Function],
+                                  "title": "Throughput",
                                 }
                               }
                             >
-                              <EuiButtonContent
-                                className="euiButton__content"
-                                iconSide="left"
-                                textProps={
+                              <label
+                                className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                disabled={false}
+                                htmlFor="random_html_id"
+                                onClick={[Function]}
+                                style={
                                   Object {
-                                    "className": "euiButton__text euiButtonGroupButton__textShift",
-                                    "data-text": "Throughput",
-                                    "ref": [Function],
-                                    "title": "Throughput",
+                                    "minWidth": undefined,
                                   }
                                 }
                               >
-                                <span
-                                  className="euiButtonContent euiButton__content"
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="left"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text euiButtonGroupButton__textShift",
+                                      "data-text": "Throughput",
+                                      "ref": [Function],
+                                      "title": "Throughput",
+                                    }
+                                  }
                                 >
                                   <span
-                                    className="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Throughput"
-                                    title="Throughput"
+                                    className="euiButtonContent euiButton__content"
                                   >
-                                    <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
+                                      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>
-                                </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"
+                                </EuiButtonContent>
+                              </label>
+                            </EuiButtonDisplay>
+                          </EuiButtonGroupButton>
+                        </div>
+                      </fieldset>
+                    </EuiButtonGroup>
+                    <EuiHorizontalRule
+                      margin="m"
+                    >
+                      <hr
+                        className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                      />
+                    </EuiHorizontalRule>
+                    <EuiFlexGroup
+                      alignItems="center"
+                      gutterSize="s"
                     >
-                      <EuiFlexItem
-                        grow={false}
+                      <div
+                        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
                       >
-                        <div
-                          className="euiFlexItem euiFlexItem--flexGrowZero"
-                        >
-                          <EuiText>
-                            <div
-                              className="euiText euiText--medium"
-                            >
-                              Focus on
-                            </div>
-                          </EuiText>
-                        </div>
-                      </EuiFlexItem>
-                      <EuiFlexItem>
-                        <div
-                          className="euiFlexItem"
+                        <EuiFlexItem
+                          grow={false}
                         >
-                          <EuiFieldSearch
-                            compressed={false}
-                            fullWidth={false}
-                            incremental={false}
-                            isClearable={true}
-                            isInvalid={false}
-                            isLoading={false}
-                            onChange={[Function]}
-                            onSearch={[Function]}
-                            placeholder="Service name"
-                            value=""
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <EuiText>
+                              <div
+                                className="euiText euiText--medium"
+                              >
+                                Focus on
+                              </div>
+                            </EuiText>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                          <div
+                            className="euiFlexItem"
                           >
-                            <EuiFormControlLayout
+                            <EuiFieldSearch
                               compressed={false}
                               fullWidth={false}
-                              icon="search"
+                              incremental={false}
+                              isClearable={true}
+                              isInvalid={false}
                               isLoading={false}
+                              onChange={[Function]}
+                              onSearch={[Function]}
+                              placeholder="Service name"
+                              value=""
                             >
-                              <div
-                                className="euiFormControlLayout"
+                              <EuiFormControlLayout
+                                compressed={false}
+                                fullWidth={false}
+                                icon="search"
+                                isLoading={false}
                               >
                                 <div
-                                  className="euiFormControlLayout__childrenWrapper"
+                                  className="euiFormControlLayout"
                                 >
-                                  <EuiValidatableControl
-                                    isInvalid={false}
-                                  >
-                                    <input
-                                      className="euiFieldSearch"
-                                      onChange={[Function]}
-                                      onKeyUp={[Function]}
-                                      placeholder="Service name"
-                                      type="search"
-                                      value=""
-                                    />
-                                  </EuiValidatableControl>
-                                  <EuiFormControlLayoutIcons
-                                    compressed={false}
-                                    icon="search"
-                                    isLoading={false}
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
                                   >
-                                    <div
-                                      className="euiFormControlLayoutIcons"
+                                    <EuiValidatableControl
+                                      isInvalid={false}
                                     >
-                                      <EuiFormControlLayoutCustomIcon
-                                        size="m"
+                                      <input
+                                        className="euiFieldSearch"
+                                        onChange={[Function]}
+                                        onKeyUp={[Function]}
+                                        placeholder="Service name"
                                         type="search"
+                                        value=""
+                                      />
+                                    </EuiValidatableControl>
+                                    <EuiFormControlLayoutIcons
+                                      compressed={false}
+                                      icon="search"
+                                      isLoading={false}
+                                    >
+                                      <div
+                                        className="euiFormControlLayoutIcons"
                                       >
-                                        <span
-                                          className="euiFormControlLayoutCustomIcon"
+                                        <EuiFormControlLayoutCustomIcon
+                                          size="m"
+                                          type="search"
                                         >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiFormControlLayoutCustomIcon__icon"
-                                            size="m"
-                                            type="search"
+                                          <span
+                                            className="euiFormControlLayoutCustomIcon"
                                           >
-                                            <EuiIconSearch
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiFormControlLayoutCustomIcon__icon"
+                                              size="m"
+                                              type="search"
                                             >
-                                              <svg
+                                              <EuiIconSearch
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
-                                                />
-                                              </svg>
-                                            </EuiIconSearch>
-                                          </EuiIcon>
-                                        </span>
-                                      </EuiFormControlLayoutCustomIcon>
-                                    </div>
-                                  </EuiFormControlLayoutIcons>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                                  />
+                                                </svg>
+                                              </EuiIconSearch>
+                                            </EuiIcon>
+                                          </span>
+                                        </EuiFormControlLayoutCustomIcon>
+                                      </div>
+                                    </EuiFormControlLayoutIcons>
+                                  </div>
                                 </div>
-                              </div>
-                            </EuiFormControlLayout>
-                          </EuiFieldSearch>
-                        </div>
-                      </EuiFlexItem>
-                    </div>
-                  </EuiFlexGroup>
-                  <EuiSpacer>
+                              </EuiFormControlLayout>
+                            </EuiFieldSearch>
+                          </div>
+                        </EuiFlexItem>
+                      </div>
+                    </EuiFlexGroup>
+                    <EuiSpacer>
+                      <div
+                        className="euiSpacer euiSpacer--l"
+                      />
+                    </EuiSpacer>
                     <div
-                      className="euiSpacer euiSpacer--l"
-                    />
-                  </EuiSpacer>
-                  <div
-                    style={
-                      Object {
-                        "minHeight": 434,
+                      style={
+                        Object {
+                          "minHeight": 434,
+                        }
                       }
-                    }
-                  >
-                    <NoMatchMessage
-                      size="s"
                     >
-                      <EuiSpacer
+                      <NoMatchMessage
                         size="s"
                       >
-                        <div
-                          className="euiSpacer euiSpacer--s"
-                        />
-                      </EuiSpacer>
-                      <EuiEmptyPrompt
-                        body={
-                          <EuiText>
-                            No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-                          </EuiText>
-                        }
-                        title={
-                          <h2>
-                            No matches
-                          </h2>
-                        }
-                      >
-                        <div
-                          className="euiEmptyPrompt"
+                        <EuiSpacer
+                          size="s"
                         >
-                          <EuiTitle
-                            size="m"
-                          >
-                            <h2
-                              className="euiTitle euiTitle--medium"
-                            >
+                          <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>
-                          </EuiTitle>
-                          <EuiTextColor
-                            color="subdued"
+                          }
+                        >
+                          <div
+                            className="euiEmptyPrompt"
                           >
-                            <span
-                              className="euiTextColor euiTextColor--subdued"
+                            <EuiTitle
+                              size="m"
                             >
-                              <EuiSpacer
-                                size="m"
+                              <h2
+                                className="euiTitle euiTitle--medium"
                               >
-                                <div
-                                  className="euiSpacer euiSpacer--m"
-                                />
-                              </EuiSpacer>
-                              <EuiText>
-                                <div
-                                  className="euiText euiText--medium"
+                                No matches
+                              </h2>
+                            </EuiTitle>
+                            <EuiTextColor
+                              color="subdued"
+                            >
+                              <span
+                                className="euiTextColor euiTextColor--subdued"
+                              >
+                                <EuiSpacer
+                                  size="m"
                                 >
-                                  <EuiText>
-                                    <div
-                                      className="euiText euiText--medium"
-                                    >
-                                      No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-                                    </div>
-                                  </EuiText>
-                                </div>
-                              </EuiText>
-                            </span>
-                          </EuiTextColor>
-                        </div>
-                      </EuiEmptyPrompt>
-                      <EuiSpacer
-                        size="s"
-                      >
-                        <div
-                          className="euiSpacer euiSpacer--s"
-                        />
-                      </EuiSpacer>
-                    </NoMatchMessage>
+                                  <div
+                                    className="euiSpacer euiSpacer--m"
+                                  />
+                                </EuiSpacer>
+                                <EuiText>
+                                  <div
+                                    className="euiText euiText--medium"
+                                  >
+                                    <EuiText>
+                                      <div
+                                        className="euiText euiText--medium"
+                                      >
+                                        No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                      </div>
+                                    </EuiText>
+                                  </div>
+                                </EuiText>
+                              </span>
+                            </EuiTextColor>
+                          </div>
+                        </EuiEmptyPrompt>
+                        <EuiSpacer
+                          size="s"
+                        >
+                          <div
+                            className="euiSpacer euiSpacer--s"
+                          />
+                        </EuiSpacer>
+                      </NoMatchMessage>
+                    </div>
                   </div>
-                </div>
-              </EuiPanel>
-            </ServiceMap>
-          </div>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <div
-            className="euiFlexItem"
-          >
-            <EuiFlexGroup
-              direction="column"
+                </EuiPanel>
+              </ServiceMap>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
             >
-              <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+              <EuiFlexGroup
+                direction="column"
               >
-                <EuiFlexItem>
-                  <div
-                    className="euiFlexItem"
-                  >
-                    <ErrorRatePlt
-                      items={
-                        Object {
-                          "fixedInterval": "1h",
-                          "items": Array [],
-                        }
-                      }
-                      setEndTime={[MockFunction]}
-                      setStartTime={[MockFunction]}
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                >
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
                     >
-                      <EuiPanel
-                        style={
+                      <ErrorRatePlt
+                        items={
                           Object {
-                            "minHeight": 308,
-                            "minWidth": 433,
+                            "fixedInterval": "1h",
+                            "items": Array [],
                           }
                         }
+                        setEndTime={[MockFunction]}
+                        setStartTime={[MockFunction]}
                       >
-                        <div
-                          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        <EuiPanel
                           style={
                             Object {
                               "minHeight": 308,
@@ -1821,131 +1963,159 @@ exports[`Dashboard component renders dashboard 1`] = `
                             }
                           }
                         >
-                          <PanelTitle
-                            title="Trace error rate over time"
+                          <div
+                            className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                            style={
+                              Object {
+                                "minHeight": 308,
+                                "minWidth": 433,
+                              }
+                            }
                           >
-                            <EuiText
-                              size="m"
+                            <EuiFlexGroup
+                              gutterSize="xs"
+                              justifyContent="spaceBetween"
                             >
                               <div
-                                className="euiText euiText--medium"
+                                className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
                               >
-                                <span
-                                  className="panel-title"
+                                <PanelTitle
+                                  title="Trace error rate over time"
                                 >
-                                  Trace error rate over time
-                                </span>
+                                  <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>
-                            </EuiText>
-                          </PanelTitle>
-                          <EuiHorizontalRule
-                            margin="m"
-                          >
-                            <hr
-                              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
-                            />
-                          </EuiHorizontalRule>
-                          <NoMatchMessage
-                            size="s"
-                          >
+                            </EuiFlexGroup>
                             <EuiSpacer
-                              size="s"
+                              size="m"
                             >
                               <div
-                                className="euiSpacer euiSpacer--s"
+                                className="euiSpacer euiSpacer--m"
                               />
                             </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>
-                              }
+                            <NoMatchMessage
+                              size="s"
                             >
-                              <div
-                                className="euiEmptyPrompt"
+                              <EuiSpacer
+                                size="s"
                               >
-                                <EuiTitle
-                                  size="m"
-                                >
-                                  <h2
-                                    className="euiTitle euiTitle--medium"
-                                  >
+                                <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>
-                                </EuiTitle>
-                                <EuiTextColor
-                                  color="subdued"
+                                }
+                              >
+                                <div
+                                  className="euiEmptyPrompt"
                                 >
-                                  <span
-                                    className="euiTextColor euiTextColor--subdued"
+                                  <EuiTitle
+                                    size="m"
                                   >
-                                    <EuiSpacer
-                                      size="m"
+                                    <h2
+                                      className="euiTitle euiTitle--medium"
                                     >
-                                      <div
-                                        className="euiSpacer euiSpacer--m"
-                                      />
-                                    </EuiSpacer>
-                                    <EuiText>
-                                      <div
-                                        className="euiText euiText--medium"
+                                      No matches
+                                    </h2>
+                                  </EuiTitle>
+                                  <EuiTextColor
+                                    color="subdued"
+                                  >
+                                    <span
+                                      className="euiTextColor euiTextColor--subdued"
+                                    >
+                                      <EuiSpacer
+                                        size="m"
                                       >
-                                        <EuiText>
-                                          <div
-                                            className="euiText euiText--medium"
-                                          >
-                                            No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-                                          </div>
-                                        </EuiText>
-                                      </div>
-                                    </EuiText>
-                                  </span>
-                                </EuiTextColor>
-                              </div>
-                            </EuiEmptyPrompt>
-                            <EuiSpacer
-                              size="s"
-                            >
-                              <div
-                                className="euiSpacer euiSpacer--s"
-                              />
-                            </EuiSpacer>
-                          </NoMatchMessage>
-                        </div>
-                      </EuiPanel>
-                    </ErrorRatePlt>
-                  </div>
-                </EuiFlexItem>
-                <EuiFlexItem>
-                  <div
-                    className="euiFlexItem"
-                  >
-                    <ThroughputPlt
-                      items={
-                        Object {
-                          "fixedInterval": "1h",
-                          "items": Array [],
-                        }
-                      }
-                      setEndTime={[MockFunction]}
-                      setStartTime={[MockFunction]}
+                                        <div
+                                          className="euiSpacer euiSpacer--m"
+                                        />
+                                      </EuiSpacer>
+                                      <EuiText>
+                                        <div
+                                          className="euiText euiText--medium"
+                                        >
+                                          <EuiText>
+                                            <div
+                                              className="euiText euiText--medium"
+                                            >
+                                              No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                            </div>
+                                          </EuiText>
+                                        </div>
+                                      </EuiText>
+                                    </span>
+                                  </EuiTextColor>
+                                </div>
+                              </EuiEmptyPrompt>
+                              <EuiSpacer
+                                size="s"
+                              >
+                                <div
+                                  className="euiSpacer euiSpacer--s"
+                                />
+                              </EuiSpacer>
+                            </NoMatchMessage>
+                          </div>
+                        </EuiPanel>
+                      </ErrorRatePlt>
+                    </div>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
                     >
-                      <EuiPanel
-                        style={
+                      <ThroughputPlt
+                        items={
                           Object {
-                            "minHeight": 308,
-                            "minWidth": 433,
+                            "fixedInterval": "1h",
+                            "items": Array [],
                           }
                         }
+                        setEndTime={[MockFunction]}
+                        setStartTime={[MockFunction]}
                       >
-                        <div
-                          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        <EuiPanel
                           style={
                             Object {
                               "minHeight": 308,
@@ -1953,113 +2123,151 @@ exports[`Dashboard component renders dashboard 1`] = `
                             }
                           }
                         >
-                          <PanelTitle
-                            title="Traces over time"
+                          <div
+                            className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                            style={
+                              Object {
+                                "minHeight": 308,
+                                "minWidth": 433,
+                              }
+                            }
                           >
-                            <EuiText
-                              size="m"
+                            <EuiFlexGroup
+                              gutterSize="xs"
+                              justifyContent="spaceBetween"
                             >
                               <div
-                                className="euiText euiText--medium"
+                                className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
                               >
-                                <span
-                                  className="panel-title"
+                                <PanelTitle
+                                  title="Traces over time"
                                 >
-                                  Traces over time
-                                </span>
+                                  <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>
-                            </EuiText>
-                          </PanelTitle>
-                          <EuiHorizontalRule
-                            margin="m"
-                          >
-                            <hr
-                              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
-                            />
-                          </EuiHorizontalRule>
-                          <NoMatchMessage
-                            size="s"
-                          >
-                            <EuiSpacer
-                              size="s"
+                            </EuiFlexGroup>
+                            <EuiHorizontalRule
+                              margin="m"
                             >
-                              <div
-                                className="euiSpacer euiSpacer--s"
+                              <hr
+                                className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
                               />
-                            </EuiSpacer>
-                            <EuiEmptyPrompt
-                              body={
-                                <EuiText>
-                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-                                </EuiText>
-                              }
-                              title={
-                                <h2>
-                                  No matches
-                                </h2>
-                              }
+                            </EuiHorizontalRule>
+                            <NoMatchMessage
+                              size="s"
                             >
-                              <div
-                                className="euiEmptyPrompt"
+                              <EuiSpacer
+                                size="s"
                               >
-                                <EuiTitle
-                                  size="m"
-                                >
-                                  <h2
-                                    className="euiTitle euiTitle--medium"
-                                  >
+                                <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>
-                                </EuiTitle>
-                                <EuiTextColor
-                                  color="subdued"
+                                }
+                              >
+                                <div
+                                  className="euiEmptyPrompt"
                                 >
-                                  <span
-                                    className="euiTextColor euiTextColor--subdued"
+                                  <EuiTitle
+                                    size="m"
                                   >
-                                    <EuiSpacer
-                                      size="m"
+                                    <h2
+                                      className="euiTitle euiTitle--medium"
                                     >
-                                      <div
-                                        className="euiSpacer euiSpacer--m"
-                                      />
-                                    </EuiSpacer>
-                                    <EuiText>
-                                      <div
-                                        className="euiText euiText--medium"
+                                      No matches
+                                    </h2>
+                                  </EuiTitle>
+                                  <EuiTextColor
+                                    color="subdued"
+                                  >
+                                    <span
+                                      className="euiTextColor euiTextColor--subdued"
+                                    >
+                                      <EuiSpacer
+                                        size="m"
                                       >
-                                        <EuiText>
-                                          <div
-                                            className="euiText euiText--medium"
-                                          >
-                                            No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-                                          </div>
-                                        </EuiText>
-                                      </div>
-                                    </EuiText>
-                                  </span>
-                                </EuiTextColor>
-                              </div>
-                            </EuiEmptyPrompt>
-                            <EuiSpacer
-                              size="s"
-                            >
-                              <div
-                                className="euiSpacer euiSpacer--s"
-                              />
-                            </EuiSpacer>
-                          </NoMatchMessage>
-                        </div>
-                      </EuiPanel>
-                    </ThroughputPlt>
-                  </div>
-                </EuiFlexItem>
-              </div>
-            </EuiFlexGroup>
-          </div>
-        </EuiFlexItem>
-      </div>
-    </EuiFlexGroup>
+                                        <div
+                                          className="euiSpacer euiSpacer--m"
+                                        />
+                                      </EuiSpacer>
+                                      <EuiText>
+                                        <div
+                                          className="euiText euiText--medium"
+                                        >
+                                          <EuiText>
+                                            <div
+                                              className="euiText euiText--medium"
+                                            >
+                                              No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                            </div>
+                                          </EuiText>
+                                        </div>
+                                      </EuiText>
+                                    </span>
+                                  </EuiTextColor>
+                                </div>
+                              </EuiEmptyPrompt>
+                              <EuiSpacer
+                                size="s"
+                              >
+                                <div
+                                  className="euiSpacer euiSpacer--s"
+                                />
+                              </EuiSpacer>
+                            </NoMatchMessage>
+                          </div>
+                        </EuiPanel>
+                      </ThroughputPlt>
+                    </div>
+                  </EuiFlexItem>
+                </div>
+              </EuiFlexGroup>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+    </div>
   </DashboardContent>
 </Dashboard>
 `;
@@ -2110,10 +2318,23 @@ exports[`Dashboard component renders empty dashboard 1`] = `
       },
     }
   }
+  dataPrepperIndicesExist={true}
   endTime="now"
   filters={Array []}
   http={[MockFunction]}
-  indicesExist={false}
+  mode="data_prepper"
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
   page="dashboard"
   parentBreadcrumbs={
     Array [
@@ -2158,6 +2379,123 @@ exports[`Dashboard component renders empty dashboard 1`] = `
       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={
@@ -2203,10 +2541,23 @@ exports[`Dashboard component renders empty dashboard 1`] = `
         },
       }
     }
+    dataPrepperIndicesExist={true}
     endTime="now"
     filters={Array []}
     http={[MockFunction]}
-    indicesExist={false}
+    mode="data_prepper"
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
     page="dashboard"
     parentBreadcrumbs={
       Array [
@@ -2241,6 +2592,7 @@ exports[`Dashboard component renders empty dashboard 1`] = `
       appConfigs={Array []}
       endTime="now"
       filters={Array []}
+      mode="data_prepper"
       page="dashboard"
       query=""
       refresh={[Function]}
@@ -2844,6 +3196,7 @@ exports[`Dashboard component renders empty dashboard 1`] = `
       <Filters
         appConfigs={Array []}
         filters={Array []}
+        mode="data_prepper"
         page="dashboard"
         setFilters={
           [MockFunction] {
@@ -3041,156 +3394,2813 @@ exports[`Dashboard component renders empty dashboard 1`] = `
         className="euiSpacer euiSpacer--m"
       />
     </EuiSpacer>
-    <MissingConfigurationMessage>
-      <EuiEmptyPrompt
-        actions={
-          <EuiButton
-            color="primary"
-            iconSide="right"
-            iconType="popout"
-            onClick={[Function]}
-          >
-            Learn more
-          </EuiButton>
-        }
-        body={
-          <EuiText>
-            The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
-          </EuiText>
-        }
-        title={
-          <h2>
-            Trace Analytics not set up
-          </h2>
-        }
+    <div>
+      <DashboardTable
+        addFilter={[Function]}
+        addPercentileFilter={[Function]}
+        filters={Array []}
+        items={Array []}
+        loading={true}
+        page="dashboard"
+        setRedirect={[Function]}
       >
-        <div
-          className="euiEmptyPrompt"
-        >
-          <EuiTitle
-            size="m"
-          >
-            <h2
-              className="euiTitle euiTitle--medium"
-            >
-              Trace Analytics not set up
-            </h2>
-          </EuiTitle>
-          <EuiTextColor
-            color="subdued"
+        <EuiPanel>
+          <div
+            className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
           >
-            <span
-              className="euiTextColor euiTextColor--subdued"
+            <EuiFlexGroup
+              alignItems="center"
+              gutterSize="s"
             >
-              <EuiSpacer
-                size="m"
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
               >
-                <div
-                  className="euiSpacer euiSpacer--m"
-                />
-              </EuiSpacer>
-              <EuiText>
-                <div
-                  className="euiText euiText--medium"
+                <EuiFlexItem
+                  grow={10}
                 >
-                  <EuiText>
-                    <div
-                      className="euiText euiText--medium"
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrow10"
+                  >
+                    <PanelTitle
+                      title="Latency by trace group"
+                      totalItems={0}
                     >
-                      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",
-                    }
-                  }
+                      <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}
                 >
-                  <span
-                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <EuiIcon
-                      className="euiButtonContent__icon"
-                      color="inherit"
-                      size="m"
-                      type="popout"
+                    <EuiLink
+                      data-test-subj="dashboard-table-percentile-button-1"
+                      onClick={[Function]}
                     >
-                      <EuiIconEmpty
-                        aria-hidden={true}
-                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                        focusable="false"
-                        role="img"
-                        style={null}
+                      <button
+                        className="euiLink euiLink--primary"
+                        data-test-subj="dashboard-table-percentile-button-1"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="button"
                       >
-                        <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>
+                        <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]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      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]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      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 {
+                "id": "error_rate",
+                "label": "Error rate",
+              },
+              Object {
+                "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 {
+                          "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="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"
+                            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"
+                              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"
+                          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"
+                            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>
+                </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..88d8ab540e
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/mode_picker.test.tsx.snap
@@ -0,0 +1,805 @@
+// 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",
+                                        "key": "jaeger",
+                                        "label": "Jaeger",
+                                        "value": "jaeger",
+                                      },
+                                      Object {
+                                        "checked": undefined,
+                                        "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",
+                                              "key": "jaeger",
+                                              "label": "Jaeger",
+                                              "value": "jaeger",
+                                            },
+                                            Object {
+                                              "checked": undefined,
+                                              "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",
+                                              "key": "jaeger",
+                                              "label": "Jaeger",
+                                              "value": "jaeger",
+                                            },
+                                            Object {
+                                              "checked": undefined,
+                                              "key": "data_prepper",
+                                              "label": "Data Prepper",
+                                              "value": "data_prepper",
+                                            },
+                                          ]
+                                        }
+                                        rowHeight={32}
+                                        searchValue=""
+                                        searchable={true}
+                                        setActiveOptionIndex={[Function]}
+                                        singleSelection="always"
+                                        visibleOptions={
+                                          Array [
+                                            Object {
+                                              "checked": "on",
+                                              "key": "jaeger",
+                                              "label": "Jaeger",
+                                              "value": "jaeger",
+                                            },
+                                            Object {
+                                              "checked": undefined,
+                                              "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/__tests__/__snapshots__/top_error_rates_table.test.tsx.snap b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/top_error_rates_table.test.tsx.snap
new file mode 100644
index 0000000000..00580538ef
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/top_error_rates_table.test.tsx.snap
@@ -0,0 +1,2195 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Error Rates Table component renders empty top error rates table 1`] = `
+<ErrorRatesTable
+  addFilter={[MockFunction]}
+  addFilters={[MockFunction]}
+  addPercentileFilter={[MockFunction]}
+  filters={
+    Array [
+      Object {
+        "disabled": false,
+        "field": "traceGroup",
+        "inverted": false,
+        "operator": "exists",
+        "value": "exists",
+      },
+    ]
+  }
+  items={Array []}
+  loading={false}
+  page="dashboard"
+  setRedirect={[MockFunction]}
+  title="Top 5 Service and Operation Error Rates"
+>
+  <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 Error Rates"
+                totalItems={0}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Top 5 Service and Operation Error Rates
+                    </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>
+`;
+
+exports[`Error Rates Table component renders top error rates table with data 1`] = `
+<ErrorRatesTable
+  addFilter={[MockFunction]}
+  addFilters={[MockFunction]}
+  addPercentileFilter={[MockFunction]}
+  filters={
+    Array [
+      Object {
+        "disabled": false,
+        "field": "traceGroup",
+        "inverted": false,
+        "operator": "exists",
+        "value": "exists",
+      },
+    ]
+  }
+  items={
+    Array [
+      Object {
+        "24_hour_error_trend": null,
+        "dashboard_average_latency": 187.27,
+        "dashboard_error_rate": 14.285714285714285,
+        "dashboard_latency_variance": Array [
+          26.43,
+          325.4,
+          325.4,
+        ],
+        "dashboard_trace_group_name": "client_create_order",
+        "dashboard_traces": 7,
+      },
+    ]
+  }
+  loading={false}
+  page="dashboard"
+  setRedirect={[MockFunction]}
+>
+  <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={1}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Latency by trace group
+                    </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": "dashboard_trace_group_name",
+              "name": <EuiToolTip
+                content={
+                  <EuiText
+                    size="xs"
+                  >
+                    Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                  </EuiText>
+                }
+                delay="regular"
+                position="top"
+              >
+                <React.Fragment>
+                  <div>
+                    Service and Operation Name
+                     
+                    <EuiIcon
+                      className="eui-alignTop"
+                      color="subdued"
+                      size="s"
+                      type="questionInCircle"
+                    />
+                  </div>
+                  <div>
+                     
+                  </div>
+                </React.Fragment>
+              </EuiToolTip>,
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "dataType": "number",
+              "field": "dashboard_average_latency",
+              "name": <EuiToolTip
+                content={
+                  <EuiText
+                    size="xs"
+                  >
+                    Average latency of traces within a trace group in the selected time range.
+                  </EuiText>
+                }
+                delay="regular"
+                position="top"
+              >
+                <React.Fragment>
+                  <div>
+                    Average latency (ms)
+                     
+                    <EuiIcon
+                      className="eui-alignTop"
+                      color="subdued"
+                      size="s"
+                      type="questionInCircle"
+                    />
+                  </div>
+                  <div>
+                     
+                  </div>
+                </React.Fragment>
+              </EuiToolTip>,
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "dashboard_error_rate",
+              "name": <EuiToolTip
+                content={
+                  <EuiText
+                    size="xs"
+                  >
+                    Error rate based on count of trace errors within a trace group in the selected time range.
+                  </EuiText>
+                }
+                delay="regular"
+                position="top"
+              >
+                <React.Fragment>
+                  <div>
+                    Error rate
+                     
+                    <EuiIcon
+                      className="eui-alignTop"
+                      color="subdued"
+                      size="s"
+                      type="questionInCircle"
+                    />
+                  </div>
+                  <div>
+                     
+                  </div>
+                </React.Fragment>
+              </EuiToolTip>,
+              "render": [Function],
+              "sortable": false,
+            },
+            Object {
+              "align": "right",
+              "field": "dashboard_traces",
+              "name": <EuiToolTip
+                content={
+                  <EuiText
+                    size="xs"
+                  >
+                    Count of traces with unique trace identifiers in the selected time range.
+                  </EuiText>
+                }
+                delay="regular"
+                position="top"
+              >
+                <React.Fragment>
+                  <div>
+                    Traces
+                     
+                    <EuiIcon
+                      className="eui-alignTop"
+                      color="subdued"
+                      size="s"
+                      type="questionInCircle"
+                    />
+                  </div>
+                  <div>
+                     
+                  </div>
+                </React.Fragment>
+              </EuiToolTip>,
+              "render": [Function],
+              "sortable": true,
+            },
+          ]
+        }
+        data-test-subj="dashboardTable"
+        items={
+          Array [
+            Object {
+              "24_hour_error_trend": null,
+              "dashboard_average_latency": 187.27,
+              "dashboard_error_rate": 14.285714285714285,
+              "dashboard_latency_variance": Array [
+                26.43,
+                325.4,
+                325.4,
+              ],
+              "dashboard_trace_group_name": "client_create_order",
+              "dashboard_traces": 7,
+            },
+          ]
+        }
+        loading={false}
+        onTableChange={[Function]}
+        pagination={
+          Object {
+            "initialPageSize": 5,
+            "pageSizeOptions": Array [
+              5,
+            ],
+          }
+        }
+        responsive={true}
+        sorting={
+          Object {
+            "sort": Object {
+              "direction": "desc",
+              "field": "dashboard_latency_variance",
+            },
+          }
+        }
+        tableLayout="auto"
+      >
+        <EuiBasicTable
+          columns={
+            Array [
+              Object {
+                "align": "left",
+                "field": "dashboard_trace_group_name",
+                "name": <EuiToolTip
+                  content={
+                    <EuiText
+                      size="xs"
+                    >
+                      Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                    </EuiText>
+                  }
+                  delay="regular"
+                  position="top"
+                >
+                  <React.Fragment>
+                    <div>
+                      Service and Operation Name
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </div>
+                    <div>
+                       
+                    </div>
+                  </React.Fragment>
+                </EuiToolTip>,
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "dataType": "number",
+                "field": "dashboard_average_latency",
+                "name": <EuiToolTip
+                  content={
+                    <EuiText
+                      size="xs"
+                    >
+                      Average latency of traces within a trace group in the selected time range.
+                    </EuiText>
+                  }
+                  delay="regular"
+                  position="top"
+                >
+                  <React.Fragment>
+                    <div>
+                      Average latency (ms)
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </div>
+                    <div>
+                       
+                    </div>
+                  </React.Fragment>
+                </EuiToolTip>,
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "dashboard_error_rate",
+                "name": <EuiToolTip
+                  content={
+                    <EuiText
+                      size="xs"
+                    >
+                      Error rate based on count of trace errors within a trace group in the selected time range.
+                    </EuiText>
+                  }
+                  delay="regular"
+                  position="top"
+                >
+                  <React.Fragment>
+                    <div>
+                      Error rate
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </div>
+                    <div>
+                       
+                    </div>
+                  </React.Fragment>
+                </EuiToolTip>,
+                "render": [Function],
+                "sortable": false,
+              },
+              Object {
+                "align": "right",
+                "field": "dashboard_traces",
+                "name": <EuiToolTip
+                  content={
+                    <EuiText
+                      size="xs"
+                    >
+                      Count of traces with unique trace identifiers in the selected time range.
+                    </EuiText>
+                  }
+                  delay="regular"
+                  position="top"
+                >
+                  <React.Fragment>
+                    <div>
+                      Traces
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </div>
+                    <div>
+                       
+                    </div>
+                  </React.Fragment>
+                </EuiToolTip>,
+                "render": [Function],
+                "sortable": true,
+              },
+            ]
+          }
+          data-test-subj="dashboardTable"
+          items={
+            Array [
+              Object {
+                "24_hour_error_trend": null,
+                "dashboard_average_latency": 187.27,
+                "dashboard_error_rate": 14.285714285714285,
+                "dashboard_latency_variance": Array [
+                  26.43,
+                  325.4,
+                  325.4,
+                ],
+                "dashboard_trace_group_name": "client_create_order",
+                "dashboard_traces": 7,
+              },
+            ]
+          }
+          loading={false}
+          noItemsMessage="No items found"
+          onChange={[Function]}
+          pagination={
+            Object {
+              "hidePerPageOptions": undefined,
+              "pageIndex": 0,
+              "pageSize": 5,
+              "pageSizeOptions": Array [
+                5,
+              ],
+              "totalItemCount": 1,
+            }
+          }
+          responsive={true}
+          sorting={
+            Object {
+              "allowNeutralSort": true,
+              "sort": undefined,
+            }
+          }
+          tableLayout="auto"
+        >
+          <div
+            className="euiBasicTable"
+            data-test-subj="dashboardTable"
+          >
+            <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": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_dashboard_trace_group_name_0",
+                                  "name": <EuiToolTip
+                                    content={
+                                      <EuiText
+                                        size="xs"
+                                      >
+                                        Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                                      </EuiText>
+                                    }
+                                    delay="regular"
+                                    position="top"
+                                  >
+                                    <React.Fragment>
+                                      <div>
+                                        Service and Operation Name
+                                         
+                                        <EuiIcon
+                                          className="eui-alignTop"
+                                          color="subdued"
+                                          size="s"
+                                          type="questionInCircle"
+                                        />
+                                      </div>
+                                      <div>
+                                         
+                                      </div>
+                                    </React.Fragment>
+                                  </EuiToolTip>,
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_dashboard_average_latency_1",
+                                  "name": <EuiToolTip
+                                    content={
+                                      <EuiText
+                                        size="xs"
+                                      >
+                                        Average latency of traces within a trace group in the selected time range.
+                                      </EuiText>
+                                    }
+                                    delay="regular"
+                                    position="top"
+                                  >
+                                    <React.Fragment>
+                                      <div>
+                                        Average latency (ms)
+                                         
+                                        <EuiIcon
+                                          className="eui-alignTop"
+                                          color="subdued"
+                                          size="s"
+                                          type="questionInCircle"
+                                        />
+                                      </div>
+                                      <div>
+                                         
+                                      </div>
+                                    </React.Fragment>
+                                  </EuiToolTip>,
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_dashboard_traces_3",
+                                  "name": <EuiToolTip
+                                    content={
+                                      <EuiText
+                                        size="xs"
+                                      >
+                                        Count of traces with unique trace identifiers in the selected time range.
+                                      </EuiText>
+                                    }
+                                    delay="regular"
+                                    position="top"
+                                  >
+                                    <React.Fragment>
+                                      <div>
+                                        Traces
+                                         
+                                        <EuiIcon
+                                          className="eui-alignTop"
+                                          color="subdued"
+                                          size="s"
+                                          type="questionInCircle"
+                                        />
+                                      </div>
+                                      <div>
+                                         
+                                      </div>
+                                    </React.Fragment>
+                                  </EuiToolTip>,
+                                  "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_dashboard_trace_group_name_0"
+                          isSorted={false}
+                          key="_data_h_dashboard_trace_group_name_0"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_dashboard_trace_group_name_0"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Service and Operation Name  ",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Service and Operation Name  "
+                                      >
+                                        <EuiToolTip
+                                          content={
+                                            <EuiText
+                                              size="xs"
+                                            >
+                                              Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                                            </EuiText>
+                                          }
+                                          delay="regular"
+                                          position="top"
+                                        >
+                                          <span
+                                            className="euiToolTipAnchor"
+                                            onKeyUp={[Function]}
+                                            onMouseOut={[Function]}
+                                            onMouseOver={[Function]}
+                                          >
+                                            <div>
+                                              Service and Operation Name
+                                               
+                                              <EuiIcon
+                                                className="eui-alignTop"
+                                                color="subdued"
+                                                size="s"
+                                                type="questionInCircle"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </div>
+                                            <div>
+                                               
+                                            </div>
+                                          </span>
+                                        </EuiToolTip>
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_dashboard_average_latency_1"
+                          isSorted={false}
+                          key="_data_h_dashboard_average_latency_1"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_dashboard_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)  "
+                                      >
+                                        <EuiToolTip
+                                          content={
+                                            <EuiText
+                                              size="xs"
+                                            >
+                                              Average latency of traces within a trace group in the selected time range.
+                                            </EuiText>
+                                          }
+                                          delay="regular"
+                                          position="top"
+                                        >
+                                          <span
+                                            className="euiToolTipAnchor"
+                                            onKeyUp={[Function]}
+                                            onMouseOut={[Function]}
+                                            onMouseOver={[Function]}
+                                          >
+                                            <div>
+                                              Average latency (ms)
+                                               
+                                              <EuiIcon
+                                                className="eui-alignTop"
+                                                color="subdued"
+                                                size="s"
+                                                type="questionInCircle"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </div>
+                                            <div>
+                                               
+                                            </div>
+                                          </span>
+                                        </EuiToolTip>
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_dashboard_error_rate_2"
+                          key="_data_h_dashboard_error_rate_2"
+                        >
+                          <th
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_dashboard_error_rate_2"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <CellContents
+                              className="euiTableCellContent euiTableCellContent--alignRight"
+                              showSortMsg={false}
+                            >
+                              <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  "
+                                    >
+                                      <EuiToolTip
+                                        content={
+                                          <EuiText
+                                            size="xs"
+                                          >
+                                            Error rate based on count of trace errors within a trace group in the selected time range.
+                                          </EuiText>
+                                        }
+                                        delay="regular"
+                                        position="top"
+                                      >
+                                        <span
+                                          className="euiToolTipAnchor"
+                                          onKeyUp={[Function]}
+                                          onMouseOut={[Function]}
+                                          onMouseOver={[Function]}
+                                        >
+                                          <div>
+                                            Error rate
+                                             
+                                            <EuiIcon
+                                              className="eui-alignTop"
+                                              color="subdued"
+                                              size="s"
+                                              type="questionInCircle"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                          </div>
+                                          <div>
+                                             
+                                          </div>
+                                        </span>
+                                      </EuiToolTip>
+                                    </span>
+                                  </EuiI18n>
+                                </EuiInnerText>
+                              </span>
+                            </CellContents>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_dashboard_traces_3"
+                          isSorted={false}
+                          key="_data_h_dashboard_traces_3"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_dashboard_traces_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": "Traces  ",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Traces  "
+                                      >
+                                        <EuiToolTip
+                                          content={
+                                            <EuiText
+                                              size="xs"
+                                            >
+                                              Count of traces with unique trace identifiers in the selected time range.
+                                            </EuiText>
+                                          }
+                                          delay="regular"
+                                          position="top"
+                                        >
+                                          <span
+                                            className="euiToolTipAnchor"
+                                            onKeyUp={[Function]}
+                                            onMouseOut={[Function]}
+                                            onMouseOver={[Function]}
+                                          >
+                                            <div>
+                                              Traces
+                                               
+                                              <EuiIcon
+                                                className="eui-alignTop"
+                                                color="subdued"
+                                                size="s"
+                                                type="questionInCircle"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </div>
+                                            <div>
+                                               
+                                            </div>
+                                          </span>
+                                        </EuiToolTip>
+                                      </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_dashboard_trace_group_name_0_0"
+                            mobileOptions={
+                              Object {
+                                "header": <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <React.Fragment>
+                                    <div>
+                                      Service and Operation Name
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      />
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </React.Fragment>
+                                </EuiToolTip>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <div>
+                                      Service and Operation Name
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </span>
+                                </EuiToolTip>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--overflowingContent"
+                              >
+                                <EuiLink
+                                  className=""
+                                  data-test-subj="dashboard-table-trace-group-name-button"
+                                  key=".0"
+                                  onClick={[Function]}
+                                >
+                                  <button
+                                    className="euiLink euiLink--primary"
+                                    data-test-subj="dashboard-table-trace-group-name-button"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    client_create_order
+                                  </button>
+                                </EuiLink>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_dashboard_average_latency_0_1"
+                            mobileOptions={
+                              Object {
+                                "header": <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Average latency of traces within a trace group in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <React.Fragment>
+                                    <div>
+                                      Average latency (ms)
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      />
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </React.Fragment>
+                                </EuiToolTip>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Average latency of traces within a trace group in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <div>
+                                      Average latency (ms)
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </span>
+                                </EuiToolTip>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                187.27
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_dashboard_error_rate_0_2"
+                            mobileOptions={
+                              Object {
+                                "header": <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Error rate based on count of trace errors within a trace group in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <React.Fragment>
+                                    <div>
+                                      Error rate
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      />
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </React.Fragment>
+                                </EuiToolTip>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Error rate based on count of trace errors within a trace group in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <div>
+                                      Error rate
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </span>
+                                </EuiToolTip>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                <EuiText
+                                  className=""
+                                  key=".0"
+                                  size="s"
+                                >
+                                  <div
+                                    className="euiText euiText--small"
+                                  >
+                                    14.29%
+                                  </div>
+                                </EuiText>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_dashboard_traces_0_3"
+                            mobileOptions={
+                              Object {
+                                "header": <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Count of traces with unique trace identifiers in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <React.Fragment>
+                                    <div>
+                                      Traces
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      />
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </React.Fragment>
+                                </EuiToolTip>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Count of traces with unique trace identifiers in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <div>
+                                      Traces
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </span>
+                                </EuiToolTip>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                <EuiLink
+                                  className=""
+                                  data-test-subj="dashboard-table-traces-button"
+                                  key=".0"
+                                  onClick={[Function]}
+                                >
+                                  <button
+                                    className="euiLink euiLink--primary"
+                                    data-test-subj="dashboard-table-traces-button"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiI18nNumber
+                                      value={7}
+                                    >
+                                      7
+                                    </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": 5,
+                  "pageSizeOptions": Array [
+                    5,
+                  ],
+                  "totalItemCount": 1,
+                }
+              }
+            >
+              <div>
+                <EuiSpacer
+                  size="m"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiTablePagination
+                  activePage={0}
+                  aria-controls="random_html_id"
+                  itemsPerPage={5}
+                  itemsPerPageOptions={
+                    Array [
+                      5,
+                    ]
+                  }
+                  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"
+                                />
+                                : 
+                                5
+                              </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>
+                                          : 
+                                          5
+                                        </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>
+</ErrorRatesTable>
+`;
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/top_latency_table.test.tsx.snap b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/top_latency_table.test.tsx.snap
new file mode 100644
index 0000000000..0935b8fc71
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/top_latency_table.test.tsx.snap
@@ -0,0 +1,3167 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Latency Table component renders empty top error rates table 1`] = `
+<LatencyTable
+  addFilter={[MockFunction]}
+  addFilters={[MockFunction]}
+  addPercentileFilter={[MockFunction]}
+  filters={
+    Array [
+      Object {
+        "disabled": false,
+        "field": "traceGroup",
+        "inverted": false,
+        "operator": "exists",
+        "value": "exists",
+      },
+    ]
+  }
+  items={Array []}
+  loading={false}
+  page="dashboard"
+  setRedirect={[MockFunction]}
+  title="Top 5 Service and Operation Error Rates"
+>
+  <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 Error Rates"
+                totalItems={0}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Top 5 Service and Operation Error Rates
+                    </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>
+</LatencyTable>
+`;
+
+exports[`Latency Table component renders top error rates table with data 1`] = `
+<LatencyTable
+  addFilter={[MockFunction]}
+  addFilters={[MockFunction]}
+  addPercentileFilter={[MockFunction]}
+  filters={
+    Array [
+      Object {
+        "disabled": false,
+        "field": "traceGroup",
+        "inverted": false,
+        "operator": "exists",
+        "value": "exists",
+      },
+    ]
+  }
+  items={
+    Array [
+      Object {
+        "24_hour_latency_trend": null,
+        "dashboard_average_latency": 187.27,
+        "dashboard_error_rate": 14.285714285714285,
+        "dashboard_latency_variance": Array [
+          26.43,
+          325.4,
+          325.4,
+        ],
+        "dashboard_trace_group_name": "client_create_order",
+        "dashboard_traces": 7,
+      },
+    ]
+  }
+  loading={false}
+  page="dashboard"
+  setRedirect={[MockFunction]}
+>
+  <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={1}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Latency by trace group
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (1)
+                    </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>
+      <EuiInMemoryTable
+        columns={
+          Array [
+            Object {
+              "align": "left",
+              "field": "dashboard_trace_group_name",
+              "name": <EuiToolTip
+                content={
+                  <EuiText
+                    size="xs"
+                  >
+                    Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                  </EuiText>
+                }
+                delay="regular"
+                position="top"
+              >
+                <React.Fragment>
+                  <div>
+                    Service and Operation Name
+                     
+                    <EuiIcon
+                      className="eui-alignTop"
+                      color="subdued"
+                      size="s"
+                      type="questionInCircle"
+                    />
+                  </div>
+                  <div>
+                     
+                  </div>
+                </React.Fragment>
+              </EuiToolTip>,
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "center",
+              "field": "dashboard_latency_variance",
+              "name": <React.Fragment>
+                <EuiToolTip
+                  content={
+                    <EuiText
+                      size="xs"
+                    >
+                      Range of latencies for traces within a trace group in the selected time range.
+                    </EuiText>
+                  }
+                  delay="regular"
+                  position="top"
+                >
+                  <span>
+                    Latency variance (ms)
+                     
+                    <EuiIcon
+                      className="eui-alignTop"
+                      color="subdued"
+                      size="s"
+                      type="questionInCircle"
+                    />
+                  </span>
+                </EuiToolTip>
+                <EuiText
+                  color="subdued"
+                  size="xs"
+                >
+                  0                100            200            300            400
+                </EuiText>
+              </React.Fragment>,
+              "render": [Function],
+              "sortable": [Function],
+              "width": "300px",
+            },
+            Object {
+              "align": "right",
+              "dataType": "number",
+              "field": "dashboard_average_latency",
+              "name": <EuiToolTip
+                content={
+                  <EuiText
+                    size="xs"
+                  >
+                    Average latency of traces within a trace group in the selected time range.
+                  </EuiText>
+                }
+                delay="regular"
+                position="top"
+              >
+                <React.Fragment>
+                  <div>
+                    Average latency (ms)
+                     
+                    <EuiIcon
+                      className="eui-alignTop"
+                      color="subdued"
+                      size="s"
+                      type="questionInCircle"
+                    />
+                  </div>
+                  <div>
+                     
+                  </div>
+                </React.Fragment>
+              </EuiToolTip>,
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "dashboard_error_rate",
+              "name": <EuiToolTip
+                content={
+                  <EuiText
+                    size="xs"
+                  >
+                    Error rate based on count of trace errors within a trace group in the selected time range.
+                  </EuiText>
+                }
+                delay="regular"
+                position="top"
+              >
+                <React.Fragment>
+                  <div>
+                    Error rate
+                     
+                    <EuiIcon
+                      className="eui-alignTop"
+                      color="subdued"
+                      size="s"
+                      type="questionInCircle"
+                    />
+                  </div>
+                  <div>
+                     
+                  </div>
+                </React.Fragment>
+              </EuiToolTip>,
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "dashboard_traces",
+              "name": <EuiToolTip
+                content={
+                  <EuiText
+                    size="xs"
+                  >
+                    Count of traces with unique trace identifiers in the selected time range.
+                  </EuiText>
+                }
+                delay="regular"
+                position="top"
+              >
+                <React.Fragment>
+                  <div>
+                    Traces
+                     
+                    <EuiIcon
+                      className="eui-alignTop"
+                      color="subdued"
+                      size="s"
+                      type="questionInCircle"
+                    />
+                  </div>
+                  <div>
+                     
+                  </div>
+                </React.Fragment>
+              </EuiToolTip>,
+              "render": [Function],
+              "sortable": true,
+            },
+          ]
+        }
+        data-test-subj="dashboardTable"
+        items={
+          Array [
+            Object {
+              "24_hour_latency_trend": null,
+              "dashboard_average_latency": 187.27,
+              "dashboard_error_rate": 14.285714285714285,
+              "dashboard_latency_variance": Array [
+                26.43,
+                325.4,
+                325.4,
+              ],
+              "dashboard_trace_group_name": "client_create_order",
+              "dashboard_traces": 7,
+            },
+          ]
+        }
+        loading={false}
+        onTableChange={[Function]}
+        pagination={
+          Object {
+            "initialPageSize": 5,
+            "pageSizeOptions": Array [
+              5,
+            ],
+          }
+        }
+        responsive={true}
+        sorting={
+          Object {
+            "sort": Object {
+              "direction": "desc",
+              "field": "dashboard_latency_variance",
+            },
+          }
+        }
+        tableLayout="auto"
+      >
+        <EuiBasicTable
+          columns={
+            Array [
+              Object {
+                "align": "left",
+                "field": "dashboard_trace_group_name",
+                "name": <EuiToolTip
+                  content={
+                    <EuiText
+                      size="xs"
+                    >
+                      Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                    </EuiText>
+                  }
+                  delay="regular"
+                  position="top"
+                >
+                  <React.Fragment>
+                    <div>
+                      Service and Operation Name
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </div>
+                    <div>
+                       
+                    </div>
+                  </React.Fragment>
+                </EuiToolTip>,
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "center",
+                "field": "dashboard_latency_variance",
+                "name": <React.Fragment>
+                  <EuiToolTip
+                    content={
+                      <EuiText
+                        size="xs"
+                      >
+                        Range of latencies for traces within a trace group in the selected time range.
+                      </EuiText>
+                    }
+                    delay="regular"
+                    position="top"
+                  >
+                    <span>
+                      Latency variance (ms)
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </span>
+                  </EuiToolTip>
+                  <EuiText
+                    color="subdued"
+                    size="xs"
+                  >
+                    0                100            200            300            400
+                  </EuiText>
+                </React.Fragment>,
+                "render": [Function],
+                "sortable": [Function],
+                "width": "300px",
+              },
+              Object {
+                "align": "right",
+                "dataType": "number",
+                "field": "dashboard_average_latency",
+                "name": <EuiToolTip
+                  content={
+                    <EuiText
+                      size="xs"
+                    >
+                      Average latency of traces within a trace group in the selected time range.
+                    </EuiText>
+                  }
+                  delay="regular"
+                  position="top"
+                >
+                  <React.Fragment>
+                    <div>
+                      Average latency (ms)
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </div>
+                    <div>
+                       
+                    </div>
+                  </React.Fragment>
+                </EuiToolTip>,
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "dashboard_error_rate",
+                "name": <EuiToolTip
+                  content={
+                    <EuiText
+                      size="xs"
+                    >
+                      Error rate based on count of trace errors within a trace group in the selected time range.
+                    </EuiText>
+                  }
+                  delay="regular"
+                  position="top"
+                >
+                  <React.Fragment>
+                    <div>
+                      Error rate
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </div>
+                    <div>
+                       
+                    </div>
+                  </React.Fragment>
+                </EuiToolTip>,
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "dashboard_traces",
+                "name": <EuiToolTip
+                  content={
+                    <EuiText
+                      size="xs"
+                    >
+                      Count of traces with unique trace identifiers in the selected time range.
+                    </EuiText>
+                  }
+                  delay="regular"
+                  position="top"
+                >
+                  <React.Fragment>
+                    <div>
+                      Traces
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </div>
+                    <div>
+                       
+                    </div>
+                  </React.Fragment>
+                </EuiToolTip>,
+                "render": [Function],
+                "sortable": true,
+              },
+            ]
+          }
+          data-test-subj="dashboardTable"
+          items={
+            Array [
+              Object {
+                "24_hour_latency_trend": null,
+                "dashboard_average_latency": 187.27,
+                "dashboard_error_rate": 14.285714285714285,
+                "dashboard_latency_variance": Array [
+                  26.43,
+                  325.4,
+                  325.4,
+                ],
+                "dashboard_trace_group_name": "client_create_order",
+                "dashboard_traces": 7,
+              },
+            ]
+          }
+          loading={false}
+          noItemsMessage="No items found"
+          onChange={[Function]}
+          pagination={
+            Object {
+              "hidePerPageOptions": undefined,
+              "pageIndex": 0,
+              "pageSize": 5,
+              "pageSizeOptions": Array [
+                5,
+              ],
+              "totalItemCount": 1,
+            }
+          }
+          responsive={true}
+          sorting={
+            Object {
+              "allowNeutralSort": true,
+              "sort": Object {
+                "direction": "desc",
+                "field": <React.Fragment>
+                  <EuiToolTip
+                    content={
+                      <EuiText
+                        size="xs"
+                      >
+                        Range of latencies for traces within a trace group in the selected time range.
+                      </EuiText>
+                    }
+                    delay="regular"
+                    position="top"
+                  >
+                    <span>
+                      Latency variance (ms)
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </span>
+                  </EuiToolTip>
+                  <EuiText
+                    color="subdued"
+                    size="xs"
+                  >
+                    0                100            200            300            400
+                  </EuiText>
+                </React.Fragment>,
+              },
+            }
+          }
+          tableLayout="auto"
+        >
+          <div
+            className="euiBasicTable"
+            data-test-subj="dashboardTable"
+          >
+            <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": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_dashboard_trace_group_name_0",
+                                  "name": <EuiToolTip
+                                    content={
+                                      <EuiText
+                                        size="xs"
+                                      >
+                                        Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                                      </EuiText>
+                                    }
+                                    delay="regular"
+                                    position="top"
+                                  >
+                                    <React.Fragment>
+                                      <div>
+                                        Service and Operation Name
+                                         
+                                        <EuiIcon
+                                          className="eui-alignTop"
+                                          color="subdued"
+                                          size="s"
+                                          type="questionInCircle"
+                                        />
+                                      </div>
+                                      <div>
+                                         
+                                      </div>
+                                    </React.Fragment>
+                                  </EuiToolTip>,
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": false,
+                                  "isSorted": true,
+                                  "key": "_data_s_dashboard_latency_variance_1",
+                                  "name": <React.Fragment>
+                                    <EuiToolTip
+                                      content={
+                                        <EuiText
+                                          size="xs"
+                                        >
+                                          Range of latencies for traces within a trace group in the selected time range.
+                                        </EuiText>
+                                      }
+                                      delay="regular"
+                                      position="top"
+                                    >
+                                      <span>
+                                        Latency variance (ms)
+                                         
+                                        <EuiIcon
+                                          className="eui-alignTop"
+                                          color="subdued"
+                                          size="s"
+                                          type="questionInCircle"
+                                        />
+                                      </span>
+                                    </EuiToolTip>
+                                    <EuiText
+                                      color="subdued"
+                                      size="xs"
+                                    >
+                                      0                100            200            300            400
+                                    </EuiText>
+                                  </React.Fragment>,
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_dashboard_average_latency_2",
+                                  "name": <EuiToolTip
+                                    content={
+                                      <EuiText
+                                        size="xs"
+                                      >
+                                        Average latency of traces within a trace group in the selected time range.
+                                      </EuiText>
+                                    }
+                                    delay="regular"
+                                    position="top"
+                                  >
+                                    <React.Fragment>
+                                      <div>
+                                        Average latency (ms)
+                                         
+                                        <EuiIcon
+                                          className="eui-alignTop"
+                                          color="subdued"
+                                          size="s"
+                                          type="questionInCircle"
+                                        />
+                                      </div>
+                                      <div>
+                                         
+                                      </div>
+                                    </React.Fragment>
+                                  </EuiToolTip>,
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_dashboard_error_rate_3",
+                                  "name": <EuiToolTip
+                                    content={
+                                      <EuiText
+                                        size="xs"
+                                      >
+                                        Error rate based on count of trace errors within a trace group in the selected time range.
+                                      </EuiText>
+                                    }
+                                    delay="regular"
+                                    position="top"
+                                  >
+                                    <React.Fragment>
+                                      <div>
+                                        Error rate
+                                         
+                                        <EuiIcon
+                                          className="eui-alignTop"
+                                          color="subdued"
+                                          size="s"
+                                          type="questionInCircle"
+                                        />
+                                      </div>
+                                      <div>
+                                         
+                                      </div>
+                                    </React.Fragment>
+                                  </EuiToolTip>,
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_dashboard_traces_4",
+                                  "name": <EuiToolTip
+                                    content={
+                                      <EuiText
+                                        size="xs"
+                                      >
+                                        Count of traces with unique trace identifiers in the selected time range.
+                                      </EuiText>
+                                    }
+                                    delay="regular"
+                                    position="top"
+                                  >
+                                    <React.Fragment>
+                                      <div>
+                                        Traces
+                                         
+                                        <EuiIcon
+                                          className="eui-alignTop"
+                                          color="subdued"
+                                          size="s"
+                                          type="questionInCircle"
+                                        />
+                                      </div>
+                                      <div>
+                                         
+                                      </div>
+                                    </React.Fragment>
+                                  </EuiToolTip>,
+                                  "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_dashboard_trace_group_name_0"
+                          isSorted={false}
+                          key="_data_h_dashboard_trace_group_name_0"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_dashboard_trace_group_name_0"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Service and Operation Name  ",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Service and Operation Name  "
+                                      >
+                                        <EuiToolTip
+                                          content={
+                                            <EuiText
+                                              size="xs"
+                                            >
+                                              Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                                            </EuiText>
+                                          }
+                                          delay="regular"
+                                          position="top"
+                                        >
+                                          <span
+                                            className="euiToolTipAnchor"
+                                            onKeyUp={[Function]}
+                                            onMouseOut={[Function]}
+                                            onMouseOver={[Function]}
+                                          >
+                                            <div>
+                                              Service and Operation Name
+                                               
+                                              <EuiIcon
+                                                className="eui-alignTop"
+                                                color="subdued"
+                                                size="s"
+                                                type="questionInCircle"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </div>
+                                            <div>
+                                               
+                                            </div>
+                                          </span>
+                                        </EuiToolTip>
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="center"
+                          data-test-subj="tableHeaderCell_dashboard_latency_variance_1"
+                          isSortAscending={false}
+                          isSorted={true}
+                          key="_data_h_dashboard_latency_variance_1"
+                          onSort={[Function]}
+                          width="300px"
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="descending"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_dashboard_latency_variance_1"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": "300px",
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignCenter"
+                                isSortAscending={false}
+                                isSorted={true}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignCenter"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Latency variance (ms) 0                100            200            300            400",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Latency variance (ms) 0                100            200            300            400"
+                                      >
+                                        <EuiToolTip
+                                          content={
+                                            <EuiText
+                                              size="xs"
+                                            >
+                                              Range of latencies for traces within a trace group in the selected time range.
+                                            </EuiText>
+                                          }
+                                          delay="regular"
+                                          position="top"
+                                        >
+                                          <span
+                                            className="euiToolTipAnchor"
+                                            onKeyUp={[Function]}
+                                            onMouseOut={[Function]}
+                                            onMouseOver={[Function]}
+                                          >
+                                            <span
+                                              onBlur={[Function]}
+                                              onFocus={[Function]}
+                                            >
+                                              Latency variance (ms)
+                                               
+                                              <EuiIcon
+                                                className="eui-alignTop"
+                                                color="subdued"
+                                                size="s"
+                                                type="questionInCircle"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                    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>
+                                        </EuiToolTip>
+                                        <EuiText
+                                          color="subdued"
+                                          size="xs"
+                                        >
+                                          <div
+                                            className="euiText euiText--extraSmall"
+                                          >
+                                            <EuiTextColor
+                                              color="subdued"
+                                              component="div"
+                                            >
+                                              <div
+                                                className="euiTextColor euiTextColor--subdued"
+                                              >
+                                                0                100            200            300            400
+                                              </div>
+                                            </EuiTextColor>
+                                          </div>
+                                        </EuiText>
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                  <EuiIcon
+                                    className="euiTableSortIcon"
+                                    size="m"
+                                    type="sortDown"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_dashboard_average_latency_2"
+                          isSorted={false}
+                          key="_data_h_dashboard_average_latency_2"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_dashboard_average_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": "Average latency (ms)  ",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Average latency (ms)  "
+                                      >
+                                        <EuiToolTip
+                                          content={
+                                            <EuiText
+                                              size="xs"
+                                            >
+                                              Average latency of traces within a trace group in the selected time range.
+                                            </EuiText>
+                                          }
+                                          delay="regular"
+                                          position="top"
+                                        >
+                                          <span
+                                            className="euiToolTipAnchor"
+                                            onKeyUp={[Function]}
+                                            onMouseOut={[Function]}
+                                            onMouseOver={[Function]}
+                                          >
+                                            <div>
+                                              Average latency (ms)
+                                               
+                                              <EuiIcon
+                                                className="eui-alignTop"
+                                                color="subdued"
+                                                size="s"
+                                                type="questionInCircle"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </div>
+                                            <div>
+                                               
+                                            </div>
+                                          </span>
+                                        </EuiToolTip>
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_dashboard_error_rate_3"
+                          isSorted={false}
+                          key="_data_h_dashboard_error_rate_3"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_dashboard_error_rate_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": "Error rate  ",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Error rate  "
+                                      >
+                                        <EuiToolTip
+                                          content={
+                                            <EuiText
+                                              size="xs"
+                                            >
+                                              Error rate based on count of trace errors within a trace group in the selected time range.
+                                            </EuiText>
+                                          }
+                                          delay="regular"
+                                          position="top"
+                                        >
+                                          <span
+                                            className="euiToolTipAnchor"
+                                            onKeyUp={[Function]}
+                                            onMouseOut={[Function]}
+                                            onMouseOver={[Function]}
+                                          >
+                                            <div>
+                                              Error rate
+                                               
+                                              <EuiIcon
+                                                className="eui-alignTop"
+                                                color="subdued"
+                                                size="s"
+                                                type="questionInCircle"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </div>
+                                            <div>
+                                               
+                                            </div>
+                                          </span>
+                                        </EuiToolTip>
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_dashboard_traces_4"
+                          isSorted={false}
+                          key="_data_h_dashboard_traces_4"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_dashboard_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  "
+                                      >
+                                        <EuiToolTip
+                                          content={
+                                            <EuiText
+                                              size="xs"
+                                            >
+                                              Count of traces with unique trace identifiers in the selected time range.
+                                            </EuiText>
+                                          }
+                                          delay="regular"
+                                          position="top"
+                                        >
+                                          <span
+                                            className="euiToolTipAnchor"
+                                            onKeyUp={[Function]}
+                                            onMouseOut={[Function]}
+                                            onMouseOver={[Function]}
+                                          >
+                                            <div>
+                                              Traces
+                                               
+                                              <EuiIcon
+                                                className="eui-alignTop"
+                                                color="subdued"
+                                                size="s"
+                                                type="questionInCircle"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </div>
+                                            <div>
+                                               
+                                            </div>
+                                          </span>
+                                        </EuiToolTip>
+                                      </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_dashboard_trace_group_name_0_0"
+                            mobileOptions={
+                              Object {
+                                "header": <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <React.Fragment>
+                                    <div>
+                                      Service and Operation Name
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      />
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </React.Fragment>
+                                </EuiToolTip>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <div>
+                                      Service and Operation Name
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </span>
+                                </EuiToolTip>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--overflowingContent"
+                              >
+                                <EuiLink
+                                  className=""
+                                  data-test-subj="dashboard-table-trace-group-name-button"
+                                  key=".0"
+                                  onClick={[Function]}
+                                >
+                                  <button
+                                    className="euiLink euiLink--primary"
+                                    data-test-subj="dashboard-table-trace-group-name-button"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    client_create_order
+                                  </button>
+                                </EuiLink>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="center"
+                            key="_data_column_dashboard_latency_variance_0_1"
+                            mobileOptions={
+                              Object {
+                                "header": <React.Fragment>
+                                  <EuiToolTip
+                                    content={
+                                      <EuiText
+                                        size="xs"
+                                      >
+                                        Range of latencies for traces within a trace group in the selected time range.
+                                      </EuiText>
+                                    }
+                                    delay="regular"
+                                    position="top"
+                                  >
+                                    <span>
+                                      Latency variance (ms)
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      />
+                                    </span>
+                                  </EuiToolTip>
+                                  <EuiText
+                                    color="subdued"
+                                    size="xs"
+                                  >
+                                    0                100            200            300            400
+                                  </EuiText>
+                                </React.Fragment>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            width="300px"
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": "300px",
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Range of latencies for traces within a trace group in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <span
+                                      onBlur={[Function]}
+                                      onFocus={[Function]}
+                                    >
+                                      Latency variance (ms)
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                            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>
+                                </EuiToolTip>
+                                <EuiText
+                                  color="subdued"
+                                  size="xs"
+                                >
+                                  <div
+                                    className="euiText euiText--extraSmall"
+                                  >
+                                    <EuiTextColor
+                                      color="subdued"
+                                      component="div"
+                                    >
+                                      <div
+                                        className="euiTextColor euiTextColor--subdued"
+                                      >
+                                        0                100            200            300            400
+                                      </div>
+                                    </EuiTextColor>
+                                  </div>
+                                </EuiText>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignCenter euiTableCellContent--overflowingContent"
+                              >
+                                <BoxPlt
+                                  className=""
+                                  key=".0"
+                                  plotParams={
+                                    Object {
+                                      "addFilter": [Function],
+                                      "currPercentileFilter": "",
+                                      "left": 26.43,
+                                      "max": 412,
+                                      "mid": 325.4,
+                                      "min": 0,
+                                      "right": 325.4,
+                                    }
+                                  }
+                                >
+                                  <EuiToolTip
+                                    content={
+                                      <EuiFlexGrid
+                                        columns={2}
+                                        gutterSize="s"
+                                        responsive={false}
+                                      >
+                                        <EuiFlexItem>
+                                          <EuiText
+                                            size="xs"
+                                            style={
+                                              Object {
+                                                "color": "#c9cbce",
+                                              }
+                                            }
+                                          >
+                                            <p>
+                                              Latency &lt;95 percentile
+                                            </p>
+                                          </EuiText>
+                                        </EuiFlexItem>
+                                        <EuiFlexItem>
+                                          <EuiText
+                                            size="xs"
+                                            style={
+                                              Object {
+                                                "color": "#c9cbce",
+                                              }
+                                            }
+                                          >
+                                            <p>
+                                              26ms - 325ms
+                                            </p>
+                                          </EuiText>
+                                        </EuiFlexItem>
+                                        <EuiFlexItem>
+                                          <EuiText
+                                            size="xs"
+                                            style={
+                                              Object {
+                                                "color": "#c9cbce",
+                                              }
+                                            }
+                                          >
+                                            <p>
+                                              Latency &gt;=95 percentile
+                                            </p>
+                                          </EuiText>
+                                        </EuiFlexItem>
+                                        <EuiFlexItem>
+                                          <EuiText
+                                            size="xs"
+                                            style={
+                                              Object {
+                                                "color": "#c9cbce",
+                                              }
+                                            }
+                                          >
+                                            <p>
+                                              325ms - 325ms
+                                            </p>
+                                          </EuiText>
+                                        </EuiFlexItem>
+                                      </EuiFlexGrid>
+                                    }
+                                    delay="regular"
+                                    onMouseOut={[Function]}
+                                    position="bottom"
+                                  >
+                                    <span
+                                      className="euiToolTipAnchor"
+                                      onKeyUp={[Function]}
+                                      onMouseOut={[Function]}
+                                      onMouseOver={[Function]}
+                                    >
+                                      <Plt
+                                        data={
+                                          Array [
+                                            Object {
+                                              "hoverinfo": "none",
+                                              "marker": Object {
+                                                "color": "rgba(0, 0, 0, 0)",
+                                              },
+                                              "orientation": "h",
+                                              "showlegend": false,
+                                              "type": "bar",
+                                              "width": 1,
+                                              "x": Array [
+                                                26.43,
+                                              ],
+                                              "y": Array [
+                                                0,
+                                              ],
+                                            },
+                                            Object {
+                                              "marker": Object {
+                                                "color": "#ffffff",
+                                                "line": Object {
+                                                  "color": "#957ac9",
+                                                  "width": 1,
+                                                },
+                                              },
+                                              "orientation": "h",
+                                              "type": "bar",
+                                              "width": 1,
+                                              "x": Array [
+                                                298.96999999999997,
+                                              ],
+                                              "y": Array [
+                                                0,
+                                              ],
+                                            },
+                                            Object {
+                                              "marker": Object {
+                                                "color": "#957ac9",
+                                                "line": Object {
+                                                  "color": "#957ac9",
+                                                  "width": 1,
+                                                },
+                                              },
+                                              "orientation": "h",
+                                              "type": "bar",
+                                              "width": 1,
+                                              "x": Array [
+                                                0,
+                                              ],
+                                              "y": Array [
+                                                0,
+                                              ],
+                                            },
+                                          ]
+                                        }
+                                        layout={
+                                          Object {
+                                            "height": 15,
+                                            "margin": Object {
+                                              "b": 0,
+                                              "l": 0,
+                                              "pad": 0,
+                                              "r": 0,
+                                              "t": 0,
+                                            },
+                                            "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                                            "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                                            "width": 250,
+                                            "xaxis": Object {
+                                              "fixedrange": true,
+                                              "range": Array [
+                                                0,
+                                                412,
+                                              ],
+                                              "showgrid": false,
+                                              "visible": false,
+                                            },
+                                            "yaxis": Object {
+                                              "fixedrange": true,
+                                              "range": Array [
+                                                -0.6,
+                                                0.6,
+                                              ],
+                                              "showgrid": false,
+                                              "visible": false,
+                                            },
+                                          }
+                                        }
+                                        onBlur={[Function]}
+                                        onClickHandler={[Function]}
+                                        onFocus={[Function]}
+                                        onHoverHandler={[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": 1,
+                                                "x": Array [
+                                                  26.43,
+                                                ],
+                                                "y": Array [
+                                                  0,
+                                                ],
+                                              },
+                                              Object {
+                                                "marker": Object {
+                                                  "color": "#ffffff",
+                                                  "line": Object {
+                                                    "color": "#957ac9",
+                                                    "width": 1,
+                                                  },
+                                                },
+                                                "orientation": "h",
+                                                "type": "bar",
+                                                "width": 1,
+                                                "x": Array [
+                                                  298.96999999999997,
+                                                ],
+                                                "y": Array [
+                                                  0,
+                                                ],
+                                              },
+                                              Object {
+                                                "marker": Object {
+                                                  "color": "#957ac9",
+                                                  "line": Object {
+                                                    "color": "#957ac9",
+                                                    "width": 1,
+                                                  },
+                                                },
+                                                "orientation": "h",
+                                                "type": "bar",
+                                                "width": 1,
+                                                "x": Array [
+                                                  0,
+                                                ],
+                                                "y": Array [
+                                                  0,
+                                                ],
+                                              },
+                                            ]
+                                          }
+                                          debug={false}
+                                          divId="explorerPlotComponent"
+                                          layout={
+                                            Object {
+                                              "autosize": true,
+                                              "barmode": "stack",
+                                              "height": 15,
+                                              "hovermode": "closest",
+                                              "legend": Object {
+                                                "orientation": "h",
+                                                "traceorder": "normal",
+                                              },
+                                              "margin": Object {
+                                                "b": 0,
+                                                "l": 0,
+                                                "pad": 0,
+                                                "r": 0,
+                                                "t": 0,
+                                              },
+                                              "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                                              "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                                              "showlegend": false,
+                                              "width": 250,
+                                              "xaxis": Object {
+                                                "fixedrange": true,
+                                                "range": Array [
+                                                  0,
+                                                  412,
+                                                ],
+                                                "showgrid": false,
+                                                "visible": false,
+                                              },
+                                              "yaxis": Object {
+                                                "fixedrange": true,
+                                                "range": Array [
+                                                  -0.6,
+                                                  0.6,
+                                                ],
+                                                "showgrid": false,
+                                                "visible": false,
+                                              },
+                                            }
+                                          }
+                                          onClick={[Function]}
+                                          onHover={[Function]}
+                                          style={
+                                            Object {
+                                              "height": "100%",
+                                              "width": "100%",
+                                            }
+                                          }
+                                          useResizeHandler={true}
+                                        >
+                                          <div
+                                            id="explorerPlotComponent"
+                                            style={
+                                              Object {
+                                                "height": "100%",
+                                                "width": "100%",
+                                              }
+                                            }
+                                          />
+                                        </PlotlyComponent>
+                                      </Plt>
+                                    </span>
+                                  </EuiToolTip>
+                                </BoxPlt>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_dashboard_average_latency_0_2"
+                            mobileOptions={
+                              Object {
+                                "header": <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Average latency of traces within a trace group in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <React.Fragment>
+                                    <div>
+                                      Average latency (ms)
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      />
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </React.Fragment>
+                                </EuiToolTip>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Average latency of traces within a trace group in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <div>
+                                      Average latency (ms)
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </span>
+                                </EuiToolTip>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                187.27
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_dashboard_error_rate_0_3"
+                            mobileOptions={
+                              Object {
+                                "header": <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Error rate based on count of trace errors within a trace group in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <React.Fragment>
+                                    <div>
+                                      Error rate
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      />
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </React.Fragment>
+                                </EuiToolTip>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Error rate based on count of trace errors within a trace group in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <div>
+                                      Error rate
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </span>
+                                </EuiToolTip>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                <EuiText
+                                  className=""
+                                  key=".0"
+                                  size="s"
+                                >
+                                  <div
+                                    className="euiText euiText--small"
+                                  >
+                                    14.29%
+                                  </div>
+                                </EuiText>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_dashboard_traces_0_4"
+                            mobileOptions={
+                              Object {
+                                "header": <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Count of traces with unique trace identifiers in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <React.Fragment>
+                                    <div>
+                                      Traces
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      />
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </React.Fragment>
+                                </EuiToolTip>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Count of traces with unique trace identifiers in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <div>
+                                      Traces
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </span>
+                                </EuiToolTip>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                <EuiLink
+                                  className=""
+                                  data-test-subj="dashboard-table-traces-button"
+                                  key=".0"
+                                  onClick={[Function]}
+                                >
+                                  <button
+                                    className="euiLink euiLink--primary"
+                                    data-test-subj="dashboard-table-traces-button"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiI18nNumber
+                                      value={7}
+                                    >
+                                      7
+                                    </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": 5,
+                  "pageSizeOptions": Array [
+                    5,
+                  ],
+                  "totalItemCount": 1,
+                }
+              }
+            >
+              <div>
+                <EuiSpacer
+                  size="m"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiTablePagination
+                  activePage={0}
+                  aria-controls="random_html_id"
+                  itemsPerPage={5}
+                  itemsPerPageOptions={
+                    Array [
+                      5,
+                    ]
+                  }
+                  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"
+                                />
+                                : 
+                                5
+                              </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>
+                                          : 
+                                          5
+                                        </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>
+</LatencyTable>
+`;
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/dashboard.test.tsx b/public/components/trace_analytics/components/dashboard/__tests__/dashboard.test.tsx
index 0f5c169188..703b0a0275 100644
--- a/public/components/trace_analytics/components/dashboard/__tests__/dashboard.test.tsx
+++ b/public/components/trace_analytics/components/dashboard/__tests__/dashboard.test.tsx
@@ -12,6 +12,10 @@ import { coreStartMock } from '../../../../../../test/__mocks__/coreMocks';
 
 describe('Dashboard component', () => {
   configure({ adapter: new Adapter() });
+  const modes = [
+    { id: 'jaeger', title: 'Jaeger' },
+    { id: 'data_prepper', title: 'Data Prepper' },
+  ];
 
   it('renders empty dashboard', () => {
     const core = coreStartMock;
@@ -48,8 +52,56 @@ describe('Dashboard component', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={false}
         page="dashboard"
+        mode="data_prepper"
+        dataPrepperIndicesExist={true}
+        modes={modes}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders empty jaeger dashboard', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const wrapper = mount(
+      <Dashboard
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[
+          {
+            text: 'test',
+            href: 'test#/',
+          },
+        ]}
+        childBreadcrumbs={[
+          {
+            text: 'Trace analytics',
+            href: '#/trace_analytics/home',
+          },
+          {
+            text: 'Dashboard',
+            href: '#/trace_analytics/home',
+          },
+        ]}
+        query=""
+        setQuery={setQuery}
+        filters={[]}
+        appConfigs={[]}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        page="dashboard"
+        mode="jaeger"
+        dataPrepperIndicesExist={false}
+        jaegerIndicesExist={true}
+        modes={modes}
       />
     );
 
@@ -91,8 +143,10 @@ describe('Dashboard component', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={true}
         page="dashboard"
+        mode="data_prepper"
+        dataPrepperIndicesExist={true}
+        modes={modes}
       />
     );
 
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/mode_picker.test.tsx b/public/components/trace_analytics/components/dashboard/__tests__/mode_picker.test.tsx
new file mode 100644
index 0000000000..66a46d31ce
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/__tests__/mode_picker.test.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import _ from 'lodash';
+import React from 'react';
+import { DataSourcePicker } from '../mode_picker';
+
+describe('Mode picker component', () => {
+  configure({ adapter: new Adapter() });
+  const modes = [
+    { id: 'jaeger', title: 'Jaeger' },
+    { id: 'data_prepper', title: 'Data Prepper' },
+  ];
+
+  it('renders mode picker', async () => {
+    const setMode = jest.fn()
+    const wrapper = mount(
+        <DataSourcePicker modes={modes} selectedMode={'jaeger'} setMode={setMode} />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+    wrapper.find('[className="dscIndexPattern__triggerButton"]').simulate('click');
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/top_error_rates_table.test.tsx b/public/components/trace_analytics/components/dashboard/__tests__/top_error_rates_table.test.tsx
new file mode 100644
index 0000000000..f9a459b473
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/__tests__/top_error_rates_table.test.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { ErrorRatesTable } from '../top_error_rates_table';
+
+describe('Error Rates Table component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty top error rates table', () => {
+    const wrapper = mount(
+        <ErrorRatesTable
+        title={'Top 5 Service and Operation Error Rates'}
+        items={[]}
+        filters={[
+          {
+            field: 'traceGroup',
+            operator: 'exists',
+            value: 'exists',
+            inverted: false,
+            disabled: false,
+          },
+        ]}
+        addFilters={jest.fn()}
+        addFilter={jest.fn()}
+        addPercentileFilter={jest.fn()}
+        setRedirect={jest.fn()}
+        loading={false}
+        page="dashboard"
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders top error rates table with data', () => {
+    const tableItems = [
+        {
+          dashboard_trace_group_name: 'client_create_order',
+          dashboard_average_latency: 187.27,
+          dashboard_traces: 7,
+          dashboard_latency_variance: [26.43, 325.4, 325.4],
+          dashboard_error_rate: 14.285714285714285,
+          '24_hour_error_trend': null,
+        },
+      ];
+      const addFilter = jest.fn();
+      const addPercentileFilter = jest.fn();
+      const setRedirect = jest.fn();
+      const wrapper = mount(
+        <ErrorRatesTable
+          items={tableItems}
+          filters={[
+            {
+              field: 'traceGroup',
+              operator: 'exists',
+              value: 'exists',
+              inverted: false,
+              disabled: false,
+            },
+          ]}
+          addFilters={jest.fn()}
+          addFilter={addFilter}
+          addPercentileFilter={addPercentileFilter}
+          setRedirect={setRedirect}
+          loading={false}
+          page="dashboard"
+        />
+      );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/top_latency_table.test.tsx b/public/components/trace_analytics/components/dashboard/__tests__/top_latency_table.test.tsx
new file mode 100644
index 0000000000..e8365c49b5
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/__tests__/top_latency_table.test.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { LatencyTable } from '../top_latency_table';
+
+describe('Latency Table component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty top error rates table', () => {
+    const wrapper = mount(
+        <LatencyTable
+        title={'Top 5 Service and Operation Error Rates'}
+        items={[]}
+        filters={[
+          {
+            field: 'traceGroup',
+            operator: 'exists',
+            value: 'exists',
+            inverted: false,
+            disabled: false,
+          },
+        ]}
+        addFilters={jest.fn()}
+        addFilter={jest.fn()}
+        addPercentileFilter={jest.fn()}
+        setRedirect={jest.fn()}
+        loading={false}
+        page="dashboard"
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders top error rates table with data', () => {
+    const tableItems = [
+        {
+          dashboard_trace_group_name: 'client_create_order',
+          dashboard_average_latency: 187.27,
+          dashboard_traces: 7,
+          dashboard_latency_variance: [26.43, 325.4, 325.4],
+          dashboard_error_rate: 14.285714285714285,
+          '24_hour_latency_trend': null,
+        },
+      ];
+      const addFilter = jest.fn();
+      const addPercentileFilter = jest.fn();
+      const setRedirect = jest.fn();
+      const wrapper = mount(
+        <LatencyTable
+          items={tableItems}
+          filters={[
+            {
+              field: 'traceGroup',
+              operator: 'exists',
+              value: 'exists',
+              inverted: false,
+              disabled: false,
+            },
+          ]}
+          addFilters={jest.fn()}
+          addFilter={addFilter}
+          addPercentileFilter={addPercentileFilter}
+          setRedirect={setRedirect}
+          loading={false}
+          page="dashboard"
+        />
+      );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/dashboard/dashboard.tsx b/public/components/trace_analytics/components/dashboard/dashboard.tsx
index c5bf0a501f..71f656f978 100644
--- a/public/components/trace_analytics/components/dashboard/dashboard.tsx
+++ b/public/components/trace_analytics/components/dashboard/dashboard.tsx
@@ -4,13 +4,22 @@
  */
 
 import { EuiBreadcrumb, EuiTitle } from '@elastic/eui';
+import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import React from 'react';
-import { TraceAnalyticsComponentDeps } from '../../home';
+import { TraceAnalyticsComponentDeps, TraceAnalyticsMode } from '../../home';
 import { DashboardContent } from './dashboard_content';
+import { DataSourcePicker } from './mode_picker';
 
 export interface DashboardProps extends TraceAnalyticsComponentDeps {
   childBreadcrumbs: EuiBreadcrumb[];
   page: 'dashboard' | 'app';
+  toasts: Toast[];
+  setToast?: (
+    title: string,
+    color?: string,
+    text?: React.ReactChild | undefined,
+    side?: string | undefined
+  ) => void;
 }
 
 export function Dashboard(props: DashboardProps) {
@@ -19,6 +28,7 @@ export function Dashboard(props: DashboardProps) {
       <EuiTitle size="l">
         <h2 style={{ fontWeight: 430 }}>Dashboard</h2>
       </EuiTitle>
+      <DataSourcePicker modes={props.modes} selectedMode={props.mode} setMode={props.setMode!} />
       <DashboardContent {...props} />
     </>
   );
diff --git a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
index 4faa2a1ede..2cc0af94bd 100644
--- a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
+++ b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
@@ -12,6 +12,8 @@ import {
   handleDashboardErrorRatePltRequest,
   handleDashboardRequest,
   handleDashboardThroughputPltRequest,
+  handleJaegerDashboardRequest,
+  handleJaegerErrorDashboardRequest,
 } from '../../requests/dashboard_request_handler';
 import { handleServiceMapRequest } from '../../requests/services_request_handler';
 import { FilterType } from '../common/filters/filters';
@@ -22,6 +24,7 @@ import {
   milliToNanoSec,
   minFixedInterval,
   MissingConfigurationMessage,
+  processTimeStamp,
 } from '../common/helper_functions';
 import { ErrorRatePlt } from '../common/plots/error_rate_plt';
 import { ServiceMap, ServiceObject } from '../common/plots/service_map';
@@ -29,6 +32,7 @@ import { ThroughputPlt } from '../common/plots/throughput_plt';
 import { SearchBar } from '../common/search_bar';
 import { DashboardProps } from './dashboard';
 import { DashboardTable } from './dashboard_table';
+import { TopGroupsPage } from './top_groups_page';
 
 export function DashboardContent(props: DashboardProps) {
   const {
@@ -42,13 +46,19 @@ export function DashboardContent(props: DashboardProps) {
     childBreadcrumbs,
     parentBreadcrumbs,
     filters,
-    indicesExist,
     setStartTime,
     setEndTime,
     setQuery,
     setFilters,
+    mode,
+    dataPrepperIndicesExist,
+    jaegerIndicesExist,
+    toasts,
+    setToast,
   } = props;
   const [tableItems, setTableItems] = useState([]);
+  const [jaegerTableItems, setJaegerTableItems] = useState([]);
+  const [jaegerErrorTableItems, setJaegerErrorTableItems] = useState([]);
   const [throughputPltItems, setThroughputPltItems] = useState({ items: [], fixedInterval: '1h' });
   const [errorRatePltItems, setErrorRatePltItems] = useState({ items: [], fixedInterval: '1h' });
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
@@ -59,10 +69,18 @@ export function DashboardContent(props: DashboardProps) {
   const [filteredService, setFilteredService] = useState('');
   const [redirect, setRedirect] = useState(true);
   const [loading, setLoading] = useState(false);
+  const [showTimeoutToast, setShowTimeoutToast] = useState(false);
+
+  useEffect(() => {
+    if (showTimeoutToast === true && toasts.length === 0) {
+      setToast!('Query took too long to execute.', 'danger', 'Reduce time range or filter your data. If issue persists, consider increasing your cluster size.')
+    }
+    setShowTimeoutToast(false);
+  }, [showTimeoutToast])
 
   useEffect(() => {
     chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]);
-    const validFilters = getValidFilterFields(page);
+    const validFilters = getValidFilterFields(mode, page);
     setFilters([
       ...filters.map((filter) => ({
         ...filter,
@@ -75,59 +93,131 @@ export function DashboardContent(props: DashboardProps) {
   useEffect(() => {
     let newFilteredService = '';
     for (const filter of filters) {
-      if (filter.field === 'serviceName') {
-        newFilteredService = filter.value;
-        break;
+      if (mode === 'data_prepper') { 
+        if (filter.field === 'serviceName') {
+          newFilteredService = filter.value;
+          break;
+        }
+      } else if (mode === 'jaeger') {
+        if (filter.field === 'process.serviceName') {
+          newFilteredService = filter.value;
+          break;
+        }
       }
     }
     setFilteredService(newFilteredService);
-    if (!redirect && indicesExist) refresh(newFilteredService);
-  }, [filters, startTime, endTime, appConfigs]);
+    if (!redirect && ((mode === 'data_prepper' && dataPrepperIndicesExist) || (mode === 'jaeger' && jaegerIndicesExist))) refresh(newFilteredService);
+  }, [filters, startTime, endTime, appConfigs, redirect, mode, dataPrepperIndicesExist, jaegerIndicesExist]);
 
   const refresh = async (currService?: string) => {
     setLoading(true);
-    const DSL = filtersToDsl(filters, query, startTime, endTime, page, appConfigs);
-    const timeFilterDSL = filtersToDsl([], '', startTime, endTime, page, appConfigs);
-    const latencyTrendStartTime = dateMath.parse(endTime, { roundUp: true })?.subtract(24, 'hours').toISOString()!;
+    const DSL = filtersToDsl(
+      mode,
+      filters,
+      query,
+      processTimeStamp(startTime, mode),
+      processTimeStamp(endTime, mode),
+      page,
+      appConfigs
+    );
+    const timeFilterDSL = filtersToDsl(
+      mode,
+      [],
+      '',
+      processTimeStamp(startTime, mode),
+      processTimeStamp(endTime, mode),
+      page,
+      appConfigs
+    );
+    const latencyTrendStartTime = dateMath
+      .parse(endTime, { roundUp: true })
+      ?.subtract(24, 'hours')
+      .toISOString()!;
     const latencyTrendDSL = filtersToDsl(
+      mode,
       filters,
       query,
-      latencyTrendStartTime,
-      endTime,
+      processTimeStamp(latencyTrendStartTime, mode),
+      processTimeStamp(endTime, mode),
       page,
       appConfigs
     );
     const fixedInterval = minFixedInterval(startTime, endTime);
+    if (mode === 'jaeger') {
+      handleJaegerDashboardRequest(
+        http,
+        DSL,
+        timeFilterDSL,
+        latencyTrendDSL,
+        tableItems,
+        setJaegerTableItems,
+        mode,
+        () => setShowTimeoutToast(true),
+        // () => {
+        //   if (toasts.length === 0) { 
+        //     setToast!('Query took too long to execute.', 'danger', 'Reduce time range or filter your data. If issue persists, consider increasing your cluster size.');
+        //   }
+        // },
+        setPercentileMap
+      ).finally(() => setLoading(false))
+      handleJaegerErrorDashboardRequest(
+        http,
+        DSL,
+        timeFilterDSL,
+        latencyTrendDSL,
+        tableItems,
+        setJaegerErrorTableItems,
+        mode,
+        () => setShowTimeoutToast(true),
+        // () => {
+        //   if (toasts.length === 0) { 
+        //     setToast!('Query took too long to execute.', 'danger', 'Reduce time range or filter your data. If issue persists, consider increasing your cluster size.');
+        //   }
+        // },
+        setPercentileMap
+      ).finally(() => setLoading(false));
+    } else if (mode === 'data_prepper') {
+      handleDashboardRequest(
+        http,
+        DSL,
+        timeFilterDSL,
+        latencyTrendDSL,
+        tableItems,
+        setTableItems,
+        mode,
+        setPercentileMap
+      ).then(() => setLoading(false));
+      // service map should not be filtered by service name (https://github.com/opensearch-project/observability/issues/442)
+      const serviceMapDSL = _.cloneDeep(DSL);
+      serviceMapDSL.query.bool.must = serviceMapDSL.query.bool.must.filter(
+        (must: any) => must?.term?.serviceName == null
+      );
+      handleServiceMapRequest(
+        http,
+        serviceMapDSL,
+        mode,
+        setServiceMap,
+        currService || filteredService
+      );
+    }
 
-    handleDashboardRequest(
-      http,
-      DSL,
-      timeFilterDSL,
-      latencyTrendDSL,
-      tableItems,
-      setTableItems,
-      setPercentileMap
-    ).then(() => setLoading(false));
     handleDashboardThroughputPltRequest(
       http,
       DSL,
       fixedInterval,
       throughputPltItems,
-      setThroughputPltItems
+      setThroughputPltItems,
+      mode
     );
+
     handleDashboardErrorRatePltRequest(
       http,
       DSL,
       fixedInterval,
       errorRatePltItems,
-      setErrorRatePltItems
-    );
-    // service map should not be filtered by service name (https://github.com/opensearch-project/observability/issues/442)
-    const serviceMapDSL = _.cloneDeep(DSL);
-    serviceMapDSL.query.bool.must = serviceMapDSL.query.bool.must.filter(
-      (must: any) => must?.term?.serviceName == null
+      setErrorRatePltItems,
+      mode
     );
-    handleServiceMapRequest(http, serviceMapDSL, setServiceMap, currService || filteredService);
   };
 
   const addFilter = (filter: FilterType) => {
@@ -145,6 +235,11 @@ export function DashboardContent(props: DashboardProps) {
     setFilters(newFilters);
   };
 
+  const addFilters = (filterArr: FilterType[]) => {
+    const newFilters = [...filters, ...filterArr];
+    setFilters(newFilters);
+  };
+
   const addPercentileFilter = (condition = 'gte', additionalFilters = [] as FilterType[]) => {
     if (tableItems.length === 0 || Object.keys(percentileMap).length === 0) return;
     for (let i = 0; i < filters.length; i++) {
@@ -197,53 +292,74 @@ export function DashboardContent(props: DashboardProps) {
         setEndTime={setEndTime}
         refresh={refresh}
         page={page}
+        mode={mode}
       />
       <EuiSpacer size="m" />
-      {indicesExist ? (
-        <>
-          <DashboardTable
-            items={tableItems}
-            filters={filters}
-            addFilter={addFilter}
-            addPercentileFilter={addPercentileFilter}
-            setRedirect={setRedirect}
-            loading={loading}
-            page={page}
-          />
-          <EuiSpacer />
-          <EuiFlexGroup alignItems="baseline">
-            <EuiFlexItem grow={4}>
-              <ServiceMap
+      {((mode === 'data_prepper' && dataPrepperIndicesExist) || mode === 'jaeger' && jaegerIndicesExist) ? (
+        <div>
+          {mode === 'data_prepper' ? (
+            <>
+              <DashboardTable
+                items={tableItems}
+                filters={filters}
                 addFilter={addFilter}
-                serviceMap={serviceMap}
-                idSelected={serviceMapIdSelected}
-                setIdSelected={setServiceMapIdSelected}
-                currService={filteredService}
+                addPercentileFilter={addPercentileFilter}
+                setRedirect={setRedirect}
+                loading={loading}
                 page={page}
               />
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiFlexGroup direction="column">
-                <EuiFlexItem>
-                  <ErrorRatePlt
-                    items={errorRatePltItems}
-                    setStartTime={setStartTime}
-                    setEndTime={setEndTime}
+              <EuiSpacer />
+              <EuiFlexGroup alignItems="baseline">
+                <EuiFlexItem grow={4}>
+                  <ServiceMap
+                    addFilter={addFilter}
+                    serviceMap={serviceMap}
+                    idSelected={serviceMapIdSelected}
+                    setIdSelected={setServiceMapIdSelected}
+                    currService={filteredService}
+                    page={page}
                   />
                 </EuiFlexItem>
                 <EuiFlexItem>
-                  <ThroughputPlt
-                    items={throughputPltItems}
-                    setStartTime={setStartTime}
-                    setEndTime={setEndTime}
-                  />
+                  <EuiFlexGroup direction="column">
+                    <EuiFlexItem>
+                      <ErrorRatePlt
+                        items={errorRatePltItems}
+                        setStartTime={setStartTime}
+                        setEndTime={setEndTime}
+                      />
+                    </EuiFlexItem>
+                    <EuiFlexItem>
+                      <ThroughputPlt
+                        items={throughputPltItems}
+                        setStartTime={setStartTime}
+                        setEndTime={setEndTime}
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
                 </EuiFlexItem>
               </EuiFlexGroup>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </>
+            </>
+          ) : (
+            <TopGroupsPage
+              filters={filters}
+              addFilter={addFilter}
+              addFilters={addFilters}
+              addPercentileFilter={addPercentileFilter}
+              setRedirect={setRedirect}
+              loading={loading}
+              page={page}
+              throughPutItems={throughputPltItems}
+              jaegerErrorRatePltItems={errorRatePltItems}
+              jaegerTableItems={jaegerTableItems}
+              jaegerErrorTableItems={jaegerErrorTableItems}
+              setStartTime={setStartTime}
+              setEndTime={setEndTime}
+            />
+          )}
+        </div>
       ) : (
-        <MissingConfigurationMessage />
+        <MissingConfigurationMessage mode={mode}/>
       )}
     </>
   );
diff --git a/public/components/trace_analytics/components/dashboard/dashboard_table.tsx b/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
index cba1740883..47063a0387 100644
--- a/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
+++ b/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
@@ -27,6 +27,7 @@ import { BoxPlt } from '../common/plots/box_plt';
 import { LatencyTrendCell } from './latency_trend_cell';
 
 export function DashboardTable(props: {
+  title?: string;
   items: any[];
   filters: FilterType[];
   addFilter: (filter: FilterType) => void;
@@ -349,7 +350,7 @@ export function DashboardTable(props: {
     return (
       <EuiFlexGroup alignItems="center" gutterSize="s">
         <EuiFlexItem grow={10}>
-          <PanelTitle title="Latency by trace group" totalItems={totalItems} />
+          <PanelTitle title={props.title || 'Latency by trace group'} totalItems={totalItems} />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiLink
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..15c685a5ed
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/mode_picker.tsx
@@ -0,0 +1,99 @@
+/*
+ * 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,
+            }))}
+            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_error_rates_table.tsx b/public/components/trace_analytics/components/dashboard/top_error_rates_table.tsx
new file mode 100644
index 0000000000..548d6c1719
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/top_error_rates_table.tsx
@@ -0,0 +1,273 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiI18nNumber,
+  EuiIcon,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiTableFieldDataColumnType,
+  EuiText,
+  EuiToolTip,
+  PropertySort,
+} from '@elastic/eui';
+import { CriteriaWithPagination } from '@elastic/eui/src/components/basic_table/basic_table';
+import _ from 'lodash';
+import React, { useMemo, useState } from 'react';
+import { FilterType } from '../common/filters/filters';
+import { NoMatchMessage, PanelTitle } from '../common/helper_functions';
+import { LatencyTrendCell } from './latency_trend_cell';
+
+export function ErrorRatesTable(props: {
+  title?: string;
+  items: any[];
+  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';
+}) {
+  const getColumns = () =>
+    [
+      {
+        field: 'dashboard_trace_group_name',
+        name: (
+          <EuiToolTip
+            content={
+              <EuiText size="xs">
+                Traces of all requests that share a common API and operation at the start of
+                distributed tracing instrumentation.
+              </EuiText>
+            }
+          >
+            <>
+              <div>
+                Service and Operation Name{' '}
+                <EuiIcon
+                  size="s"
+                  color="subdued"
+                  type="questionInCircle"
+                  className="eui-alignTop"
+                />
+              </div>
+              <div>&nbsp;</div>
+            </>
+          </EuiToolTip>
+        ),
+        align: 'left',
+        sortable: true,
+        render: (item) =>
+          item ? (
+            <EuiLink
+              data-test-subj="dashboard-table-trace-group-name-button"
+              onClick={() => {
+                props.addFilters([
+                  {
+                    field: 'process.serviceName',
+                    operator: 'is',
+                    value: item[0],
+                    inverted: false,
+                    disabled: false,
+                  },
+                  {
+                    field: 'operationName',
+                    operator: 'is',
+                    value: item[1],
+                    inverted: false,
+                    disabled: false,
+                  },
+                ]);
+              }}
+            >
+              {item.length < 48 ? (
+                decodeURI(item)
+              ) : (
+                <div title={item}>{_.truncate(decodeURI(item), { length: 48 })}</div>
+              )}
+            </EuiLink>
+          ) : (
+            '-'
+          ),
+      },
+      {
+        field: 'dashboard_average_latency',
+        name: (
+          <EuiToolTip
+            content={
+              <EuiText size="xs">
+                Average latency of traces within a trace group in the selected time range.
+              </EuiText>
+            }
+          >
+            <>
+              {/* <div style={{ marginRight: 40 }}>Average</div> */}
+              <div>
+                Average latency (ms){' '}
+                <EuiIcon
+                  size="s"
+                  color="subdued"
+                  type="questionInCircle"
+                  className="eui-alignTop"
+                />
+              </div>
+              <div>&nbsp;</div>
+            </>
+          </EuiToolTip>
+        ),
+        align: 'right',
+        sortable: true,
+        dataType: 'number',
+        render: (item) => (item === 0 || item ? _.round(item, 2) : '-'),
+      },
+      {
+        field: 'dashboard_error_rate',
+        name: (
+          <EuiToolTip
+            content={
+              <EuiText size="xs">
+                Error rate based on count of trace errors within a trace group in the selected time
+                range.
+              </EuiText>
+            }
+          >
+            <>
+              <div>
+                Error rate{' '}
+                <EuiIcon
+                  size="s"
+                  color="subdued"
+                  type="questionInCircle"
+                  className="eui-alignTop"
+                />
+              </div>
+              <div>&nbsp;</div>
+            </>
+          </EuiToolTip>
+        ),
+        align: 'right',
+        sortable: false,
+        render: (item) =>
+          item === 0 || item ? <EuiText size="s">{`${_.round(item, 2)}%`}</EuiText> : '-',
+      },
+      {
+        field: 'dashboard_traces',
+        name: (
+          <EuiToolTip
+            content={
+              <EuiText size="xs">
+                Count of traces with unique trace identifiers in the selected time range.
+              </EuiText>
+            }
+          >
+            <>
+              <div>
+                Traces{' '}
+                <EuiIcon
+                  size="s"
+                  color="subdued"
+                  type="questionInCircle"
+                  className="eui-alignTop"
+                />
+              </div>
+              <div>&nbsp;</div>
+            </>
+          </EuiToolTip>
+        ),
+        align: 'right',
+        sortable: true,
+        render: (item, row) => (
+          <EuiLink
+            data-test-subj="dashboard-table-traces-button"
+            onClick={() => {
+              props.addFilters([
+                {
+                  field: 'process.serviceName',
+                  operator: 'is',
+                  value: row.dashboard_trace_group_name[0],
+                  inverted: false,
+                  disabled: false,
+                },
+                {
+                  field: 'operationName',
+                  operator: 'is',
+                  value: row.dashboard_trace_group_name[1],
+                  inverted: false,
+                  disabled: false,
+                },
+              ]);
+              if (props.page !== 'app') {
+                props.setRedirect(true);
+                location.assign('#/trace_analytics/traces');
+              }
+            }}
+          >
+            <EuiI18nNumber value={item} />
+          </EuiLink>
+        ),
+      },
+    ] as Array<EuiTableFieldDataColumnType<any>>;
+
+  const renderTitleBar = (totalItems: number) => {
+    return (
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem grow={10}>
+          <PanelTitle title={props.title || 'Latency by trace group'} totalItems={totalItems} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  const columns = useMemo(() => getColumns(), [props.items, props.filters]);
+  const titleBar = useMemo(
+    () => renderTitleBar(props.items?.filter((item) => item.dashboard_error_rate > 0).length),
+    [props.items]
+  );
+
+  const [sorting, setSorting] = useState<{ sort: PropertySort }>({
+    sort: {
+      field: 'dashboard_latency_variance',
+      direction: 'desc',
+    },
+  });
+
+  const onTableChange = async ({ page, sort }: CriteriaWithPagination<any>) => {
+    if (typeof sort?.field !== 'string') return;
+    setSorting({ sort } as { sort: PropertySort });
+  };
+
+  return (
+    <>
+      <EuiPanel>
+        {titleBar}
+        <EuiSpacer size="m" />
+        <EuiHorizontalRule margin="none" />
+        {props.items?.length > 0 ? (
+          <EuiInMemoryTable
+            data-test-subj="dashboardTable"
+            tableLayout="auto"
+            items={props.items.filter((item) => item.dashboard_error_rate > 0)}
+            columns={columns}
+            pagination={{
+              initialPageSize: 5,
+              pageSizeOptions: [5],
+            }}
+            sorting={sorting}
+            onTableChange={onTableChange}
+            loading={props.loading}
+          />
+        ) : (
+          <NoMatchMessage size="xl" />
+        )}
+      </EuiPanel>
+    </>
+  );
+}
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..2e2b3fc418
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/top_groups_page.tsx
@@ -0,0 +1,78 @@
+/*
+ * 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',
+    },
+    {
+      id: 'throughput',
+      label: 'Throughput',
+    },
+  ];
+  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/dashboard/top_latency_table.tsx b/public/components/trace_analytics/components/dashboard/top_latency_table.tsx
new file mode 100644
index 0000000000..5635b0beb5
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/top_latency_table.tsx
@@ -0,0 +1,407 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiI18nNumber,
+  EuiIcon,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiTableFieldDataColumnType,
+  EuiText,
+  EuiToolTip,
+  PropertySort,
+} from '@elastic/eui';
+import { CriteriaWithPagination } from '@elastic/eui/src/components/basic_table/basic_table';
+import _ from 'lodash';
+import React, { useMemo, useState } from 'react';
+import { FilterType } from '../common/filters/filters';
+import { calculateTicks, NoMatchMessage, PanelTitle } from '../common/helper_functions';
+import { BoxPlt } from '../common/plots/box_plt';
+import { LatencyTrendCell } from './latency_trend_cell';
+
+export function LatencyTable(props: {
+  title?: string;
+  items: any[];
+  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';
+}) {
+  const getVarianceProps = (items: any[]) => {
+    if (items.length === 0) {
+      return { minRange: 0, maxRange: 0, ticks: [0, 0], scale: '' };
+    }
+    const variances = [].concat(
+      ...items
+        .filter((item) => item.dashboard_latency_variance)
+        .map((item) => item.dashboard_latency_variance)
+    );
+    const minRange = Math.min(...variances);
+    const maxRange = Math.max(...variances);
+    const ticks = calculateTicks(minRange, maxRange);
+
+    const maxDigits = ticks[ticks.length - 1].toString().length;
+
+    // pads spaces (\u00A0) in between ticks to construct a scale
+    // width of a character equals the width of two spaces, maximum 39 characters in a scale
+    const scale = ticks
+      .map((tick) => {
+        const tickStr = tick.toString();
+        return tickStr.padEnd(tickStr.length + 2 * (maxDigits - tickStr.length), '\u00A0');
+      })
+      .join(
+        '\u00A0'.repeat(
+          Math.max(
+            1,
+            Math.floor((2 * (39 - ticks.length * maxDigits)) / Math.max(1, ticks.length - 1))
+          )
+        )
+      );
+
+    return { minRange, maxRange, ticks, scale };
+  };
+
+  const getColumns = () =>
+    [
+      {
+        field: 'dashboard_trace_group_name',
+        name: (
+          <EuiToolTip
+            content={
+              <EuiText size="xs">
+                Traces of all requests that share a common API and operation at the start of
+                distributed tracing instrumentation.
+              </EuiText>
+            }
+          >
+            <>
+              <div>
+                Service and Operation Name{' '}
+                <EuiIcon
+                  size="s"
+                  color="subdued"
+                  type="questionInCircle"
+                  className="eui-alignTop"
+                />
+              </div>
+              <div>&nbsp;</div>
+            </>
+          </EuiToolTip>
+        ),
+        align: 'left',
+        sortable: true,
+        render: (item) =>
+          item ? (
+            <EuiLink
+              data-test-subj="dashboard-table-trace-group-name-button"
+              onClick={() => {
+                props.addFilters([
+                  {
+                    field: 'process.serviceName',
+                    operator: 'is',
+                    value: item[0],
+                    inverted: false,
+                    disabled: false,
+                  },
+                  {
+                    field: 'operationName',
+                    operator: 'is',
+                    value: item[1],
+                    inverted: false,
+                    disabled: false,
+                  },
+                ]);
+              }}
+            >
+              {item.length < 48 ? (
+                decodeURI(item)
+              ) : (
+                <div title={item}>{_.truncate(decodeURI(item), { length: 48 })}</div>
+              )}
+            </EuiLink>
+          ) : (
+            '-'
+          ),
+      },
+      {
+        field: 'dashboard_latency_variance',
+        name: (
+          <>
+            <EuiToolTip
+              content={
+                <EuiText size="xs">
+                  Range of latencies for traces within a trace group in the selected time range.
+                </EuiText>
+              }
+            >
+              <span>
+                Latency variance (ms){' '}
+                <EuiIcon
+                  size="s"
+                  color="subdued"
+                  type="questionInCircle"
+                  className="eui-alignTop"
+                />
+              </span>
+            </EuiToolTip>
+            {varianceProps && (
+              <EuiText size="xs" color="subdued">
+                {varianceProps.scale}
+              </EuiText>
+            )}
+          </>
+        ),
+        align: 'center',
+        sortable: ({ dashboard_latency_variance }) =>
+          dashboard_latency_variance?.length > 0
+            ? dashboard_latency_variance[2] - dashboard_latency_variance[0]
+            : 0,
+        width: '300px',
+        render: (item, row) => {
+          const filter = props.filters.find(
+            (f) => f.field === 'Latency percentile within trace group'
+          );
+          const currPercentileFilter = filter ? filter.value : '';
+          return item ? (
+            // expand plot ranges to accommodate scale
+            <BoxPlt
+              plotParams={{
+                min:
+                  varianceProps.ticks.length > 1
+                    ? varianceProps.ticks[0]
+                    : varianceProps.ticks[0] / 1.03,
+                max: varianceProps.ticks[varianceProps.ticks.length - 1] * 1.03,
+                left: item[0],
+                mid: item[1],
+                right: item[2],
+                currPercentileFilter,
+                addFilter: (condition?: 'lte' | 'gte') => {
+                  const traceGroupFilter = {
+                    field: 'traceGroup',
+                    operator: 'is',
+                    value: row.dashboard_trace_group_name,
+                    inverted: false,
+                    disabled: false,
+                  };
+                  const additionalFilters = [traceGroupFilter];
+                  for (const addedFilter of props.filters) {
+                    if (
+                      addedFilter.field === traceGroupFilter.field &&
+                      addedFilter.operator === traceGroupFilter.operator &&
+                      addedFilter.value === traceGroupFilter.value
+                    ) {
+                      additionalFilters.pop();
+                    }
+                  }
+                  props.addPercentileFilter(condition, additionalFilters);
+                },
+              }}
+            />
+          ) : (
+            '-'
+          );
+        },
+      },
+      {
+        field: 'dashboard_average_latency',
+        name: (
+          <EuiToolTip
+            content={
+              <EuiText size="xs">
+                Average latency of traces within a trace group in the selected time range.
+              </EuiText>
+            }
+          >
+            <>
+              {/* <div style={{ marginRight: 40 }}>Average</div> */}
+              <div>
+                Average latency (ms){' '}
+                <EuiIcon
+                  size="s"
+                  color="subdued"
+                  type="questionInCircle"
+                  className="eui-alignTop"
+                />
+              </div>
+              <div>&nbsp;</div>
+            </>
+          </EuiToolTip>
+        ),
+        align: 'right',
+        sortable: true,
+        dataType: 'number',
+        render: (item) => (item === 0 || item ? _.round(item, 2) : '-'),
+      },
+      {
+        field: 'dashboard_error_rate',
+        name: (
+          <EuiToolTip
+            content={
+              <EuiText size="xs">
+                Error rate based on count of trace errors within a trace group in the selected time
+                range.
+              </EuiText>
+            }
+          >
+            <>
+              <div>
+                Error rate{' '}
+                <EuiIcon
+                  size="s"
+                  color="subdued"
+                  type="questionInCircle"
+                  className="eui-alignTop"
+                />
+              </div>
+              <div>&nbsp;</div>
+            </>
+          </EuiToolTip>
+        ),
+        align: 'right',
+        sortable: true,
+        render: (item) =>
+          item === 0 || item ? <EuiText size="s">{`${_.round(item, 2)}%`}</EuiText> : '-',
+      },
+      {
+        field: 'dashboard_traces',
+        name: (
+          <EuiToolTip
+            content={
+              <EuiText size="xs">
+                Count of traces with unique trace identifiers in the selected time range.
+              </EuiText>
+            }
+          >
+            <>
+              <div>
+                Traces{' '}
+                <EuiIcon
+                  size="s"
+                  color="subdued"
+                  type="questionInCircle"
+                  className="eui-alignTop"
+                />
+              </div>
+              <div>&nbsp;</div>
+            </>
+          </EuiToolTip>
+        ),
+        align: 'right',
+        sortable: true,
+        render: (item, row) => (
+          <EuiLink
+            data-test-subj="dashboard-table-traces-button"
+            onClick={() => {
+              props.addFilters([
+                {
+                  field: 'process.serviceName',
+                  operator: 'is',
+                  value: row.dashboard_trace_group_name[0],
+                  inverted: false,
+                  disabled: false,
+                },
+                {
+                  field: 'operationName',
+                  operator: 'is',
+                  value: row.dashboard_trace_group_name[1],
+                  inverted: false,
+                  disabled: false,
+                },
+              ]);
+              if (props.page !== 'app') {
+                props.setRedirect(true);
+                location.assign('#/trace_analytics/traces');
+              }
+            }}
+          >
+            <EuiI18nNumber value={item} />
+          </EuiLink>
+        ),
+      },
+    ] as Array<EuiTableFieldDataColumnType<any>>;
+
+  const renderTitleBar = (totalItems: number) => {
+    return (
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem grow={10}>
+          <PanelTitle title={props.title || 'Latency by trace group'} totalItems={totalItems} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiLink
+            data-test-subj="dashboard-table-percentile-button-1"
+            onClick={() => props.addPercentileFilter('lte')}
+          >
+            <EuiText size="xs">
+              <span style={{ color: '#957ac9' }}>&#x25a1;</span> &lt; 95 percentile
+            </EuiText>
+          </EuiLink>
+        </EuiFlexItem>
+        <EuiFlexItem grow={1} />
+        <EuiFlexItem grow={false}>
+          <EuiLink
+            data-test-subj="dashboard-table-percentile-button-2"
+            onClick={() => props.addPercentileFilter('gte')}
+          >
+            <EuiText size="xs">
+              <span style={{ color: '#957ac9' }}>&#x25a0;</span> &gt;= 95 percentile
+            </EuiText>
+          </EuiLink>
+        </EuiFlexItem>
+        <EuiFlexItem grow={1} />
+      </EuiFlexGroup>
+    );
+  };
+
+  const varianceProps = useMemo(() => getVarianceProps(props.items), [props.items]);
+  const columns = useMemo(() => getColumns(), [props.items, props.filters]);
+  const titleBar = useMemo(() => renderTitleBar(props.items?.length), [props.items]);
+
+  const [sorting, setSorting] = useState<{ sort: PropertySort }>({
+    sort: {
+      field: 'dashboard_latency_variance',
+      direction: 'desc',
+    },
+  });
+
+  const onTableChange = async ({ page, sort }: CriteriaWithPagination<any>) => {
+    if (typeof sort?.field !== 'string') return;
+    setSorting({ sort } as { sort: PropertySort });
+  };
+
+  return (
+    <>
+      <EuiPanel>
+        {titleBar}
+        <EuiSpacer size="m" />
+        <EuiHorizontalRule margin="none" />
+        {props.items?.length > 0 ? (
+          <EuiInMemoryTable
+            data-test-subj="dashboardTable"
+            tableLayout="auto"
+            items={props.items}
+            columns={columns}
+            pagination={{
+              initialPageSize: 5,
+              pageSizeOptions: [5],
+            }}
+            sorting={sorting}
+            onTableChange={onTableChange}
+            loading={props.loading}
+          />
+        ) : (
+          <NoMatchMessage size="xl" />
+        )}
+      </EuiPanel>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap b/public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap
index 40b856fb8f..04b93f6092 100644
--- a/public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap
+++ b/public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap
@@ -241,6 +241,7 @@ exports[`Service view component renders service view 1`] = `
               ]
             }
             http={[MockFunction]}
+            mode="data_prepper"
             openFlyout={[Function]}
             setTotal={[Function]}
           />
diff --git a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
index edb5cad8cd..06701fdea8 100644
--- a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
+++ b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
@@ -46,10 +46,23 @@ exports[`Services component renders empty services page 1`] = `
       },
     }
   }
+  dataPrepperIndicesExist={true}
   endTime="now"
   filters={Array []}
   http={[MockFunction]}
-  indicesExist={false}
+  mode="data_prepper"
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
   nameColumnAction={[Function]}
   page="services"
   parentBreadcrumbs={
@@ -96,6 +109,123 @@ exports[`Services component renders empty services page 1`] = `
       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={
@@ -141,10 +271,23 @@ exports[`Services component renders empty services page 1`] = `
         },
       }
     }
+    dataPrepperIndicesExist={true}
     endTime="now"
     filters={Array []}
     http={[MockFunction]}
-    indicesExist={false}
+    mode="data_prepper"
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
     nameColumnAction={[Function]}
     page="services"
     parentBreadcrumbs={
@@ -181,6 +324,7 @@ exports[`Services component renders empty services page 1`] = `
       appConfigs={Array []}
       endTime="now"
       filters={Array []}
+      mode="data_prepper"
       page="services"
       query=""
       refresh={[Function]}
@@ -784,6 +928,7 @@ exports[`Services component renders empty services page 1`] = `
       <Filters
         appConfigs={Array []}
         filters={Array []}
+        mode="data_prepper"
         page="services"
         setFilters={
           [MockFunction] {
@@ -983,9 +1128,10 @@ exports[`Services component renders empty services page 1`] = `
     </EuiSpacer>
     <ServicesTable
       addFilter={[Function]}
-      indicesExist={false}
+      dataPrepperIndicesExist={true}
       items={Array []}
       loading={false}
+      mode="data_prepper"
       nameColumnAction={[Function]}
       setRedirect={[Function]}
       traceColumnAction={[Function]}
@@ -1048,26 +1194,25 @@ exports[`Services component renders empty services page 1`] = `
               className="euiHorizontalRule euiHorizontalRule--full"
             />
           </EuiHorizontalRule>
-          <MissingConfigurationMessage>
+          <NoMatchMessage
+            size="xl"
+          >
+            <EuiSpacer
+              size="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
             <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.
+                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
                 </EuiText>
               }
               title={
                 <h2>
-                  Trace Analytics not set up
+                  No matches
                 </h2>
               }
             >
@@ -1080,7 +1225,7 @@ exports[`Services component renders empty services page 1`] = `
                   <h2
                     className="euiTitle euiTitle--medium"
                   >
-                    Trace Analytics not set up
+                    No matches
                   </h2>
                 </EuiTitle>
                 <EuiTextColor
@@ -1104,100 +1249,23 @@ exports[`Services component renders empty services page 1`] = `
                           <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.
+                            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>
-                <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>
+            <EuiSpacer
+              size="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
+          </NoMatchMessage>
         </div>
       </EuiPanel>
     </ServicesTable>
@@ -1735,7 +1803,7 @@ exports[`Services component renders empty services page 1`] = `
 </Services>
 `;
 
-exports[`Services component renders services page 1`] = `
+exports[`Services component renders jaeger services page 1`] = `
 <Services
   appConfigs={Array []}
   childBreadcrumbs={
@@ -1781,10 +1849,24 @@ exports[`Services component renders services page 1`] = `
       },
     }
   }
+  dataPrepperIndicesExist={false}
   endTime="now"
   filters={Array []}
   http={[MockFunction]}
-  indicesExist={true}
+  jaegerIndicesExist={true}
+  mode="jaeger"
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
   nameColumnAction={[Function]}
   page="services"
   parentBreadcrumbs={
@@ -1831,6 +1913,128 @@ exports[`Services component renders services page 1`] = `
       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={
@@ -1876,10 +2080,1334 @@ exports[`Services component renders services page 1`] = `
         },
       }
     }
+    dataPrepperIndicesExist={false}
     endTime="now"
     filters={Array []}
     http={[MockFunction]}
-    indicesExist={true}
+    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]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      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]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      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={false}
+      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={
@@ -1916,6 +3444,7 @@ exports[`Services component renders services page 1`] = `
       appConfigs={Array []}
       endTime="now"
       filters={Array []}
+      mode="data_prepper"
       page="services"
       query=""
       refresh={[Function]}
@@ -2537,6 +4066,7 @@ exports[`Services component renders services page 1`] = `
       <Filters
         appConfigs={Array []}
         filters={Array []}
+        mode="data_prepper"
         page="services"
         setFilters={
           [MockFunction] {
@@ -2741,9 +4271,10 @@ exports[`Services component renders services page 1`] = `
     </EuiSpacer>
     <ServicesTable
       addFilter={[Function]}
-      indicesExist={true}
+      dataPrepperIndicesExist={true}
       items={Array []}
       loading={false}
+      mode="data_prepper"
       nameColumnAction={[Function]}
       setRedirect={[Function]}
       traceColumnAction={[Function]}
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
index 735eaa0445..972e3ab3dc 100644
--- 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
@@ -1,11 +1,160 @@
 // 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]}
-  indicesExist={true}
+  dataPrepperIndicesExist={true}
   items={Array []}
+  jaegerIndicesExist={false}
   loading={false}
+  mode="data_prepper"
   nameColumnAction={[Function]}
   setRedirect={[MockFunction]}
   traceColumnAction={[Function]}
@@ -145,10 +294,1417 @@ exports[`Services table component renders empty services table message 1`] = `
 </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=""
+                                  key=".0"
+                                  onClick={[Function]}
+                                >
+                                  <button
+                                    className="euiLink euiLink--primary"
+                                    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]}
-  indicesExist={true}
+  dataPrepperIndicesExist={true}
   items={
     Array [
       Object {
@@ -165,7 +1721,9 @@ exports[`Services table component renders services table 1`] = `
       },
     ]
   }
+  jaegerIndicesExist={false}
   loading={false}
+  mode="data_prepper"
   nameColumnAction={[Function]}
   setRedirect={[MockFunction]}
   traceColumnAction={[Function]}
diff --git a/public/components/trace_analytics/components/services/__tests__/service_view.test.tsx b/public/components/trace_analytics/components/services/__tests__/service_view.test.tsx
index b480555482..b2e40c4d15 100644
--- a/public/components/trace_analytics/components/services/__tests__/service_view.test.tsx
+++ b/public/components/trace_analytics/components/services/__tests__/service_view.test.tsx
@@ -34,8 +34,8 @@ describe('Service view component', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={false}
         addFilter={addFilter}
+        mode="data_prepper"
       />
     );
 
diff --git a/public/components/trace_analytics/components/services/__tests__/services.test.tsx b/public/components/trace_analytics/components/services/__tests__/services.test.tsx
index fca7a6c44b..d427239da4 100644
--- a/public/components/trace_analytics/components/services/__tests__/services.test.tsx
+++ b/public/components/trace_analytics/components/services/__tests__/services.test.tsx
@@ -11,6 +11,10 @@ import { coreStartMock } from '../../../../../../test/__mocks__/coreMocks';
 
 describe('Services component', () => {
   configure({ adapter: new Adapter() });
+  const modes = [
+    { id: 'jaeger', title: 'Jaeger' },
+    { id: 'data_prepper', title: 'Data Prepper' },
+  ];
 
   it('renders empty services page', () => {
     const core = coreStartMock;
@@ -48,8 +52,10 @@ describe('Services component', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={false}
         page="services"
+        mode='data_prepper'
+        dataPrepperIndicesExist={true}
+        modes={modes}
       />
     );
 
@@ -92,8 +98,57 @@ describe('Services component', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={true}
         page="services"
+        mode='data_prepper'
+        dataPrepperIndicesExist={true}
+        modes={modes}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders jaeger services page', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const serviceBreadcrumbs = [
+      {
+        text: 'Trace analytics',
+        href: '#/trace_analytics/home',
+      },
+      {
+        text: 'Services',
+        href: '#/trace_analytics/services',
+      },
+    ];
+    const nameColumnAction = (item: any) =>
+      location.assign(`#/trace_analytics/services/${encodeURIComponent(item)}`);
+    const traceColumnAction = () => location.assign('#/trace_analytics/traces');
+    const wrapper = mount(
+      <Services
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        childBreadcrumbs={serviceBreadcrumbs}
+        nameColumnAction={nameColumnAction}
+        traceColumnAction={traceColumnAction}
+        query=""
+        setQuery={setQuery}
+        filters={[]}
+        appConfigs={[]}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        page="services"
+        mode='jaeger'
+        dataPrepperIndicesExist={false}
+        jaegerIndicesExist={true}
+        modes={modes}
       />
     );
 
diff --git a/public/components/trace_analytics/components/services/__tests__/services_table.test.tsx b/public/components/trace_analytics/components/services/__tests__/services_table.test.tsx
index a4eb24e3c2..372279f5ab 100644
--- a/public/components/trace_analytics/components/services/__tests__/services_table.test.tsx
+++ b/public/components/trace_analytics/components/services/__tests__/services_table.test.tsx
@@ -23,8 +23,33 @@ describe('Services table component', () => {
         nameColumnAction={nameColumnAction}
         traceColumnAction={traceColumnAction}
         addFilter={addFilter}
+        jaegerIndicesExist={false}
+        dataPrepperIndicesExist={true}
+        mode='data_prepper'
+        setRedirect={setRedirect}
+        loading={false}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders empty jaeger services table message', () => {
+    const addFilter = jest.fn();
+    const setRedirect = jest.fn();
+    const nameColumnAction = (item: any) =>
+      location.assign(`#/trace_analytics/services/${encodeURIComponent(item)}`);
+    const traceColumnAction = () => location.assign('#/trace_analytics/traces');
+    const wrapper = mount(
+      <ServicesTable
+        items={[]}
+        nameColumnAction={nameColumnAction}
+        traceColumnAction={traceColumnAction}
+        addFilter={addFilter}
+        jaegerIndicesExist={true}
+        dataPrepperIndicesExist={false}
+        mode='jaeger'
         setRedirect={setRedirect}
-        indicesExist={true}
         loading={false}
       />
     );
@@ -54,9 +79,43 @@ describe('Services table component', () => {
         items={tableItems}
         nameColumnAction={nameColumnAction}
         traceColumnAction={traceColumnAction}
+        mode='data_prepper'
+        dataPrepperIndicesExist={true}
+        jaegerIndicesExist={false}
+        addFilter={addFilter}
+        setRedirect={setRedirect}
+        loading={false}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders jaeger services table', () => {
+    const tableItems = [
+      {
+        name: 'database',
+        average_latency: 49.54,
+        error_rate: 3.77,
+        throughput: 53,
+        traces: 31,
+      },
+    ];
+    const addFilter = jest.fn();
+    const setRedirect = jest.fn();
+    const nameColumnAction = (item: any) =>
+      location.assign(`#/trace_analytics/services/${encodeURIComponent(item)}`);
+    const traceColumnAction = () => location.assign('#/trace_analytics/traces');
+    const wrapper = mount(
+      <ServicesTable
+        items={tableItems}
+        nameColumnAction={nameColumnAction}
+        traceColumnAction={traceColumnAction}
+        mode='jaeger'
+        dataPrepperIndicesExist={false}
+        jaegerIndicesExist={true}
         addFilter={addFilter}
         setRedirect={setRedirect}
-        indicesExist={true}
         loading={false}
       />
     );
diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
index 555446ac27..a1ce847cb2 100644
--- a/public/components/trace_analytics/components/services/service_view.tsx
+++ b/public/components/trace_analytics/components/services/service_view.tsx
@@ -20,13 +20,13 @@ import {
 } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
-import { TraceAnalyticsComponentDeps } from '../../home';
+import { TraceAnalyticsComponentDeps, TraceAnalyticsMode } from '../../home';
 import {
   handleServiceMapRequest,
   handleServiceViewRequest,
 } from '../../requests/services_request_handler';
 import { FilterType } from '../common/filters/filters';
-import { filtersToDsl, PanelTitle } from '../common/helper_functions';
+import { filtersToDsl, PanelTitle, processTimeStamp } from '../common/helper_functions';
 import { ServiceMap, ServiceObject } from '../common/plots/service_map';
 import { renderDatePicker, SearchBarProps } from '../common/search_bar';
 import { SpanDetailFlyout } from '../traces/span_detail_flyout';
@@ -38,6 +38,7 @@ interface ServiceViewProps extends TraceAnalyticsComponentDeps {
 }
 
 export function ServiceView(props: ServiceViewProps) {
+  const { mode } = props;
   const [fields, setFields] = useState<any>({});
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
   const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
@@ -46,9 +47,9 @@ export function ServiceView(props: ServiceViewProps) {
   const [redirect, setRedirect] = useState(false);
 
   const refresh = () => {
-    const DSL = filtersToDsl(props.filters, props.query, props.startTime, props.endTime);
-    handleServiceViewRequest(props.serviceName, props.http, DSL, setFields);
-    handleServiceMapRequest(props.http, DSL, setServiceMap, props.serviceName);
+    const DSL = filtersToDsl(mode, props.filters, props.query, processTimeStamp(props.startTime, mode), processTimeStamp(props.endTime, mode));
+    handleServiceViewRequest(props.serviceName, props.http, DSL, setFields, mode);
+    handleServiceMapRequest(props.http, DSL, mode, setServiceMap, props.serviceName);
   };
 
   useEffect(() => {
@@ -110,30 +111,34 @@ export function ServiceView(props: ServiceViewProps) {
                   {props.serviceName || '-'}
                 </EuiText>
               </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiText className="overview-title">Number of connected services</EuiText>
-                <EuiText size="s" className="overview-content">
-                  {fields.number_of_connected_services !== undefined
-                    ? fields.number_of_connected_services
-                    : 0}
-                </EuiText>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiText className="overview-title">Connected services</EuiText>
-                <EuiText size="s" className="overview-content">
-                  {fields.connected_services
-                    ? fields.connected_services
-                        .map((service: string) => (
-                          <EuiLink href={`#/trace_analytics/services/${service}`} key={service}>
-                            {service}
-                          </EuiLink>
-                        ))
-                        .reduce((prev: React.ReactNode, curr: React.ReactNode) => {
-                          return [prev, ', ', curr];
-                        })
-                    : '-'}
-                </EuiText>
-              </EuiFlexItem>
+              { mode === 'data_prepper' ? 
+                <EuiFlexItem grow={false}>
+                  <EuiText className="overview-title">Number of connected services</EuiText>
+                  <EuiText size="s" className="overview-content">
+                    {fields.number_of_connected_services !== undefined
+                      ? fields.number_of_connected_services
+                      : 0}
+                  </EuiText>
+                </EuiFlexItem> : <EuiFlexItem/>
+              }
+              { mode === 'data_prepper' ? 
+                <EuiFlexItem grow={false}>
+                  <EuiText className="overview-title">Connected services</EuiText>
+                  <EuiText size="s" className="overview-content">
+                    {fields.connected_services && fields.connected_services.length
+                      ? fields.connected_services
+                          .map((service: string) => (
+                            <EuiLink href={`#/trace_analytics/services/${service}`} key={service}>
+                              {service}
+                            </EuiLink>
+                          ))
+                          .reduce((prev: React.ReactNode, curr: React.ReactNode) => {
+                            return [prev, ', ', curr];
+                          })
+                      : '-'}
+                  </EuiText>
+                </EuiFlexItem> : <EuiFlexItem/>
+              }
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem>
@@ -170,7 +175,7 @@ export function ServiceView(props: ServiceViewProps) {
                       onClick={() => {
                         setRedirect(true);
                         props.addFilter({
-                          field: 'serviceName',
+                          field: 'process.serviceName',
                           operator: 'is',
                           value: props.serviceName,
                           inverted: false,
@@ -227,10 +232,10 @@ export function ServiceView(props: ServiceViewProps) {
   };
 
   useEffect(() => {
-    const spanDSL = filtersToDsl(props.filters, props.query, props.startTime, props.endTime);
+    const spanDSL = filtersToDsl(mode, props.filters, props.query, processTimeStamp(props.startTime, mode), processTimeStamp(props.endTime, mode));
     spanDSL.query.bool.must.push({
       term: {
-        serviceName: props.serviceName,
+        "process.serviceName": props.serviceName,
       },
     });
     spanFilters.map(({ field, value }) => {
@@ -289,6 +294,7 @@ export function ServiceView(props: ServiceViewProps) {
         DSL={DSL}
         openFlyout={(spanId: string) => setCurrentSpan(spanId)}
         setTotal={setTotal}
+        mode={mode}
       />
     ),
     [DSL, setCurrentSpan]
@@ -309,13 +315,15 @@ export function ServiceView(props: ServiceViewProps) {
           <EuiSpacer size="xl" />
           {overview}
           <EuiSpacer />
-          <ServiceMap
-            serviceMap={serviceMap}
-            idSelected={serviceMapIdSelected}
-            setIdSelected={setServiceMapIdSelected}
-            currService={props.serviceName}
-            page="serviceView"
-          />
+          { mode === 'data_prepper' ? 
+            <ServiceMap
+              serviceMap={serviceMap}
+              idSelected={serviceMapIdSelected}
+              setIdSelected={setServiceMapIdSelected}
+              currService={props.serviceName}
+              page="serviceView"
+            /> : <div/>
+          }   
           <EuiSpacer />
           <EuiPanel>
             <PanelTitle title="Spans" totalItems={total} />
@@ -337,6 +345,7 @@ export function ServiceView(props: ServiceViewProps) {
               isFlyoutVisible={!!currentSpan}
               closeFlyout={() => setCurrentSpan('')}
               addSpanFilter={addSpanFilter}
+              mode={mode}
             />
           )}
         </EuiPageBody>
diff --git a/public/components/trace_analytics/components/services/services.tsx b/public/components/trace_analytics/components/services/services.tsx
index 04c6bad2f9..d1a6cbe2a3 100644
--- a/public/components/trace_analytics/components/services/services.tsx
+++ b/public/components/trace_analytics/components/services/services.tsx
@@ -7,6 +7,7 @@ import { EuiBreadcrumb, EuiTitle } from '@elastic/eui';
 import _ from 'lodash';
 import React from 'react';
 import { TraceAnalyticsComponentDeps } from '../../home';
+import { DataSourcePicker } from '../dashboard/mode_picker';
 import { ServicesContent } from './services_content';
 
 export interface ServicesProps extends TraceAnalyticsComponentDeps {
@@ -22,6 +23,7 @@ export function Services(props: ServicesProps) {
       <EuiTitle size="l">
         <h2 style={{ fontWeight: 430 }}>Services</h2>
       </EuiTitle>
+      <DataSourcePicker modes={props.modes} selectedMode={props.mode} setMode={props.setMode!} />
       <ServicesContent {...props} />
     </>
   );
diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx
index e4fa97e25d..9a977bea18 100644
--- a/public/components/trace_analytics/components/services/services_content.tsx
+++ b/public/components/trace_analytics/components/services/services_content.tsx
@@ -13,7 +13,7 @@ import {
 } from '../../requests/services_request_handler';
 import { FilterType } from '../common/filters/filters';
 import { getValidFilterFields } from '../common/filters/filter_helpers';
-import { filtersToDsl } from '../common/helper_functions';
+import { filtersToDsl, processTimeStamp } from '../common/helper_functions';
 import { ServiceMap, ServiceObject } from '../common/plots/service_map';
 import { SearchBar } from '../common/search_bar';
 import { ServicesProps } from './services';
@@ -28,7 +28,6 @@ export function ServicesContent(props: ServicesProps) {
     query,
     startTime,
     endTime,
-    indicesExist,
     appConfigs = [],
     childBreadcrumbs,
     parentBreadcrumbs,
@@ -38,6 +37,9 @@ export function ServicesContent(props: ServicesProps) {
     setQuery,
     setStartTime,
     setEndTime,
+    mode,
+    dataPrepperIndicesExist,
+    jaegerIndicesExist,
   } = props;
   const [tableItems, setTableItems] = useState([]);
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
@@ -50,7 +52,7 @@ export function ServicesContent(props: ServicesProps) {
 
   useEffect(() => {
     chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]);
-    const validFilters = getValidFilterFields('services');
+    const validFilters = getValidFilterFields(mode, 'services');
     setFilters([
       ...filters.map((filter) => ({
         ...filter,
@@ -69,20 +71,20 @@ export function ServicesContent(props: ServicesProps) {
       }
     }
     setFilteredService(newFilteredService);
-    if (!redirect && indicesExist) refresh(newFilteredService);
+    if (!redirect && ((mode === 'data_prepper' && dataPrepperIndicesExist) || (mode === 'jaeger' && jaegerIndicesExist))) refresh(newFilteredService);
   }, [filters, appConfigs]);
 
   const refresh = async (currService?: string) => {
     setLoading(true);
-    const DSL = filtersToDsl(filters, query, startTime, endTime, page, appConfigs);
+    const DSL = filtersToDsl(mode, filters, query,processTimeStamp(startTime, mode), processTimeStamp(endTime, mode), page, appConfigs);
     // service map should not be filtered by service name
     const serviceMapDSL = _.cloneDeep(DSL);
     serviceMapDSL.query.bool.must = serviceMapDSL.query.bool.must.filter(
       (must: any) => must?.term?.serviceName == null
     );
     await Promise.all([
-      handleServicesRequest(http, DSL, setTableItems),
-      handleServiceMapRequest(http, serviceMapDSL, setServiceMap, currService || filteredService),
+      handleServicesRequest(http, DSL, setTableItems, mode),
+      handleServiceMapRequest(http, serviceMapDSL, mode, setServiceMap, currService || filteredService),
     ]);
     setLoading(false);
   };
@@ -116,26 +118,31 @@ export function ServicesContent(props: ServicesProps) {
         setEndTime={setEndTime}
         refresh={refresh}
         page={page}
+        mode={mode}
       />
       <EuiSpacer size="m" />
       <ServicesTable
         items={tableItems}
         addFilter={addFilter}
         setRedirect={setRedirect}
-        indicesExist={indicesExist}
+        mode={mode}
         loading={loading}
         nameColumnAction={nameColumnAction}
         traceColumnAction={traceColumnAction}
+        jaegerIndicesExist={jaegerIndicesExist}
+        dataPrepperIndicesExist={dataPrepperIndicesExist}
       />
       <EuiSpacer size="m" />
-      <ServiceMap
-        addFilter={addFilter}
-        serviceMap={serviceMap}
-        idSelected={serviceMapIdSelected}
-        setIdSelected={setServiceMapIdSelected}
-        currService={filteredService}
-        page={page}
-      />
+      { (mode === 'data_prepper' && dataPrepperIndicesExist) ? 
+        <ServiceMap
+          addFilter={addFilter}
+          serviceMap={serviceMap}
+          idSelected={serviceMapIdSelected}
+          setIdSelected={setServiceMapIdSelected}
+          currService={filteredService}
+          page={page}
+        /> : (<div/>)
+      }
     </>
   );
 }
diff --git a/public/components/trace_analytics/components/services/services_table.tsx b/public/components/trace_analytics/components/services/services_table.tsx
index d294f13ef4..99fe679867 100644
--- a/public/components/trace_analytics/components/services/services_table.tsx
+++ b/public/components/trace_analytics/components/services/services_table.tsx
@@ -18,6 +18,7 @@ import {
 } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useMemo } from 'react';
+import { TraceAnalyticsMode } from '../../home';
 import { FilterType } from '../common/filters/filters';
 import {
   MissingConfigurationMessage,
@@ -27,23 +28,27 @@ import {
 
 interface ServicesTableProps {
   items: any[];
-  indicesExist: boolean;
   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,
-    indicesExist,
+    mode,
     loading,
     nameColumnAction,
     traceColumnAction,
     addFilter,
     setRedirect,
+    jaegerIndicesExist,
+    dataPrepperIndicesExist,
   } = props;
   const renderTitleBar = (totalItems?: number) => {
     return (
@@ -92,7 +97,7 @@ export function ServicesTable(props: ServicesTableProps) {
           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',
@@ -100,8 +105,8 @@ export function ServicesTable(props: ServicesTableProps) {
           truncateText: true,
           width: '80px',
           render: (item: any) => (item === 0 || item ? item : '-'),
-        },
-        {
+        }] : [],
+        ... mode === 'data_prepper' ? [{
           field: 'connected_services',
           name: 'Connected services',
           align: 'left',
@@ -109,7 +114,7 @@ export function ServicesTable(props: ServicesTableProps) {
           truncateText: true,
           render: (item: any) =>
             item ? <EuiText size="s">{_.truncate(item.join(', '), { length: 50 })}</EuiText> : '-',
-        },
+        }] : [],
         {
           field: 'traces',
           name: 'Traces',
@@ -123,7 +128,7 @@ export function ServicesTable(props: ServicesTableProps) {
                   onClick={() => {
                     setRedirect(true);
                     addFilter({
-                      field: 'serviceName',
+                      field: mode === 'jaeger' ? 'process.serviceName': 'serviceName',
                       operator: 'is',
                       value: row.name,
                       inverted: false,
@@ -152,7 +157,9 @@ export function ServicesTable(props: ServicesTableProps) {
         {titleBar}
         <EuiSpacer size="m" />
         <EuiHorizontalRule margin="none" />
-        {items?.length > 0 ? (
+        {!((mode === 'data_prepper' && dataPrepperIndicesExist) || mode === 'jaeger' && jaegerIndicesExist) ? (
+          <MissingConfigurationMessage mode={mode}/>
+        ) : ( items?.length > 0 ? (
           <EuiInMemoryTable
             tableLayout="auto"
             items={items}
@@ -169,11 +176,9 @@ export function ServicesTable(props: ServicesTableProps) {
             }}
             loading={loading}
           />
-        ) : indicesExist ? (
-          <NoMatchMessage size="xl" />
         ) : (
-          <MissingConfigurationMessage />
-        )}
+          <NoMatchMessage size="xl" />
+        ))}
       </EuiPanel>
     </>
   );
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_flyout.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_flyout.test.tsx.snap
index cb4564c2e1..e4eb22e85d 100644
--- a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_flyout.test.tsx.snap
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_flyout.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`<SpanDetailFlyout /> spec renders the empty component 1`] = `
   closeFlyout={[MockFunction]}
   http={[MockFunction]}
   isFlyoutVisible={true}
+  mode="data_prepper"
   spanId="test"
 >
   <EuiFlyout
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
index 1d8b3988aa..a7c9e6ea46 100644
--- 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
@@ -60,6 +60,7 @@ exports[`Service breakdown panel component renders service breakdown panel 1`] =
       ],
     }
   }
+  mode="data_prepper"
   setData={[MockFunction]}
 >
   <EuiPanel>
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_table.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_table.test.tsx.snap
index 3ebc21f9b9..ea56ecacb2 100644
--- a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_table.test.tsx.snap
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_table.test.tsx.snap
@@ -33,6 +33,7 @@ exports[`<SpanDetailTable /> spec renders the empty component 1`] = `
     ]
   }
   http={[MockFunction]}
+  mode="data_prepper"
   openFlyout={[Function]}
 >
   <EuiDataGrid
@@ -117,6 +118,7 @@ exports[`<SpanDetailTable /> spec renders the empty component 1`] = `
         "onSort": [Function],
       }
     }
+    toolbarVisibility={true}
   >
     <EuiFocusTrap
       className="euiDataGrid__focusWrap"
@@ -320,3 +322,26 @@ exports[`<SpanDetailTable /> spec renders the empty component 1`] = `
   </NoMatchMessage>
 </SpanDetailTable>
 `;
+
+exports[`<SpanDetailTable /> spec renders the jaeger component with data 1`] = `
+<div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="-1"
+  />
+  <div
+    class="euiDataGrid__focusWrap"
+    data-focus-lock-disabled="disabled"
+  >
+    <div
+      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter euiDataGrid--noControls"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="-1"
+  />
+</div>
+`;
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/trace_view.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/trace_view.test.tsx.snap
index bc35bb4ef9..0a58afeeb2 100644
--- a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/trace_view.test.tsx.snap
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/trace_view.test.tsx.snap
@@ -138,6 +138,7 @@ exports[`Trace view component renders trace view 1`] = `
               }
             }
             http={[MockFunction]}
+            mode="data_prepper"
             setData={[Function]}
             traceId="test"
           />
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
index cf9cb8e456..e08fbaf1c5 100644
--- a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
@@ -46,10 +46,23 @@ exports[`Traces component renders empty traces page 1`] = `
       },
     }
   }
+  dataPrepperIndicesExist={true}
   endTime="now"
   filters={Array []}
   http={[MockFunction]}
-  indicesExist={false}
+  mode="data_prepper"
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
   page="traces"
   parentBreadcrumbs={
     Array [
@@ -95,6 +108,123 @@ exports[`Traces component renders empty traces page 1`] = `
       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={
@@ -140,10 +270,23 @@ exports[`Traces component renders empty traces page 1`] = `
         },
       }
     }
+    dataPrepperIndicesExist={true}
     endTime="now"
     filters={Array []}
     http={[MockFunction]}
-    indicesExist={false}
+    mode="data_prepper"
+    modes={
+      Array [
+        Object {
+          "id": "jaeger",
+          "title": "Jaeger",
+        },
+        Object {
+          "id": "data_prepper",
+          "title": "Data Prepper",
+        },
+      ]
+    }
     page="traces"
     parentBreadcrumbs={
       Array [
@@ -179,6 +322,7 @@ exports[`Traces component renders empty traces page 1`] = `
       appConfigs={Array []}
       endTime="now"
       filters={Array []}
+      mode="data_prepper"
       page="traces"
       query=""
       refresh={[Function]}
@@ -782,6 +926,7 @@ exports[`Traces component renders empty traces page 1`] = `
       <Filters
         appConfigs={Array []}
         filters={Array []}
+        mode="data_prepper"
         page="traces"
         setFilters={
           [MockFunction] {
@@ -980,9 +1125,10 @@ exports[`Traces component renders empty traces page 1`] = `
       />
     </EuiSpacer>
     <TracesTable
-      indicesExist={false}
+      dataPrepperIndicesExist={true}
       items={Array []}
       loading={false}
+      mode="data_prepper"
       refresh={[Function]}
       traceIdColumnAction={[Function]}
     >
@@ -1044,26 +1190,25 @@ exports[`Traces component renders empty traces page 1`] = `
               className="euiHorizontalRule euiHorizontalRule--full"
             />
           </EuiHorizontalRule>
-          <MissingConfigurationMessage>
+          <NoMatchMessage
+            size="xl"
+          >
+            <EuiSpacer
+              size="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
             <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.
+                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
                 </EuiText>
               }
               title={
                 <h2>
-                  Trace Analytics not set up
+                  No matches
                 </h2>
               }
             >
@@ -1076,7 +1221,7 @@ exports[`Traces component renders empty traces page 1`] = `
                   <h2
                     className="euiTitle euiTitle--medium"
                   >
-                    Trace Analytics not set up
+                    No matches
                   </h2>
                 </EuiTitle>
                 <EuiTextColor
@@ -1100,100 +1245,23 @@ exports[`Traces component renders empty traces page 1`] = `
                           <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.
+                            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>
-                <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>
+            <EuiSpacer
+              size="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
+          </NoMatchMessage>
         </div>
       </EuiPanel>
     </TracesTable>
@@ -1201,7 +1269,7 @@ exports[`Traces component renders empty traces page 1`] = `
 </Traces>
 `;
 
-exports[`Traces component renders traces page 1`] = `
+exports[`Traces component renders jaeger traces page 1`] = `
 <Traces
   appConfigs={Array []}
   childBreadcrumbs={
@@ -1247,10 +1315,24 @@ exports[`Traces component renders traces page 1`] = `
       },
     }
   }
+  dataPrepperIndicesExist={false}
   endTime="now"
   filters={Array []}
   http={[MockFunction]}
-  indicesExist={true}
+  jaegerIndicesExist={true}
+  mode="jaeger"
+  modes={
+    Array [
+      Object {
+        "id": "jaeger",
+        "title": "Jaeger",
+      },
+      Object {
+        "id": "data_prepper",
+        "title": "Data Prepper",
+      },
+    ]
+  }
   page="traces"
   parentBreadcrumbs={
     Array [
@@ -1296,6 +1378,128 @@ exports[`Traces component renders traces page 1`] = `
       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={
@@ -1341,10 +1545,1322 @@ exports[`Traces component renders traces page 1`] = `
         },
       }
     }
+    dataPrepperIndicesExist={false}
     endTime="now"
     filters={Array []}
     http={[MockFunction]}
-    indicesExist={true}
+    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]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      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]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      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={false}
+      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 [
@@ -1380,6 +2896,7 @@ exports[`Traces component renders traces page 1`] = `
       appConfigs={Array []}
       endTime="now"
       filters={Array []}
+      mode="data_prepper"
       page="traces"
       query=""
       refresh={[Function]}
@@ -2001,6 +3518,7 @@ exports[`Traces component renders traces page 1`] = `
       <Filters
         appConfigs={Array []}
         filters={Array []}
+        mode="data_prepper"
         page="traces"
         setFilters={
           [MockFunction] {
@@ -2204,9 +3722,10 @@ exports[`Traces component renders traces page 1`] = `
       />
     </EuiSpacer>
     <TracesTable
-      indicesExist={true}
+      dataPrepperIndicesExist={true}
       items={Array []}
       loading={false}
+      mode="data_prepper"
       refresh={[Function]}
       traceIdColumnAction={[Function]}
     >
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
index 5e48443537..9cb9ba1a18 100644
--- 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
@@ -2,9 +2,11 @@
 
 exports[`Traces table component renders empty traces table message 1`] = `
 <TracesTable
-  indicesExist={false}
+  dataPrepperIndicesExist={false}
   items={Array []}
+  jaegerIndicesExist={false}
   loading={false}
+  mode="data_prepper"
   refresh={[MockFunction]}
   traceIdColumnAction={[Function]}
 >
@@ -66,7 +68,9 @@ exports[`Traces table component renders empty traces table message 1`] = `
           className="euiHorizontalRule euiHorizontalRule--full"
         />
       </EuiHorizontalRule>
-      <MissingConfigurationMessage>
+      <MissingConfigurationMessage
+        mode="data_prepper"
+      >
         <EuiEmptyPrompt
           actions={
             <EuiButton
@@ -223,9 +227,11 @@ exports[`Traces table component renders empty traces table message 1`] = `
 
 exports[`Traces table component renders empty traces table message 2`] = `
 <TracesTable
-  indicesExist={true}
+  dataPrepperIndicesExist={true}
   items={Array []}
+  jaegerIndicesExist={false}
   loading={false}
+  mode="data_prepper"
   refresh={[MockFunction]}
   traceIdColumnAction={[Function]}
 >
@@ -364,9 +370,1384 @@ exports[`Traces table component renders empty traces table message 2`] = `
 </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
-  indicesExist={true}
+  dataPrepperIndicesExist={true}
   items={
     Array [
       Object {
@@ -380,7 +1761,9 @@ exports[`Traces table component renders traces table 1`] = `
       },
     ]
   }
+  jaegerIndicesExist={false}
   loading={false}
+  mode="data_prepper"
   refresh={[MockFunction]}
   traceIdColumnAction={[Function]}
 >
diff --git a/public/components/trace_analytics/components/traces/__tests__/span_detail_flyout.test.tsx b/public/components/trace_analytics/components/traces/__tests__/span_detail_flyout.test.tsx
index 58935b22f5..4657198396 100644
--- a/public/components/trace_analytics/components/traces/__tests__/span_detail_flyout.test.tsx
+++ b/public/components/trace_analytics/components/traces/__tests__/span_detail_flyout.test.tsx
@@ -30,6 +30,7 @@ describe('<SpanDetailFlyout /> spec', () => {
         isFlyoutVisible={true}
         closeFlyout={closeFlyout}
         addSpanFilter={addSpanFilter}
+        mode="data_prepper"
       />
     );
     utils.update();
@@ -53,6 +54,7 @@ describe('<SpanDetailFlyout /> spec', () => {
           isFlyoutVisible={true}
           closeFlyout={closeFlyout}
           addSpanFilter={addSpanFilter}
+          mode="data_prepper"
         />,
         container
       );
diff --git a/public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx b/public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx
index c652224bb7..02d3aeafe7 100644
--- a/public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx
+++ b/public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx
@@ -52,7 +52,7 @@ describe('Service breakdown panel component', () => {
       ],
       ganttMaxX: 19.91,
     };
-    const wrapper = mount(<SpanDetailPanel data={data} setData={jest.fn()} />);
+    const wrapper = mount(<SpanDetailPanel data={data} setData={jest.fn()} mode='data_prepper' />);
     expect(wrapper).toMatchSnapshot();
   });
 });
diff --git a/public/components/trace_analytics/components/traces/__tests__/span_detail_table.test.tsx b/public/components/trace_analytics/components/traces/__tests__/span_detail_table.test.tsx
index 59837df0ee..925e6e8a6c 100644
--- a/public/components/trace_analytics/components/traces/__tests__/span_detail_table.test.tsx
+++ b/public/components/trace_analytics/components/traces/__tests__/span_detail_table.test.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
 import { HttpResponse } from '../../../../../../../../src/core/public';
-import { TEST_SPAN_RESPONSE } from '../../../../../../test/constants';
+import { TEST_JAEGER_SPAN_RESPONSE, TEST_SPAN_RESPONSE } from '../../../../../../test/constants';
 import httpClientMock from '../../../../../../test/__mocks__/httpClientMock';
 import { SpanDetailTable } from '../span_detail_table';
 
@@ -27,6 +27,7 @@ describe('<SpanDetailTable /> spec', () => {
         hiddenColumns={['traceId', 'traceGroup']}
         DSL={{}}
         openFlyout={() => {}}
+        mode='data_prepper'
       />
     );
     utils.update();
@@ -48,6 +49,28 @@ describe('<SpanDetailTable /> spec', () => {
           hiddenColumns={['traceId', 'traceGroup']}
           DSL={{}}
           openFlyout={(spanId: string) => setCurrentSpan(spanId)}
+          mode='data_prepper'
+        />,
+        container
+      );
+    });
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders the jaeger component with data', async () => {
+    const setCurrentSpan = jest.fn();
+    httpClientMock.post = jest.fn(() =>
+      Promise.resolve((TEST_JAEGER_SPAN_RESPONSE as unknown) as HttpResponse)
+    );
+    let container = document.createElement('div');
+    await act(() => {
+      ReactDOM.render(
+        <SpanDetailTable
+          http={httpClientMock}
+          hiddenColumns={['traceID', 'traceGroup']}
+          DSL={{}}
+          openFlyout={(spanId: string) => setCurrentSpan(spanId)}
+          mode='jaeger'
         />,
         container
       );
diff --git a/public/components/trace_analytics/components/traces/__tests__/trace_view.test.tsx b/public/components/trace_analytics/components/traces/__tests__/trace_view.test.tsx
index 3d334e25c6..be3d1c1b93 100644
--- a/public/components/trace_analytics/components/traces/__tests__/trace_view.test.tsx
+++ b/public/components/trace_analytics/components/traces/__tests__/trace_view.test.tsx
@@ -20,6 +20,7 @@ describe('Trace view component', () => {
         chrome={core.chrome}
         parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
         traceId="test"
+        mode="data_prepper"
       />
     );
     expect(wrapper).toMatchSnapshot();
diff --git a/public/components/trace_analytics/components/traces/__tests__/traces.test.tsx b/public/components/trace_analytics/components/traces/__tests__/traces.test.tsx
index a48f54f0c9..8128b99be8 100644
--- a/public/components/trace_analytics/components/traces/__tests__/traces.test.tsx
+++ b/public/components/trace_analytics/components/traces/__tests__/traces.test.tsx
@@ -11,6 +11,10 @@ import { coreStartMock } from '../../../../../../test/__mocks__/coreMocks';
 
 describe('Traces component', () => {
   configure({ adapter: new Adapter() });
+  const modes = [
+    { id: 'jaeger', title: 'Jaeger' },
+    { id: 'data_prepper', title: 'Data Prepper' },
+  ];
 
   it('renders empty traces page', () => {
     const core = coreStartMock;
@@ -46,8 +50,10 @@ describe('Traces component', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={false}
         page="traces"
+        mode='data_prepper'
+        dataPrepperIndicesExist={true}
+        modes={modes}
       />
     );
 
@@ -88,8 +94,55 @@ describe('Traces component', () => {
         setStartTime={setStartTime}
         endTime="now"
         setEndTime={setEndTime}
-        indicesExist={true}
+        mode='data_prepper'
         page="traces"
+        modes={modes}
+        dataPrepperIndicesExist={true}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders jaeger traces page', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const traceIdColumnAction = (item: any) =>
+      location.assign(`#/trace_analytics/traces/${encodeURIComponent(item)}`);
+    const childBreadcrumbs = [
+      {
+        text: 'Trace analytics',
+        href: '#/trace_analytics/home',
+      },
+      {
+        text: 'Traces',
+        href: '#/trace_analytics/traces',
+      },
+    ];
+    const wrapper = mount(
+      <Traces
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        childBreadcrumbs={childBreadcrumbs}
+        traceIdColumnAction={traceIdColumnAction}
+        query=""
+        setQuery={setQuery}
+        filters={[]}
+        appConfigs={[]}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        mode='jaeger'
+        page="traces"
+        modes={modes}
+        dataPrepperIndicesExist={false}
+        jaegerIndicesExist={true}
       />
     );
 
diff --git a/public/components/trace_analytics/components/traces/__tests__/traces_table.test.tsx b/public/components/trace_analytics/components/traces/__tests__/traces_table.test.tsx
index c57fd4f78f..b0dcc6f06c 100644
--- a/public/components/trace_analytics/components/traces/__tests__/traces_table.test.tsx
+++ b/public/components/trace_analytics/components/traces/__tests__/traces_table.test.tsx
@@ -19,7 +19,9 @@ describe('Traces table component', () => {
       <TracesTable
         items={[]}
         refresh={refresh}
-        indicesExist={false}
+        dataPrepperIndicesExist={false}
+        jaegerIndicesExist={false}
+        mode='data_prepper'
         loading={false}
         traceIdColumnAction={traceIdColumnAction}
       />
@@ -30,7 +32,9 @@ describe('Traces table component', () => {
       <TracesTable
         items={[]}
         refresh={refresh}
-        indicesExist={true}
+        dataPrepperIndicesExist={true}
+        jaegerIndicesExist={false}
+        mode='data_prepper'
         loading={false}
         traceIdColumnAction={traceIdColumnAction}
       />
@@ -58,7 +62,40 @@ describe('Traces table component', () => {
       <TracesTable
         items={tableItems}
         refresh={refresh}
-        indicesExist={true}
+        dataPrepperIndicesExist={true}
+        jaegerIndicesExist={false}
+        mode='data_prepper'
+        loading={false}
+        traceIdColumnAction={traceIdColumnAction}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+
+    wrapper.find('button[data-test-subj="tableHeaderSortButton"]').at(0).simulate('click');
+  });
+
+  it('renders jaeger traces table', () => {
+    jest.mock('../../../../../../common/constants/trace_analytics', () => ({ TRACES_MAX_NUM: 1 }));
+    const tableItems = [
+      {
+        trace_id: '00079a615e31e61766fcb20b557051c1',
+        trace_group: 'HTTP GET',
+        latency: 19.91,
+        last_updated: '11/10/2020 09:55:45',
+        error_count: 'Yes',
+        actions: '#',
+      },
+    ];
+    const traceIdColumnAction = (item: any) =>
+      location.assign(`#/trace_analytics/traces/${encodeURIComponent(item)}`);
+    const refresh = jest.fn();
+    const wrapper = mount(
+      <TracesTable
+        items={tableItems}
+        refresh={refresh}
+        dataPrepperIndicesExist={false}
+        jaegerIndicesExist={true}
+        mode='jaeger'
         loading={false}
         traceIdColumnAction={traceIdColumnAction}
       />
diff --git a/public/components/trace_analytics/components/traces/span_detail_flyout.tsx b/public/components/trace_analytics/components/traces/span_detail_flyout.tsx
index a49432d615..fcfbe1f27c 100644
--- a/public/components/trace_analytics/components/traces/span_detail_flyout.tsx
+++ b/public/components/trace_analytics/components/traces/span_detail_flyout.tsx
@@ -22,8 +22,9 @@ 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 { nanoToMilliSec } from '../common/helper_functions';
+import { microToMilliSec, nanoToMilliSec } from '../common/helper_functions';
 import { FlyoutListItem } from './flyout_list_item';
 
 export function SpanDetailFlyout(props: {
@@ -32,11 +33,13 @@ export function SpanDetailFlyout(props: {
   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);
+    handleSpansFlyoutRequest(props.http, props.spanId, setSpan, mode);
   }, [props.spanId]);
 
   const getListItem = (field: string, title: React.ReactNode, description: React.ReactNode) => {
@@ -64,16 +67,16 @@ export function SpanDetailFlyout(props: {
       getListItem(
         'spanId',
         'Span ID',
-        span.spanId ? (
+        (mode === 'data_prepper' ? span.spanId : span.spanID) ? (
           <EuiFlexGroup gutterSize="xs" style={{ marginTop: -4, marginBottom: -4 }}>
             <EuiFlexItem grow={false}>
-              <EuiCopy textToCopy={span.spanId}>
+              <EuiCopy textToCopy={mode === 'data_prepper' ? span.spanId : span.spanID}>
                 {(copy) => (
                   <EuiButtonIcon aria-label="copy-button" onClick={copy} iconType="copyClipboard" />
                 )}
               </EuiCopy>
             </EuiFlexItem>
-            <EuiFlexItem>{span.spanId}</EuiFlexItem>
+            <EuiFlexItem>{mode === 'data_prepper' ? span.spanId : span.spanID}</EuiFlexItem>
           </EuiFlexGroup>
         ) : (
           '-'
@@ -82,38 +85,38 @@ export function SpanDetailFlyout(props: {
       getListItem(
         'parentSpanId',
         'Parent span ID',
-        span.parentSpanId ? (
+        (mode === 'data_prepper' ? span.parentSpanId : span.references.length) ? (
           <EuiFlexGroup gutterSize="xs" style={{ marginTop: -4, marginBottom: -4 }}>
             <EuiFlexItem grow={false}>
-              <EuiCopy textToCopy={span.parentSpanId}>
+              <EuiCopy textToCopy={mode === 'data_prepper' ? span.parentSpanId : span.references[0].spanID}>
                 {(copy) => (
                   <EuiButtonIcon aria-label="copy-button" onClick={copy} iconType="copyClipboard" />
                 )}
               </EuiCopy>
             </EuiFlexItem>
-            <EuiFlexItem>{span.parentSpanId}</EuiFlexItem>
+            <EuiFlexItem>{mode === 'data_prepper' ? span.parentSpanId : span.references[0].spanID}</EuiFlexItem>
           </EuiFlexGroup>
         ) : (
           '-'
         )
       ),
-      getListItem('serviceName', 'Service', span.serviceName || '-'),
-      getListItem('name', 'Operation', span.name || '-'),
+      getListItem('serviceName', 'Service', (mode === 'data_prepper' ? span.serviceName : span.process['serviceName']) || '-'),
+      getListItem('name', 'Operation', (mode === 'data_prepper' ? span.name : span.operationName) || '-'),
       getListItem(
         'durationInNanos',
         'Duration',
-        `${_.round(nanoToMilliSec(Math.max(0, span.durationInNanos)), 2)} ms`
+        `${(mode === 'data_prepper' ? _.round(nanoToMilliSec(Math.max(0, span.durationInNanos)), 2) : _.round(microToMilliSec(Math.max(0, span.duration)), 2))} ms`
       ),
       getListItem(
         'startTime',
         'Start time',
-        moment(span.startTime).format(TRACE_ANALYTICS_DATE_FORMAT)
+        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', moment(span.endTime).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',
-        span['status.code'] === 2 ? (
+        (mode === 'data_prepper' ? span['status.code'] === 2 : span.tag['error']) ? (
           <EuiText color="danger" size="s" style={{fontWeight: 700}}>
             Yes
           </EuiText>
@@ -124,15 +127,20 @@ export function SpanDetailFlyout(props: {
     ];
     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',
diff --git a/public/components/trace_analytics/components/traces/span_detail_panel.tsx b/public/components/trace_analytics/components/traces/span_detail_panel.tsx
index 466a12b428..e4fb34dba4 100644
--- a/public/components/trace_analytics/components/traces/span_detail_panel.tsx
+++ b/public/components/trace_analytics/components/traces/span_detail_panel.tsx
@@ -17,6 +17,7 @@ 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';
@@ -26,11 +27,13 @@ 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 }>>(
@@ -78,11 +81,26 @@ export function SpanDetailPanel(props: {
     if (_.isEmpty(props.colorMap)) return;
     const refreshDSL = spanFiltersToDSL();
     setDSL(refreshDSL);
-    handleSpansGanttRequest(props.traceId, props.http, setData, props.colorMap, refreshDSL);
+    handleSpansGanttRequest(props.traceId, props.http, setData, props.colorMap, refreshDSL, mode);
   }, 150);
 
   const spanFiltersToDSL = () => {
-    const spanDSL: any = {
+    const spanDSL: any = mode === 'jaeger' ? {
+      query: {
+        bool: {
+          must: [
+            {
+              term: {
+                traceID: props.traceId,
+              },
+            },
+          ],
+          filter: [],
+          should: [],
+          must_not: [],
+        },
+      },
+    } : {
       query: {
         bool: {
           must: [
@@ -204,8 +222,9 @@ export function SpanDetailPanel(props: {
     () => (
       <SpanDetailTable
         http={props.http}
-        hiddenColumns={['traceId', 'traceGroup']}
+        hiddenColumns={mode === 'jaeger' ? ['traceID', 'traceGroup'] : ['traceId', 'traceGroup']}
         DSL={DSL}
+        mode={mode}
         openFlyout={(spanId: string) => {
           if (fromApp) {
             props.openSpanFlyout(spanId);
@@ -264,6 +283,7 @@ export function SpanDetailPanel(props: {
           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
index 32108b1c92..af2934b860 100644
--- a/public/components/trace_analytics/components/traces/span_detail_table.tsx
+++ b/public/components/trace_analytics/components/traces/span_detail_table.tsx
@@ -10,13 +10,15 @@ 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 { nanoToMilliSec, NoMatchMessage } from '../common/helper_functions';
+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;
 }
@@ -38,6 +40,7 @@ export function SpanDetailTable(props: SpanDetailTableProps) {
       direction: 'asc' | 'desc';
     }>,
   });
+  const { mode } = props;
   const [items, setItems] = useState<any>([]);
   const [total, setTotal] = useState(0);
 
@@ -47,7 +50,7 @@ export function SpanDetailTable(props: SpanDetailTableProps) {
       size: tableParams.size,
       sortingColumns: tableParams.sortingColumns.map(({ id, direction }) => ({ [id]: direction })),
     };
-    handleSpansRequest(props.http, setItems, setTotal, spanSearchParams, props.DSL);
+    handleSpansRequest(props.http, setItems, setTotal, spanSearchParams, props.DSL, mode);
   }, [tableParams, props.DSL]);
 
   useEffect(() => {
@@ -55,46 +58,70 @@ export function SpanDetailTable(props: SpanDetailTableProps) {
   }, [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(() =>
@@ -108,13 +135,32 @@ export function SpanDetailTable(props: SpanDetailTableProps) {
       const adjustedRowIndex = rowIndex - tableParams.page * tableParams.size;
       if (!items.hasOwnProperty(adjustedRowIndex)) return '-';
       const value = items[adjustedRowIndex][columnId];
-      if (value == null || value === '') return '-';
+      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 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':
@@ -159,7 +205,8 @@ export function SpanDetailTable(props: SpanDetailTableProps) {
         columnVisibility={{ visibleColumns, setVisibleColumns }}
         rowCount={total}
         renderCellValue={renderCellValue}
-        sorting={{ columns: tableParams.sortingColumns, onSort }}
+        sorting={mode === 'jaeger' ? undefined : { columns: tableParams.sortingColumns, onSort }}
+        toolbarVisibility={mode === 'jaeger' ? false : true}
         pagination={{
           pageIndex: tableParams.page,
           pageSize: tableParams.size,
diff --git a/public/components/trace_analytics/components/traces/trace_view.tsx b/public/components/trace_analytics/components/traces/trace_view.tsx
index e839a87ecf..fe0877e0d7 100644
--- a/public/components/trace_analytics/components/traces/trace_view.tsx
+++ b/public/components/trace_analytics/components/traces/trace_view.tsx
@@ -20,23 +20,25 @@ import {
 } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
-import { TraceAnalyticsCoreDeps } from '../../home';
+import { TraceAnalyticsCoreDeps, TraceAnalyticsMode } from '../../home';
 import { handleServiceMapRequest } from '../../requests/services_request_handler';
 import {
   handlePayloadRequest,
   handleServicesPieChartRequest,
   handleTraceViewRequest,
 } from '../../requests/traces_request_handler';
-import { filtersToDsl, PanelTitle } from '../common/helper_functions';
+import { filtersToDsl, PanelTitle, processTimeStamp } from '../common/helper_functions';
 import { ServiceMap, ServiceObject } from '../common/plots/service_map';
 import { ServiceBreakdownPanel } from './service_breakdown_panel';
 import { SpanDetailPanel } from './span_detail_panel';
 
 interface TraceViewProps extends TraceAnalyticsCoreDeps {
   traceId: string;
+  mode: TraceAnalyticsMode;
 }
 
 export function TraceView(props: TraceViewProps) {
+  const { mode } = props;
   const page = 'traceView';
   const renderTitle = (traceId: string) => {
     return (
@@ -83,12 +85,14 @@ export function TraceView(props: TraceViewProps) {
                   </EuiFlexGroup>
                 )}
               </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiText className="overview-title">Trace group name</EuiText>
-                <EuiText size="s" className="overview-content">
-                  {fields.trace_group || '-'}
-                </EuiText>
-              </EuiFlexItem>
+              { mode === 'data_prepper' ? (
+                <EuiFlexItem grow={false}>
+                  <EuiText className="overview-title">Trace group name</EuiText>
+                  <EuiText size="s" className="overview-content">
+                    {fields.trace_group || '-'}
+                  </EuiText>
+                </EuiFlexItem> ) : (<div/>)
+              }
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem>
@@ -146,11 +150,11 @@ export function TraceView(props: TraceViewProps) {
   >('latency');
 
   const refresh = async () => {
-    const DSL = filtersToDsl([], '', 'now', 'now', page);
-    handleTraceViewRequest(props.traceId, props.http, fields, setFields);
-    handlePayloadRequest(props.traceId, props.http, payloadData, setPayloadData);
-    handleServicesPieChartRequest(props.traceId, props.http, setServiceBreakdownData, setColorMap);
-    handleServiceMapRequest(props.http, DSL, setServiceMap);
+    const DSL = filtersToDsl(mode, [], '', processTimeStamp('now', mode), processTimeStamp('now', mode), page);
+    handleTraceViewRequest(props.traceId, props.http, fields, setFields, mode);
+    handlePayloadRequest(props.traceId, props.http, payloadData, setPayloadData, mode);
+    handleServicesPieChartRequest(props.traceId, props.http, setServiceBreakdownData, setColorMap, mode);
+    handleServiceMapRequest(props.http, DSL, mode, setServiceMap);
   };
 
   useEffect(() => {
@@ -224,6 +228,7 @@ export function TraceView(props: TraceViewProps) {
                 traceId={props.traceId}
                 http={props.http}
                 colorMap={colorMap}
+                mode={mode}
                 data={ganttData}
                 setData={setGanttData}
               />
@@ -245,14 +250,15 @@ export function TraceView(props: TraceViewProps) {
             ) : null}
           </EuiPanel>
           <EuiSpacer />
-
-          <ServiceMap
-            addFilter={undefined}
-            serviceMap={traceFilteredServiceMap}
-            idSelected={serviceMapIdSelected}
-            setIdSelected={setServiceMapIdSelected}
-            page={page}
-          />
+          { mode === 'data_prepper' ? 
+            <ServiceMap
+              addFilter={undefined}
+              serviceMap={traceFilteredServiceMap}
+              idSelected={serviceMapIdSelected}
+              setIdSelected={setServiceMapIdSelected}
+              page={page}
+            /> : (<div/>)
+          }
         </EuiPageBody>
       </EuiPage>
     </>
diff --git a/public/components/trace_analytics/components/traces/traces.tsx b/public/components/trace_analytics/components/traces/traces.tsx
index 9fc2b262d6..566955f160 100644
--- a/public/components/trace_analytics/components/traces/traces.tsx
+++ b/public/components/trace_analytics/components/traces/traces.tsx
@@ -6,6 +6,7 @@
 import { EuiBreadcrumb, EuiTitle } from '@elastic/eui';
 import React from 'react';
 import { TraceAnalyticsComponentDeps } from '../../home';
+import { DataSourcePicker } from '../dashboard/mode_picker';
 import { TracesContent } from './traces_content';
 
 export interface TracesProps extends TraceAnalyticsComponentDeps {
@@ -20,6 +21,7 @@ export function Traces(props: TracesProps) {
       <EuiTitle size="l">
         <h2 style={{ fontWeight: 430 }}>Traces</h2>
       </EuiTitle>
+      <DataSourcePicker modes={props.modes} selectedMode={props.mode} setMode={props.setMode!} />
       <TracesContent {...props} />
     </>
   );
diff --git a/public/components/trace_analytics/components/traces/traces_content.tsx b/public/components/trace_analytics/components/traces/traces_content.tsx
index b71a243341..b436a9394f 100644
--- a/public/components/trace_analytics/components/traces/traces_content.tsx
+++ b/public/components/trace_analytics/components/traces/traces_content.tsx
@@ -8,7 +8,7 @@ import { EuiSpacer, PropertySort } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
 import { handleTracesRequest } from '../../requests/traces_request_handler';
 import { getValidFilterFields } from '../common/filters/filter_helpers';
-import { filtersToDsl } from '../common/helper_functions';
+import { filtersToDsl, processTimeStamp } from '../common/helper_functions';
 import { SearchBar } from '../common/search_bar';
 import { TracesProps } from './traces';
 import { TracesTable } from './traces_table';
@@ -23,7 +23,6 @@ export function TracesContent(props: TracesProps) {
     appConfigs,
     startTime,
     endTime,
-    indicesExist,
     parentBreadcrumbs,
     childBreadcrumbs,
     traceIdColumnAction,
@@ -31,6 +30,9 @@ export function TracesContent(props: TracesProps) {
     setFilters,
     setStartTime,
     setEndTime,
+    mode,
+    dataPrepperIndicesExist,
+    jaegerIndicesExist,
   } = props;
   const [tableItems, setTableItems] = useState([]);
   const [redirect, setRedirect] = useState(true);
@@ -38,7 +40,7 @@ export function TracesContent(props: TracesProps) {
 
   useEffect(() => {
     chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]);
-    const validFilters = getValidFilterFields('traces');
+    const validFilters = getValidFilterFields(mode, 'traces');
     setFilters([
       ...filters.map((filter) => ({
         ...filter,
@@ -49,14 +51,14 @@ export function TracesContent(props: TracesProps) {
   }, []);
 
   useEffect(() => {
-    if (!redirect && indicesExist) refresh();
+    if (!redirect && ((mode === 'data_prepper' && dataPrepperIndicesExist) || (mode === 'jaeger' && jaegerIndicesExist))) refresh();
   }, [filters, appConfigs]);
 
   const refresh = async (sort?: PropertySort) => {
     setLoading(true);
-    const DSL = filtersToDsl(filters, query, startTime, endTime, page, appConfigs);
-    const timeFilterDSL = filtersToDsl([], '', startTime, endTime, page);
-    await handleTracesRequest(http, DSL, timeFilterDSL, tableItems, setTableItems, sort);
+    const DSL = filtersToDsl(mode, filters, query, processTimeStamp(startTime, mode), processTimeStamp(endTime, mode), page, appConfigs);
+    const timeFilterDSL = filtersToDsl(mode, [], '', processTimeStamp(startTime, mode), processTimeStamp(endTime, mode), page);
+    await handleTracesRequest(http, DSL, timeFilterDSL, tableItems, setTableItems, mode, sort);
     setLoading(false);
   };
 
@@ -74,14 +76,17 @@ export function TracesContent(props: TracesProps) {
         setEndTime={setEndTime}
         refresh={refresh}
         page={page}
+        mode={mode}
       />
       <EuiSpacer size="m" />
       <TracesTable
         items={tableItems}
         refresh={refresh}
-        indicesExist={indicesExist}
+        mode={mode}
         loading={loading}
         traceIdColumnAction={traceIdColumnAction}
+        jaegerIndicesExist={jaegerIndicesExist}
+        dataPrepperIndicesExist={dataPrepperIndicesExist}
       />
     </>
   );
diff --git a/public/components/trace_analytics/components/traces/traces_table.tsx b/public/components/trace_analytics/components/traces/traces_table.tsx
index 40f1396067..085da31c25 100644
--- a/public/components/trace_analytics/components/traces/traces_table.tsx
+++ b/public/components/trace_analytics/components/traces/traces_table.tsx
@@ -21,6 +21,7 @@ import {
 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,
@@ -30,13 +31,15 @@ import {
 interface TracesTableProps {
   items: any[];
   refresh: (sort?: PropertySort) => void;
-  indicesExist: boolean;
+  mode: TraceAnalyticsMode;
   loading: boolean;
   traceIdColumnAction: any;
+  jaegerIndicesExist: boolean;
+  dataPrepperIndicesExist: boolean;
 }
 
 export function TracesTable(props: TracesTableProps) {
-  const { items, refresh, indicesExist, loading, traceIdColumnAction } = props;
+  const { items, refresh, mode, loading, traceIdColumnAction } = props;
   const renderTitleBar = (totalItems?: number) => {
     return (
       <EuiFlexGroup alignItems="center" gutterSize="s">
@@ -48,7 +51,9 @@ export function TracesTable(props: TracesTableProps) {
   };
 
   const columns = useMemo(
-    () =>
+    () => {
+      if (mode === 'data_prepper') {
+        return(
       [
         {
           field: 'trace_id',
@@ -146,7 +151,77 @@ export function TracesTable(props: TracesTableProps) {
           sortable: true,
           render: (item) => (item === 0 || item ? item : '-'),
         },
-      ] as Array<EuiTableFieldDataColumnType<any>>,
+      ] 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]
   );
 
@@ -194,7 +269,9 @@ export function TracesTable(props: TracesTableProps) {
         {titleBar}
         <EuiSpacer size="m" />
         <EuiHorizontalRule margin="none" />
-        {items?.length > 0 ? (
+        {!((mode === 'data_prepper' && props.dataPrepperIndicesExist) || (mode === 'jaeger' && props.jaegerIndicesExist)) ? (
+          <MissingConfigurationMessage mode={mode}/>
+        ) : items?.length > 0 ? (
           <EuiInMemoryTable
             tableLayout="auto"
             items={items}
@@ -207,10 +284,8 @@ export function TracesTable(props: TracesTableProps) {
             onTableChange={onTableChange}
             loading={loading}
           />
-        ) : indicesExist ? (
-          <NoMatchMessage size="xl" />
         ) : (
-          <MissingConfigurationMessage />
+          <NoMatchMessage size="xl" />
         )}
       </EuiPanel>
     </>
diff --git a/public/components/trace_analytics/home.tsx b/public/components/trace_analytics/home.tsx
index ab04874366..d515f26ad3 100644
--- a/public/components/trace_analytics/home.tsx
+++ b/public/components/trace_analytics/home.tsx
@@ -3,13 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiLink } from '@elastic/eui';
-import React, { useEffect, useState } from 'react';
+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,
-  CoreStart,
   HttpStart,
 } from '../../../../../src/core/public';
 import { ObservabilitySideBar } from '../common/side_nav';
@@ -18,7 +18,7 @@ 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 { handleIndicesExistRequest } from './requests/request_handler';
+import { handleDataPrepperIndicesExistRequest, handleJaegerIndicesExistRequest } from './requests/request_handler';
 
 export interface TraceAnalyticsCoreDeps {
   parentBreadcrumbs: ChromeBreadcrumb[];
@@ -28,12 +28,23 @@ export interface TraceAnalyticsCoreDeps {
 
 interface HomeProps extends RouteComponentProps, TraceAnalyticsCoreDeps {}
 
+export type TraceAnalyticsMode = 'jaeger' | 'data_prepper'
+
 export interface TraceAnalyticsComponentDeps extends TraceAnalyticsCoreDeps, SearchBarProps {
-  indicesExist: boolean;
+  mode: TraceAnalyticsMode;
+  modes: {
+    id: string;
+    title: string;
+  }[];
+  setMode: (mode: TraceAnalyticsMode) => void;
+  jaegerIndicesExist: boolean;
+  dataPrepperIndicesExist: boolean;
 }
 
 export const Home = (props: HomeProps) => {
-  const [indicesExist, setIndicesExist] = useState(true);
+  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[]>(
@@ -62,11 +73,32 @@ export const Home = (props: HomeProps) => {
     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(() => {
-    handleIndicesExistRequest(props.http, setIndicesExist);
+    handleDataPrepperIndicesExistRequest(props.http, setDataPrepperIndicesExist)
+    handleJaegerIndicesExistRequest(props.http, setJaegerIndicesExist);
   }, []);
 
+
+  const modes = [
+    { id: 'jaeger', title: 'Jaeger' },
+    { id: 'data_prepper', title: 'Data Prepper' },
+  ];
+
+  useEffect(() => {
+    if (dataPrepperIndicesExist) {
+      setMode('data_prepper');
+    } else if (jaegerIndicesExist) {
+      setMode('jaeger');
+    }
+  }, [jaegerIndicesExist, dataPrepperIndicesExist]);
+
   const dashboardBreadcrumbs = [
     {
       text: 'Trace analytics',
@@ -108,6 +140,8 @@ export const Home = (props: HomeProps) => {
   const traceIdColumnAction = (item: any) =>
     location.assign(`#/trace_analytics/traces/${encodeURIComponent(item)}`);
 
+  const [appConfigs, _] = useState([]);
+
   const commonProps: TraceAnalyticsComponentDeps = {
     parentBreadcrumbs: props.parentBreadcrumbs,
     http: props.http,
@@ -115,23 +149,34 @@ export const Home = (props: HomeProps) => {
     query,
     setQuery: setQueryWithStorage,
     filters,
-    appConfigs: [],
+    appConfigs: appConfigs,
     setFilters: setFiltersWithStorage,
     startTime,
     setStartTime: setStartTimeWithStorage,
     endTime,
     setEndTime: setEndTimeWithStorage,
-    indicesExist,
+    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} />
+            <Dashboard page="dashboard" childBreadcrumbs={dashboardBreadcrumbs} {...commonProps} setToast={setToast} toasts={toasts} />
           </ObservabilitySideBar>
         )}
       />
@@ -157,6 +202,7 @@ export const Home = (props: HomeProps) => {
             chrome={props.chrome}
             http={props.http}
             traceId={decodeURIComponent(routerProps.match.params.id)}
+            mode={mode}
           />
         )}
       />
diff --git a/public/components/trace_analytics/requests/dashboard_request_handler.ts b/public/components/trace_analytics/requests/dashboard_request_handler.ts
index 322ebf8ed5..ac29cc9b2d 100644
--- a/public/components/trace_analytics/requests/dashboard_request_handler.ts
+++ b/public/components/trace_analytics/requests/dashboard_request_handler.ts
@@ -6,12 +6,16 @@
 import _ from 'lodash';
 import moment from 'moment';
 import { TRACE_ANALYTICS_PLOTS_DATE_FORMAT } from '../../../../common/constants/trace_analytics';
-import { fixedIntervalToMilli, nanoToMilliSec } from '../components/common/helper_functions';
+import { fixedIntervalToMilli, microToMilliSec, nanoToMilliSec } from '../components/common/helper_functions';
 import {
   getDashboardQuery,
   getDashboardThroughputPltQuery,
   getDashboardTraceGroupPercentiles,
   getErrorRatePltQuery,
+  getJaegerDashboardQuery,
+  getJaegerErrorDashboardQuery,
+  getJaegerErrorTrendQuery,
+  getJaegerLatencyTrendQuery,
   getLatencyTrendQuery,
 } from './queries/dashboard_queries';
 import { handleDslRequest } from './request_handler';
@@ -23,13 +27,15 @@ export const handleDashboardRequest = async (
   latencyTrendDSL,
   items,
   setItems,
+  mode,
   setPercentileMap?
 ) => {
   // latency_variance should only be affected by timefilter
   const latencyVariances = await handleDslRequest(
     http,
     timeFilterDSL,
-    getDashboardTraceGroupPercentiles()
+    getDashboardTraceGroupPercentiles(mode),
+    mode
   )
     .then((response) => {
       const map: any = {};
@@ -43,7 +49,7 @@ export const handleDashboardRequest = async (
     .catch((error) => console.error(error));
   if (setPercentileMap) setPercentileMap(latencyVariances);
 
-  const latencyTrends = await handleDslRequest(http, latencyTrendDSL, getLatencyTrendQuery())
+  const latencyTrends = await handleDslRequest(http, latencyTrendDSL, getLatencyTrendQuery(), mode)
     .then((response) => {
       const map: any = {};
       response.aggregations.trace_group_name.buckets.map((bucket) => {
@@ -98,7 +104,7 @@ export const handleDashboardRequest = async (
     })
     .catch((error) => console.error(error));
 
-  await handleDslRequest(http, DSL, getDashboardQuery())
+  await handleDslRequest(http, DSL, getDashboardQuery(), mode)
     .then((response) => {
       return Promise.all(
         response.aggregations.trace_group_name.buckets.map((bucket) => {
@@ -120,8 +126,209 @@ export const handleDashboardRequest = async (
     .catch((error) => console.error(error));
 };
 
-export const handleDashboardThroughputPltRequest = (http, DSL, fixedInterval, items, setItems) => {
-  return handleDslRequest(http, DSL, getDashboardThroughputPltQuery(fixedInterval))
+export const handleJaegerDashboardRequest = async (
+  http,
+  DSL,
+  timeFilterDSL,
+  latencyTrendDSL,
+  items,
+  setItems,
+  mode,
+  setShowTimeoutToast,
+  setPercentileMap?
+) => {
+  const latencyTrends = await handleDslRequest(http, latencyTrendDSL, getJaegerLatencyTrendQuery(), mode, true, setShowTimeoutToast)
+    .then((response) => {
+      const map: any = {};
+      response.aggregations.trace_group_name.buckets.map((bucket) => {
+        const latencyTrend = bucket.group_by_hour.buckets
+          .slice(-24)
+          .filter((bucket) => bucket.average_latency?.value || bucket.average_latency?.value === 0);
+        const values = {
+          x: latencyTrend.map((bucket) => bucket.key),
+          y: latencyTrend.map((bucket) => bucket.average_latency?.value || 0),
+        };
+        const latencyTrendData =
+          values.x?.length > 0
+            ? {
+                '24_hour_latency_trend': {
+                  trendData: [
+                    {
+                      ...values,
+                      type: 'scatter',
+                      mode: 'lines',
+                      hoverinfo: 'none',
+                      line: {
+                        color: '#000000',
+                        width: 1,
+                      },
+                    },
+                  ],
+                  popoverData: [
+                    {
+                      ...values,
+                      type: 'scatter',
+                      mode: 'lines+markers',
+                      hovertemplate: '%{x}<br>Average latency: %{y}<extra></extra>',
+                      hoverlabel: {
+                        bgcolor: '#d7c2ff',
+                      },
+                      marker: {
+                        color: '#987dcb',
+                        size: 8,
+                      },
+                      line: {
+                        color: '#987dcb',
+                        size: 2,
+                      },
+                    },
+                  ],
+                },
+              }
+            : {};
+        map[bucket.key] = latencyTrendData;
+      });
+      return map;
+    })
+    .catch((error) => {
+      console.log("error here")
+      console.error(error)
+      
+      setToast('hello')
+    });
+
+  await handleDslRequest(http, DSL, getJaegerDashboardQuery(), mode, true, setShowTimeoutToast)
+    .then((response) => {
+      return Promise.all(
+        response.aggregations.trace_group_name.buckets.map((bucket) => {
+          const latencyTrend = latencyTrends?.[bucket.key] || {};
+          return {
+            dashboard_key_as_string: bucket.key_as_string,
+            dashboard_trace_group_name: bucket.key,
+            dashboard_average_latency: bucket.average_latency?.value,
+            dashboard_traces: bucket.trace_count.value,
+            dashboard_error_rate: bucket.error_rate.value,
+            ...latencyTrend,
+          };
+        })
+      );
+    })
+    .then(async (newItems) => {
+      const latencies = await handleDslRequest(
+        http,
+        timeFilterDSL,
+        getDashboardTraceGroupPercentiles(mode, newItems.map(a => a.dashboard_trace_group_name)),
+        mode,
+        true,
+        setShowTimeoutToast,
+      )
+        .then((response) => {
+          const map: any = {};
+          response.aggregations.trace_group.buckets.forEach((traceGroup) => {
+            map[traceGroup.key_as_string] = Object.values(
+              traceGroup.latency_variance_micros.values
+            ).map((nano: number) => _.round(microToMilliSec(Math.max(0, nano)), 2));
+          });
+          return map;
+        })
+        .catch((error) => console.error(error));
+        newItems.forEach((item) => {
+          item.dashboard_latency_variance = latencies[item.dashboard_key_as_string]
+        })
+        setItems(newItems);
+    })
+    .catch((error) => console.error(error));
+};
+
+export const handleJaegerErrorDashboardRequest = async (
+  http,
+  DSL,
+  timeFilterDSL,
+  latencyTrendDSL,
+  items,
+  setItems,
+  mode,
+  setShowTimeoutToast,
+  setPercentileMap?
+) => {
+  const errorTrends = await handleDslRequest(http, latencyTrendDSL, getJaegerErrorTrendQuery(), mode, true, setShowTimeoutToast)
+    .then((response) => {
+      const map: any = {};
+      response.aggregations.trace_group_name.buckets.map((bucket) => {
+        const errorTrend = bucket.group_by_hour.buckets
+          .slice(-24)
+          .filter((bucket) => bucket.error_rate?.value || bucket.error_rate?.value === 0);
+        const values = {
+          x: errorTrend.map((bucket) => bucket.key),
+          y: errorTrend.map((bucket) => bucket.error_rate?.value || 0),
+        };
+        const errorTrendData =
+          values.x?.length > 0
+            ? {
+                '24_hour_error_trend': {
+                  trendData: [
+                    {
+                      ...values,
+                      type: 'scatter',
+                      mode: 'lines',
+                      hoverinfo: 'none',
+                      line: {
+                        color: '#000000',
+                        width: 1,
+                      },
+                    },
+                  ],
+                  popoverData: [
+                    {
+                      ...values,
+                      type: 'scatter',
+                      mode: 'lines+markers',
+                      hovertemplate: '%{x}<br>Average error rate: %{y}<extra></extra>',
+                      hoverlabel: {
+                        bgcolor: '#d7c2ff',
+                      },
+                      marker: {
+                        color: '#987dcb',
+                        size: 8,
+                      },
+                      line: {
+                        color: '#987dcb',
+                        size: 2,
+                      },
+                    },
+                  ],
+                },
+              }
+            : {};
+        map[bucket.key] = errorTrendData;
+      });
+      return map;
+    })
+    .catch((error) => console.error(error));
+
+  await handleDslRequest(http, DSL, getJaegerErrorDashboardQuery(), mode, true, setShowTimeoutToast)
+    .then((response) => {
+      return Promise.all(
+        response.aggregations.trace_group_name.buckets.map((bucket) => {
+          const latencyTrend = errorTrends?.[bucket.key] || {};
+          return {
+            dashboard_trace_group_name: bucket.key,
+            dashboard_average_latency: bucket.average_latency?.value,
+            dashboard_traces: bucket.trace_count.value,
+            dashboard_error_rate: bucket.error_rate.value,
+            ...latencyTrend,
+          };
+        })
+      );
+    })
+    .then((newItems) => {
+      setItems(newItems);
+    })
+    .catch((error) => console.error(error));
+};
+
+export const handleDashboardThroughputPltRequest = (http, DSL, fixedInterval, items, setItems, mode) => {
+  return handleDslRequest(http, DSL, getDashboardThroughputPltQuery(mode, fixedInterval), mode)
     .then((response) => {
       const buckets = response.aggregations.throughput.buckets;
       const texts = buckets.map(
@@ -153,8 +360,8 @@ export const handleDashboardThroughputPltRequest = (http, DSL, fixedInterval, it
     .catch((error) => console.error(error));
 };
 
-export const handleDashboardErrorRatePltRequest = (http, DSL, fixedInterval, items, setItems) => {
-  return handleDslRequest(http, DSL, getErrorRatePltQuery(fixedInterval))
+export const handleDashboardErrorRatePltRequest = (http, DSL, fixedInterval, items, setItems, mode) => {
+  return handleDslRequest(http, DSL, getErrorRatePltQuery(mode, fixedInterval), mode)
     .then((response) => {
       const buckets = response.aggregations.error_rate.buckets;
       const texts = buckets.map(
@@ -184,4 +391,4 @@ export const handleDashboardErrorRatePltRequest = (http, DSL, fixedInterval, ite
       setItems({ items: newItems, fixedInterval: fixedInterval });
     })
     .catch((error) => console.error(error));
-};
+};
\ No newline at end of file
diff --git a/public/components/trace_analytics/requests/queries/dashboard_queries.ts b/public/components/trace_analytics/requests/queries/dashboard_queries.ts
index bdc9111ac1..b73d1203e0 100644
--- a/public/components/trace_analytics/requests/queries/dashboard_queries.ts
+++ b/public/components/trace_analytics/requests/queries/dashboard_queries.ts
@@ -3,8 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { TraceAnalyticsMode } from "../../home";
+
 export const getDashboardQuery = () => {
-  const query = {
+  return {
     size: 0,
     query: {
       bool: {
@@ -91,11 +93,217 @@ export const getDashboardQuery = () => {
       },
     },
   };
-  return query;
+};
+
+export const getJaegerDashboardQuery = () => {
+  return {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      trace_group_name: {
+        multi_terms: {
+          terms: [
+            {
+              field: "process.serviceName"
+            },
+            {
+              field: "operationName"
+            },
+          ],
+          order: {
+            'latency': 'desc'
+          },
+          size: 5
+        },
+        aggs: {
+          latency: {
+            avg: {
+              field: 'duration'
+            }
+          },
+          average_latency: {
+          scripted_metric: {
+            init_script: 'state.traceIDToLatencyMap = [:];',
+            map_script: `
+              if (doc.containsKey('duration') && !doc['duration'].empty) {
+                def traceID = doc['traceID'].value;
+                if (!state.traceIDToLatencyMap.containsKey(traceID)) {
+                  state.traceIDToLatencyMap[traceID] = doc['duration'].value;
+                }
+              }
+            `,
+            combine_script: 'return state.traceIDToLatencyMap',
+            reduce_script: `
+              def seenTraceIdsMap = [:];
+              def totalLatency = 0.0;
+              def traceCount = 0.0;
+
+              for (s in states) {
+                if (s == null) {
+                  continue;
+                }
+
+                for (entry in s.entrySet()) {
+                  def traceID = entry.getKey();
+                  def traceLatency = entry.getValue();
+                  if (!seenTraceIdsMap.containsKey(traceID)) {
+                    seenTraceIdsMap[traceID] = true;
+                    totalLatency += traceLatency;
+                    traceCount++;
+                  }
+                }
+              }
+
+              def average_latency_nanos = totalLatency / traceCount;
+              return Math.round(average_latency_nanos / 10) / 100.0;
+            `,
+          },
+          },
+      
+          trace_count: {
+            cardinality: {
+              field: 'traceID',
+            },
+          },
+          error_count: {
+            filter: {
+              term: {
+                'tag.error': true,
+              },
+            },
+            aggs: {
+              trace_count: {
+                cardinality: {
+                  field: 'traceID',
+                },
+              },
+            },
+          },
+          error_rate: {
+            bucket_script: {
+              buckets_path: {
+                total: 'trace_count.value',
+                errors: 'error_count>trace_count.value',
+              },
+              script: 'params.errors / params.total * 100',
+            },
+          },
+        },
+      },
+  },
+}
+};
+
+export const getJaegerErrorDashboardQuery = () => {
+  return {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      trace_group_name: {
+        multi_terms: {
+          terms: [
+            {
+              field: "process.serviceName"
+            },
+            {
+              field: "operationName"
+            },
+          ],
+          order: {
+            'error_count': 'desc'
+          },
+          size: 5
+        },
+        aggs: {
+          average_latency: {
+          scripted_metric: {
+            init_script: 'state.traceIDToLatencyMap = [:];',
+            map_script: `
+              if (doc.containsKey('duration') && !doc['duration'].empty) {
+                def traceID = doc['traceID'].value;
+                if (!state.traceIDToLatencyMap.containsKey(traceID)) {
+                  state.traceIDToLatencyMap[traceID] = doc['duration'].value;
+                }
+              }
+            `,
+            combine_script: 'return state.traceIDToLatencyMap',
+            reduce_script: `
+              def seenTraceIdsMap = [:];
+              def totalLatency = 0.0;
+              def traceCount = 0.0;
+
+              for (s in states) {
+                if (s == null) {
+                  continue;
+                }
+
+                for (entry in s.entrySet()) {
+                  def traceID = entry.getKey();
+                  def traceLatency = entry.getValue();
+                  if (!seenTraceIdsMap.containsKey(traceID)) {
+                    seenTraceIdsMap[traceID] = true;
+                    totalLatency += traceLatency;
+                    traceCount++;
+                  }
+                }
+              }
+
+              def average_latency_nanos = totalLatency / traceCount;
+              return Math.round(average_latency_nanos / 10) / 100.0;
+            `,
+          },
+          },
+      
+          trace_count: {
+            cardinality: {
+              field: 'traceID',
+            },
+          },
+          error_count: {
+            filter: {
+              term: {
+                'tag.error': true,
+              },
+            },
+            aggs: {
+              trace_count: {
+                cardinality: {
+                  field: 'traceID',
+                },
+              },
+            },
+          },
+          error_rate: {
+            bucket_script: {
+              buckets_path: {
+                total: 'trace_count.value',
+                errors: 'error_count>trace_count.value',
+              },
+              script: 'params.errors / params.total * 100',
+            },
+          }
+        },
+      },
+  },
+}
 };
 
 export const getLatencyTrendQuery = () => {
-  const query = {
+  return {
     size: 0,
     query: {
       bool: {
@@ -162,39 +370,144 @@ export const getLatencyTrendQuery = () => {
       },
     },
   };
-  return query;
 };
 
-export const getDashboardTraceGroupPercentiles = () => {
+export const getJaegerLatencyTrendQuery = () => {
   return {
     size: 0,
     query: {
       bool: {
-        must: [
-          {
-            term: {
-              parentSpanId: {
-                value: '',
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      trace_group_name: {
+        multi_terms: {
+          terms: [
+            {
+              field: "process.serviceName"
+            },
+            {
+              field: "operationName"
+            },
+          ],
+        },
+        aggs: {
+          group_by_hour: {
+            date_histogram: {
+              field: 'endTime',
+              calendar_interval: 'hour',
+            },
+            aggs: {
+              average_latency: {
+                scripted_metric: {
+                  init_script: 'state.traceIdToLatencyMap = [:];',
+                  map_script: `
+                    if (doc.containsKey('traceGroupFields.durationInNanos') && !doc['traceGroupFields.durationInNanos'].empty) {
+                      def traceId = doc['traceId'].value;
+                      if (!state.traceIdToLatencyMap.containsKey(traceId)) {
+                        state.traceIdToLatencyMap[traceId] = doc['traceGroupFields.durationInNanos'].value;
+                      }
+                    }
+                  `,
+                  combine_script: 'return state.traceIdToLatencyMap',
+                  reduce_script: `
+                    def seenTraceIdsMap = [:];
+                    def totalLatency = 0.0;
+                    def traceCount = 0.0;
+
+                    for (s in states) {
+                      if (s == null) {
+                        continue;
+                      }
+
+                      for (entry in s.entrySet()) {
+                        def traceId = entry.getKey();
+                        def traceLatency = entry.getValue();
+                        if (!seenTraceIdsMap.containsKey(traceId)) {
+                          seenTraceIdsMap[traceId] = true;
+                          totalLatency += traceLatency;
+                          traceCount++;
+                        }
+                      }
+                    }
+
+                    def average_latency_nanos = totalLatency / traceCount;
+                    return Math.round(average_latency_nanos / 10000) / 100.0;
+                  `,
+                },
               },
             },
           },
-        ],
+        },
+      },
+    },
+  };
+};
+
+export const getJaegerErrorTrendQuery = () => {
+  return {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
         filter: [],
         should: [],
         must_not: [],
       },
     },
     aggs: {
-      trace_group: {
-        terms: {
-          field: 'traceGroup',
+      trace_group_name: {
+        multi_terms: {
+          terms: [
+            {
+              field: "process.serviceName"
+            },
+            {
+              field: "operationName"
+            },
+          ],
         },
         aggs: {
-          latency_variance_nanos: {
-            percentiles: {
-              field: 'traceGroupFields.durationInNanos',
-              percents: [0, 95, 100],
+          group_by_hour: {
+            date_histogram: {
+              field: 'endTime',
+              calendar_interval: 'hour',
+            },
+            aggs: {
+              error_count: {
+                filter: {
+                  term: {
+                    'tag.error': true,
+                  },
+                },
+                aggs: {
+                  trace_count: {
+                    cardinality: {
+                      field: 'traceID',
+                    },
+                  },
+                },
+              },
+              trace_count: {
+                cardinality: {
+                  field: 'traceID',
+                },
+              },
+              error_rate: {
+                bucket_script: {
+                  buckets_path: {
+                    total: 'trace_count.value',
+                    errors: 'error_count>trace_count.value',
+                  },
+                  script: 'params.errors / params.total * 100',
+                },
+              },
             },
+              
           },
         },
       },
@@ -202,7 +515,211 @@ export const getDashboardTraceGroupPercentiles = () => {
   };
 };
 
-export const getErrorRatePltQuery = (fixedInterval) => {
+
+export const getDashboardTraceGroupPercentiles = (mode: TraceAnalyticsMode, buckets?: any[]) => {
+  if (mode === 'data_prepper') { 
+    return {
+      size: 0,
+      query: {
+        bool: {
+          must: [
+            {
+              term: {
+                parentSpanId: {
+                  value: '',
+                },
+              },
+            },
+          ],
+          filter: [],
+          should: [],
+          must_not: [],
+        },
+      },
+      aggs: {
+        trace_group: {
+          terms: {
+            field: 'traceGroup',
+          },
+          aggs: {
+            latency_variance_nanos: {
+              percentiles: {
+                field: 'traceGroupFields.durationInNanos',
+                percents: [0, 95, 100],
+              },
+            },
+          },
+        },
+      },
+    };
+  } else if (mode === 'jaeger') { 
+    const query = {
+      size: 0,
+      query: {
+        bool: {
+          must: [],
+          filter: [{
+            bool: {
+              must_not: {
+                exists: {
+                  field: "references"
+                }
+              },
+            },
+          }],
+          should: [],
+          must_not: [],
+          minimum_should_match: 1,
+        },
+      },
+      aggs: {
+        trace_group: {
+        multi_terms: {
+          terms: [
+            {
+              field: "process.serviceName"
+            },
+            {
+              field: "operationName"
+            },
+          ],
+        },
+        aggs: {
+          latency_variance_micros: {
+            percentiles: {
+              field: 'duration',
+              percents: [0, 95, 100],
+            },
+        },
+      },
+      }
+  },
+    }
+    if (buckets) {
+      buckets.forEach((item) => {
+        query.query.bool.should.push({
+          bool:{
+          must: [
+            {
+            term: {
+              'process.serviceName': item[0]
+            }},{
+            term: {
+              'operationName': item[1]
+            },
+          }]
+        }})
+      })
+    }
+    return query
+  };
+};
+
+export const getErrorRatePltQuery = (mode: TraceAnalyticsMode, fixedInterval) => {
+  if (mode === 'data_prepper') {
+    return {
+      size: 0,
+      query: {
+        bool: {
+          must: [],
+          filter: [],
+          should: [],
+          must_not: [],
+        },
+      },
+      aggs: {
+        error_rate: {
+          date_histogram: {
+            field: 'startTime',
+            fixed_interval: fixedInterval,
+          },
+          aggs: {
+            error_count: {
+              filter: {
+                term: {
+                  'traceGroupFields.statusCode': '2',
+                },
+              },
+              aggs: {
+                trace_count: {
+                  cardinality: {
+                    field: 'traceId',
+                  },
+                },
+              },
+            },
+            trace_count: {
+              cardinality: {
+                field: 'traceId',
+              },
+            },
+            error_rate: {
+              bucket_script: {
+                buckets_path: {
+                  total: 'trace_count.value',
+                  errors: 'error_count>trace_count.value',
+                },
+                script: 'params.errors / params.total * 100',
+              },
+            },
+          },
+        },
+      },
+    };
+  } else if (mode === 'jaeger') {
+    return {
+      size: 0,
+      query: {
+        bool: {
+          must: [],
+          filter: [],
+          should: [],
+          must_not: [],
+        },
+      },
+      aggs: {
+        error_rate: {
+          date_histogram: {
+            field: 'startTimeMillis',
+            fixed_interval: fixedInterval,
+          },
+          aggs: {
+            error_count: {
+              filter: {
+                term: {
+                  'tag.error': true,
+                },
+              },
+              aggs: {
+                trace_count: {
+                  cardinality: {
+                    field: 'traceID',
+                  },
+                },
+              },
+            },
+            trace_count: {
+              cardinality: {
+                field: 'traceID',
+              },
+            },
+            error_rate: {
+              bucket_script: {
+                buckets_path: {
+                  total: 'trace_count.value',
+                  errors: 'error_count>trace_count.value',
+                },
+                script: 'params.errors / params.total * 100',
+              },
+            },
+          },
+        },
+      },
+    };
+  }
+};
+
+export const getTopErrorRatePltQuery = (fixedInterval) => {
   const query: any = {
     size: 0,
     query: {
@@ -216,27 +733,27 @@ export const getErrorRatePltQuery = (fixedInterval) => {
     aggs: {
       error_rate: {
         date_histogram: {
-          field: 'startTime',
+          field: 'startTimeMillis',
           fixed_interval: fixedInterval,
         },
         aggs: {
           error_count: {
             filter: {
               term: {
-                'traceGroupFields.statusCode': '2',
+                'tag.error': true,
               },
             },
             aggs: {
               trace_count: {
                 cardinality: {
-                  field: 'traceId',
+                  field: 'traceID',
                 },
               },
             },
           },
           trace_count: {
             cardinality: {
-              field: 'traceId',
+              field: 'traceID',
             },
           },
           error_rate: {
@@ -255,8 +772,8 @@ export const getErrorRatePltQuery = (fixedInterval) => {
   return query;
 };
 
-export const getDashboardThroughputPltQuery = (fixedInterval) => {
-  const query: any = {
+export const getDashboardThroughputPltQuery = (mode: TraceAnalyticsMode, fixedInterval) => {
+  return {
     size: 0,
     query: {
       bool: {
@@ -269,18 +786,161 @@ export const getDashboardThroughputPltQuery = (fixedInterval) => {
     aggs: {
       throughput: {
         date_histogram: {
-          field: 'startTime',
+          field: mode === 'jaeger' ? 'startTimeMillis' : 'startTime',
           fixed_interval: fixedInterval,
         },
         aggs: {
           trace_count: {
             cardinality: {
-              field: 'traceId',
+              field: mode === 'jaeger' ? 'traceID': 'traceId',
             },
           },
         },
       },
     },
   };
-  return query;
+};
+
+export const getDashboardErrorTopGroupsQuery = (mode: TraceAnalyticsMode) => {
+  return {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      error_rate: {
+        multi_terms: {
+          terms: [
+            {
+              "field": "process.serviceName"
+            },
+            {
+              "field": "operationName"
+            }
+          ],
+          order: {
+            'error_count': 'desc'
+          }, 
+          size: 5
+        },
+        aggs: {
+          error_count: {
+            filter: {
+              term: {
+                'tag.error': true,
+              },
+            },
+            aggs: {
+              trace_count: {
+                cardinality: {
+                  field: 'traceID',
+                },
+              },
+            },
+          },
+          trace_count: {
+            cardinality: {
+              field: 'traceID',
+            },
+          },
+          error_rate: {
+            bucket_script: {
+              buckets_path: {
+                total: 'trace_count.value',
+                errors: 'error_count>trace_count.value',
+              },
+              script: 'params.errors / params.total * 100',
+            },
+          }
+        },
+      },
+    },
+  };
+};
+
+export const getDashboardThroughputTopGroupsQuery = (mode: TraceAnalyticsMode) => {
+  return {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      throughput: {
+        multi_terms: {
+          terms: [
+            {
+              "field": "process.serviceName"
+            },
+            {
+              "field": "operationName"
+            }
+          ],
+          order: {
+            'latency': 'desc'
+          },
+          size: 5
+        },
+        aggs: {
+          latencies: {
+            avg: {
+              field: 'duration'
+            }
+          },
+          trace_count: {
+            cardinality: {
+              field: mode === 'jaeger' ? 'traceID': 'traceId',
+            },
+          },
+          average_latency: {
+            scripted_metric: {
+              init_script: 'state.traceIDToLatencyMap = [:];',
+              map_script: `
+                if (doc.containsKey('duration') && !doc['duration'].empty) {
+                  def traceID = doc['traceID'].value;
+                  if (!state.traceIDToLatencyMap.containsKey(traceID)) {
+                    state.traceIDToLatencyMap[traceID] = doc['duration'].value;
+                  }
+                }
+              `,
+              combine_script: 'return state.traceIDToLatencyMap',
+              reduce_script: `
+                def seenTraceIdsMap = [:];
+                def totalLatency = 0.0;
+                def traceCount = 0.0;
+
+                for (s in states) {
+                  if (s == null) {
+                    continue;
+                  }
+
+                  for (entry in s.entrySet()) {
+                    def traceID = entry.getKey();
+                    def traceLatency = entry.getValue();
+                    if (!seenTraceIdsMap.containsKey(traceID)) {
+                      seenTraceIdsMap[traceID] = true;
+                      totalLatency += traceLatency;
+                      traceCount++;
+                    }
+                  }
+                }
+
+                def average_latency_nanos = totalLatency / traceCount;
+                return Math.round(average_latency_nanos / 10) / 100.0;
+              `,
+            },
+          }
+        },
+      },
+    },
+  };
 };
diff --git a/public/components/trace_analytics/requests/queries/services_queries.ts b/public/components/trace_analytics/requests/queries/services_queries.ts
index 327e029d42..46ee1e30dc 100644
--- a/public/components/trace_analytics/requests/queries/services_queries.ts
+++ b/public/components/trace_analytics/requests/queries/services_queries.ts
@@ -5,13 +5,15 @@
 
 import {
   DATA_PREPPER_SERVICE_INDEX_NAME,
+  JAEGER_SERVICE_INDEX_NAME,
   SERVICE_MAP_MAX_EDGES,
   SERVICE_MAP_MAX_NODES,
 } from '../../../../../common/constants/trace_analytics';
 import { getServiceMapTargetResources } from '../../components/common/helper_functions';
 import { ServiceObject } from '../../components/common/plots/service_map';
+import { TraceAnalyticsMode } from '../../home';
 
-export const getServicesQuery = (serviceName: string | undefined, DSL?: any) => {
+export const getServicesQuery = (mode: TraceAnalyticsMode, serviceName: string | undefined, DSL?: any) => {
   const query = {
     size: 0,
     query: {
@@ -25,40 +27,64 @@ export const getServicesQuery = (serviceName: string | undefined, DSL?: any) =>
     aggs: {
       service: {
         terms: {
-          field: 'serviceName',
+          field: mode === 'jaeger' ? 'process.serviceName' : 'serviceName',
           size: 10000,
         },
         aggs: {
           trace_count: {
             cardinality: {
-              field: 'traceId',
+              field: mode === 'jaeger'? 'traceID': 'traceId',
             },
           },
         },
       },
     },
   };
-  if (serviceName) {
-    query.query.bool.must.push({
-      term: {
-        serviceName,
-      },
+  if (mode === 'jaeger') {
+    if (serviceName) {
+      query.query.bool.must.push({
+        term: {
+          "process.serviceName": serviceName,
+        },
+      });
+    }
+    DSL?.custom?.serviceNames?.map((service: string) => {
+      query.query.bool.must.push({
+        term: {
+          "process.serviceName": service,
+        },
+      });
     });
-  }
-  DSL?.custom?.serviceNames?.map((service: string) => {
-    query.query.bool.must.push({
-      term: {
-        serviceName: service,
-      },
+    DSL?.custom?.serviceNamesExclude?.map((service: string) => {
+      query.query.bool.must_not.push({
+        term: {
+          "process.serviceName": service,
+        },
+      });
     });
-  });
-  DSL?.custom?.serviceNamesExclude?.map((service: string) => {
-    query.query.bool.must_not.push({
-      term: {
-        serviceName: service,
-      },
+  } else {
+    if (serviceName) {
+      query.query.bool.must.push({
+        term: {
+          "serviceName": serviceName,
+        },
+      });
+    }
+    DSL?.custom?.serviceNames?.map((service: string) => {
+      query.query.bool.must.push({
+        term: {
+          "serviceName": service,
+        },
+      });
     });
-  });
+    DSL?.custom?.serviceNamesExclude?.map((service: string) => {
+      query.query.bool.must_not.push({
+        term: {
+          "serviceName": service,
+        },
+      });
+    });
+  }
   return query;
 };
 
@@ -92,7 +118,7 @@ export const getRelatedServicesQuery = (serviceName: string) => {
                 must: [
                   {
                     term: {
-                      serviceName,
+                      "serviceName": serviceName,
                     },
                   },
                 ],
@@ -107,9 +133,9 @@ export const getRelatedServicesQuery = (serviceName: string) => {
   return query;
 };
 
-export const getServiceNodesQuery = () => {
+export const getServiceNodesQuery = (mode: TraceAnalyticsMode) => {
   return {
-    index: DATA_PREPPER_SERVICE_INDEX_NAME,
+    index: mode === 'jaeger' ? JAEGER_SERVICE_INDEX_NAME : DATA_PREPPER_SERVICE_INDEX_NAME,
     size: 0,
     query: {
       bool: {
@@ -146,9 +172,9 @@ export const getServiceNodesQuery = () => {
   };
 };
 
-export const getServiceEdgesQuery = (source: 'destination' | 'target') => {
+export const getServiceEdgesQuery = (source: 'destination' | 'target', mode: TraceAnalyticsMode) => {
   return {
-    index: DATA_PREPPER_SERVICE_INDEX_NAME,
+    index: mode === 'jaeger' ? JAEGER_SERVICE_INDEX_NAME : DATA_PREPPER_SERVICE_INDEX_NAME,
     size: 0,
     query: {
       bool: {
@@ -185,7 +211,7 @@ export const getServiceEdgesQuery = (source: 'destination' | 'target') => {
   };
 };
 
-export const getServiceMetricsQuery = (DSL: any, serviceNames: string[], map: ServiceObject) => {
+export const getServiceMetricsQuery = (DSL: any, serviceNames: string[], map: ServiceObject, mode: TraceAnalyticsMode) => {
   const traceGroupFilter = new Set(
     DSL?.query?.bool.must
       .filter((must: any) => must.term?.['traceGroup'])
@@ -204,7 +230,112 @@ export const getServiceMetricsQuery = (DSL: any, serviceNames: string[], map: Se
           )
         )
       : [].concat(...Object.keys(map).map((service) => getServiceMapTargetResources(map, service)));
-  const query: any = {
+  const jaegerQuery: any = {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        should: [],
+        must_not: [],
+        filter: [
+          {
+            terms: {
+              "process.serviceName": serviceNames,
+            },
+          },
+          {
+            bool: {
+              should: [
+                {
+                  bool: {
+                    filter: [
+                      {
+                        bool: {
+                          must_not: {
+                            term: {
+                              references: {
+                                value: [],
+                              },
+                            },
+                          },
+                        },
+                      },
+                    ],
+                  },
+                },
+                {
+                  bool: {
+                    must: {
+                      term: {
+                        references: {
+                          value: [],
+                        },
+                      },
+                    },
+                  },
+                },
+              ],
+              adjust_pure_negative: true,
+              boost: 1,
+            },
+          },
+        ],
+      },
+    },
+    aggregations: {
+      service_name: {
+        terms: {
+          field: 'process.serviceName',
+          size: SERVICE_MAP_MAX_NODES,
+          min_doc_count: 1,
+          shard_min_doc_count: 0,
+          show_term_doc_count_error: false,
+          order: [
+            {
+              _count: 'desc',
+            },
+            {
+              _key: 'asc',
+            },
+          ],
+        },
+        aggregations: {
+          average_latency_nanos: {
+            avg: {
+              field: 'duration',
+            },
+          },
+          average_latency: {
+            bucket_script: {
+              buckets_path: {
+                count: '_count',
+                latency: 'average_latency_nanos.value',
+              },
+              script: 'Math.round(params.latency / 10) / 100.0',
+            },
+          },
+          error_count: {
+            filter: {
+              term: {
+                'tag.error': true,
+              },
+            },
+          },
+          error_rate: {
+            bucket_script: {
+              buckets_path: {
+                total: '_count',
+                errors: 'error_count._count',
+              },
+              script: 'params.errors / params.total * 100',
+            },
+          },
+        },
+      },
+    },
+  };
+
+  const dataPrepperQuery: any = {
     size: 0,
     query: {
       bool: {
@@ -313,6 +444,9 @@ export const getServiceMetricsQuery = (DSL: any, serviceNames: string[], map: Se
       },
     },
   };
-  if (DSL.custom?.timeFilter.length > 0) query.query.bool.must.push(...DSL.custom.timeFilter);
-  return query;
+  if (DSL.custom?.timeFilter.length > 0) {
+    jaegerQuery.query.bool.must.push(...DSL.custom.timeFilter);
+    dataPrepperQuery.query.bool.must.push(...DSL.custom.timeFilter);
+  }
+  return mode === 'jaeger' ? jaegerQuery : dataPrepperQuery;
 };
diff --git a/public/components/trace_analytics/requests/queries/traces_queries.ts b/public/components/trace_analytics/requests/queries/traces_queries.ts
index 89d63a42e7..fbff7cf69d 100644
--- a/public/components/trace_analytics/requests/queries/traces_queries.ts
+++ b/public/components/trace_analytics/requests/queries/traces_queries.ts
@@ -6,6 +6,7 @@
 import { PropertySort } from '@elastic/eui';
 import { TRACES_MAX_NUM } from '../../../../../common/constants/trace_analytics';
 import { SpanSearchParams } from '../../components/traces/span_detail_table';
+import { TraceAnalyticsMode } from '../../home';
 
 export const getTraceGroupPercentilesQuery = () => {
   const query: any = {
@@ -46,10 +47,75 @@ export const getTraceGroupPercentilesQuery = () => {
   return query;
 };
 
-export const getTracesQuery = (traceId: string = '', sort?: PropertySort) => {
+export const getTracesQuery = (mode: TraceAnalyticsMode, traceId: string = '', sort?: PropertySort) => {
   const field = sort?.field || '_key';
   const direction = sort?.direction || 'asc';
-  const query: any = {
+  const jaegerQuery: any = {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      traces: {
+        terms: {
+          field: 'traceID',
+          size: TRACES_MAX_NUM,
+          order: {
+            [field]: direction,
+          },
+        },
+        aggs: {
+          latency: {
+            max: {
+              script: {
+                source: `
+                if (doc.containsKey('duration') && !doc['duration'].empty) {
+                  return Math.round(doc['duration'].value) / 1000.0
+                }
+
+                return 0
+                `,
+                lang: 'painless',
+              },
+            },
+          },
+          trace_group: {
+            terms: {
+              field: 'traceGroup',
+              size: 1,
+            },
+          },
+          error_count: {
+            filter: {
+              term: {
+                'tag.error': true,
+              },
+            },
+          },
+          last_updated: {
+            max: {
+              script: {
+                source: `
+                if (doc.containsKey('startTime') && !doc['startTime'].empty && doc.containsKey('duration') && !doc['duration'].empty) {
+                  return (Math.round(doc['duration'].value) + Math.round(doc['startTime'].value)) / 1000.0
+                }
+
+                return 0
+                `,
+                lang: 'painless',
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+  const dataPrepperQuery: any = {
     size: 0,
     query: {
       bool: {
@@ -76,7 +142,6 @@ export const getTracesQuery = (traceId: string = '', sort?: PropertySort) => {
                 if (doc.containsKey('traceGroupFields.durationInNanos') && !doc['traceGroupFields.durationInNanos'].empty) {
                   return Math.round(doc['traceGroupFields.durationInNanos'].value / 10000) / 100.0
                 }
-
                 return 0
                 `,
                 lang: 'painless',
@@ -106,17 +171,67 @@ export const getTracesQuery = (traceId: string = '', sort?: PropertySort) => {
     },
   };
   if (traceId) {
-    query.query.bool.must.push({
+    jaegerQuery.query.bool.must.push({
+      term: {
+        "traceID": traceId,
+      },
+    });
+    dataPrepperQuery.query.bool.must.push({
       term: {
         traceId,
       },
     });
   }
-  return query;
+  return mode === 'jaeger' ? jaegerQuery : dataPrepperQuery;
 };
 
-export const getServiceBreakdownQuery = (traceId: string) => {
-  const query = {
+export const getServiceBreakdownQuery = (traceId: string, mode: TraceAnalyticsMode) => {
+  const jaegerQuery = {
+    size: 0,
+    query: {
+      bool: {
+        must: [
+          {
+            term: {
+              "traceID": traceId,
+            },
+          },
+        ],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      service_type: {
+        terms: {
+          field: 'process.serviceName',
+          order: [
+            {
+              total_latency_nanos: 'desc',
+            },
+          ],
+        },
+        aggs: {
+          total_latency_nanos: {
+            sum: {
+              field: 'duration',
+            },
+          },
+          total_latency: {
+            bucket_script: {
+              buckets_path: {
+                count: '_count',
+                latency: 'total_latency_nanos.value',
+              },
+              script: 'Math.round(params.latency / 10) / 100.0',
+            },
+          },
+        },
+      },
+    },
+  };
+  const dataPrepperQuery = {
     size: 0,
     query: {
       bool: {
@@ -161,11 +276,54 @@ export const getServiceBreakdownQuery = (traceId: string) => {
       },
     },
   };
-  return query;
+  return mode === 'jaeger'? jaegerQuery : dataPrepperQuery;
 };
 
-export const getSpanDetailQuery = (traceId: string, size = 3000) => {
-  const query = {
+export const getSpanDetailQuery = (mode: TraceAnalyticsMode, traceId: string, size = 3000) => {
+  if (mode === 'jaeger') {
+    return {
+      size,
+      query: {
+        bool: {
+          must: [
+            {
+              term: {
+                "traceID": traceId,
+              },
+            },
+            {
+              exists: {
+                field: 'process.serviceName',
+              },
+            },
+          ],
+          filter: [],
+          should: [],
+          must_not: [],
+        },
+      },
+      sort: [
+        {
+          startTime: {
+            order: 'desc',
+          },
+        },
+      ],
+      _source: {
+        includes: [
+          'process.serviceName',
+          'operationName',
+          'startTime',
+          'endTime',
+          'spanID',
+          'tag',
+          'duration',
+          'references'
+        ]
+      },
+    };
+  } 
+  return {
     size,
     query: {
       bool: {
@@ -205,10 +363,28 @@ export const getSpanDetailQuery = (traceId: string, size = 3000) => {
       ],
     },
   };
-  return query;
 };
 
-export const getPayloadQuery = (traceId: string, size = 1000) => {
+export const getPayloadQuery = (mode: TraceAnalyticsMode, traceId: string, size = 1000) => {
+  if (mode === 'jaeger') {
+    return {
+      size,
+      query: {
+        bool: {
+          must: [
+            {
+              term: {
+                "traceID": traceId,
+              },
+            },
+          ],
+          filter: [],
+          should: [],
+          must_not: [],
+        },
+      },
+    };
+  }
   return {
     size,
     query: {
@@ -228,7 +404,26 @@ export const getPayloadQuery = (traceId: string, size = 1000) => {
   };
 };
 
-export const getSpanFlyoutQuery = (spanId?: string, size = 1000) => {
+export const getSpanFlyoutQuery = (mode: TraceAnalyticsMode, spanId?: string, size = 1000) => {
+  if (mode === 'jaeger') {
+    return {
+      size,
+      query: {
+        bool: {
+          must: [
+            {
+              term: {
+                "spanID": spanId,
+              },
+            },
+          ],
+          filter: [],
+          should: [],
+          must_not: [],
+        },
+      },
+    };
+  }
   return {
     size,
     query: {
@@ -279,7 +474,7 @@ export const getValidTraceIdsQuery = (DSL) => {
     aggs: {
       traces: {
         terms: {
-          field: 'traceId',
+          field: 'traceID',
           size: 10000,
         },
       },
@@ -305,4 +500,4 @@ export const getValidTraceIdsQuery = (DSL) => {
     });
   }
   return query;
-};
+};
\ No newline at end of file
diff --git a/public/components/trace_analytics/requests/request_handler.ts b/public/components/trace_analytics/requests/request_handler.ts
index a115cc7872..494aa9b09b 100644
--- a/public/components/trace_analytics/requests/request_handler.ts
+++ b/public/components/trace_analytics/requests/request_handler.ts
@@ -7,10 +7,14 @@
 import { CoreStart } from '../../../../../../src/core/public';
 import {
   TRACE_ANALYTICS_DSL_ROUTE,
-  TRACE_ANALYTICS_INDICES_ROUTE,
+  TRACE_ANALYTICS_DATA_PREPPER_INDICES_ROUTE,
+  TRACE_ANALYTICS_JAEGER_INDICES_ROUTE,
+  JAEGER_INDEX_NAME,
+  DATA_PREPPER_INDEX_NAME
 } from '../../../../common/constants/trace_analytics';
+import { TraceAnalyticsMode } from '../home';
 
-export function handleDslRequest(http: CoreStart['http'], DSL: any, bodyQuery: any) {
+export function handleDslRequest(http: CoreStart['http'], DSL: any, bodyQuery: any, mode: TraceAnalyticsMode, timeout?: boolean, setShowTimeoutToast?: () => void) {
   if (DSL?.query) {
     bodyQuery.query.bool.must.push(...DSL.query.bool.must);
     bodyQuery.query.bool.filter.push(...DSL.query.bool.filter);
@@ -19,16 +23,39 @@ export function handleDslRequest(http: CoreStart['http'], DSL: any, bodyQuery: a
     if (DSL.query.bool.minimum_should_match)
       bodyQuery.query.bool.minimum_should_match = DSL.query.bool.minimum_should_match;
   }
+  let body = bodyQuery;
+  if (!bodyQuery.index) {
+    body = {...bodyQuery, index: ((mode === 'jaeger' ? JAEGER_INDEX_NAME : DATA_PREPPER_INDEX_NAME)) }
+  }
+  if (timeout) {
+    const id = setTimeout(() => setShowTimeoutToast!(), 30000);
+    return http
+      .post(TRACE_ANALYTICS_DSL_ROUTE, {
+        body: JSON.stringify(body),
+      })
+      .catch((error) => {
+        console.error(error)
+      })
+      .finally(() => clearTimeout(id));
+  }
+
   return http
     .post(TRACE_ANALYTICS_DSL_ROUTE, {
-      body: JSON.stringify(bodyQuery),
+      body: JSON.stringify(body),
     })
     .catch((error) => console.error(error));
 }
 
-export async function handleIndicesExistRequest(http: CoreStart['http'], setIndicesExist) {
+export async function handleJaegerIndicesExistRequest(http: CoreStart['http'], setJaegerIndicesExist) {
+  http
+    .post(TRACE_ANALYTICS_JAEGER_INDICES_ROUTE)
+    .then((exists) => setJaegerIndicesExist(exists))
+    .catch(() => setJaegerIndicesExist(false));
+}
+
+export async function handleDataPrepperIndicesExistRequest(http: CoreStart['http'], setDataPrepperIndicesExist) {
   http
-    .post(TRACE_ANALYTICS_INDICES_ROUTE)
-    .then((exists) => setIndicesExist(exists))
-    .catch(() => setIndicesExist(false));
+    .post(TRACE_ANALYTICS_DATA_PREPPER_INDICES_ROUTE)
+    .then((exists) => setDataPrepperIndicesExist(exists))
+    .catch(() => setDataPrepperIndicesExist(false));
 }
diff --git a/public/components/trace_analytics/requests/services_request_handler.ts b/public/components/trace_analytics/requests/services_request_handler.ts
index 7351113fad..2c0152dff2 100644
--- a/public/components/trace_analytics/requests/services_request_handler.ts
+++ b/public/components/trace_analytics/requests/services_request_handler.ts
@@ -17,17 +17,19 @@ import {
 } from './queries/services_queries';
 import { handleDslRequest } from './request_handler';
 import { HttpSetup } from '../../../../../../src/core/public';
+import { TraceAnalyticsMode } from '../home';
 
 export const handleServicesRequest = async (
   http: HttpSetup,
   DSL: any,
   setItems: any,
+  mode: TraceAnalyticsMode,
   setServiceMap?: any,
-  serviceNameFilter?: string
+  serviceNameFilter?: string,
 ) => {
-  return handleDslRequest(http, DSL, getServicesQuery(serviceNameFilter, DSL))
+  return handleDslRequest(http, DSL, getServicesQuery(mode, serviceNameFilter, DSL), mode)
     .then(async (response) => {
-      const serviceObject: ServiceObject = await handleServiceMapRequest(http, DSL, setServiceMap);
+      const serviceObject: ServiceObject = await handleServiceMapRequest(http, DSL, mode, setServiceMap);
       return Promise.all(
         response.aggregations.service.buckets
           .filter((bucket: any) => serviceObject[bucket.key])
@@ -57,20 +59,20 @@ export const handleServicesRequest = async (
 export const handleServiceMapRequest = async (
   http: HttpSetup,
   DSL: DSLService | any,
+  mode: TraceAnalyticsMode,
   setItems?: any,
-  currService?: string
+  currService?: string,
 ) => {
   let minutesInDateRange: number;
   const startTime = DSL.custom?.timeFilter?.[0]?.range?.startTime;
-  if (startTime) {
+  if (startTime && mode !== 'jaeger') {
     const gte = dateMath.parse(startTime.gte)!;
     const lte = dateMath.parse(startTime.lte, { roundUp: true })!;
     minutesInDateRange = lte.diff(gte, 'minutes', true);
   }
-
   const map: ServiceObject = {};
   let id = 1;
-  await handleDslRequest(http, null, getServiceNodesQuery())
+  await handleDslRequest(http, null, getServiceNodesQuery(mode), mode)
     .then((response) =>
       response.aggregations.service_name.buckets.map(
         (bucket: any) =>
@@ -89,7 +91,7 @@ export const handleServiceMapRequest = async (
     .catch((error) => console.error(error));
 
   const targets = {};
-  await handleDslRequest(http, null, getServiceEdgesQuery('target'))
+  await handleDslRequest(http, null, getServiceEdgesQuery('target', mode), mode)
     .then((response) =>
       response.aggregations.service_name.buckets.map((bucket: any) => {
         bucket.resource.buckets.map((resource: any) => {
@@ -100,7 +102,7 @@ export const handleServiceMapRequest = async (
       })
     )
     .catch((error) => console.error(error));
-  await handleDslRequest(http, null, getServiceEdgesQuery('destination'))
+  await handleDslRequest(http, null, getServiceEdgesQuery('destination', mode), mode)
     .then((response) =>
       Promise.all(
         response.aggregations.service_name.buckets.map((bucket: any) => {
@@ -124,7 +126,8 @@ export const handleServiceMapRequest = async (
   const latencies = await handleDslRequest(
     http,
     DSL,
-    getServiceMetricsQuery(DSL, Object.keys(map), map)
+    getServiceMetricsQuery(DSL, Object.keys(map), map, mode), 
+    mode,
   );
   latencies.aggregations.service_name.buckets.map((bucket: any) => {
     map[bucket.key].latency = bucket.average_latency.value;
@@ -135,7 +138,7 @@ export const handleServiceMapRequest = async (
   });
 
   if (currService) {
-    await handleDslRequest(http, DSL, getRelatedServicesQuery(currService))
+    await handleDslRequest(http, DSL, getRelatedServicesQuery(currService), mode)
       .then((response) =>
         response.aggregations.traces.buckets.filter((bucket: any) => bucket.service.doc_count > 0)
       )
@@ -159,13 +162,14 @@ export const handleServiceViewRequest = (
   serviceName: string,
   http: HttpSetup,
   DSL: any,
-  setFields: any
+  setFields: any,
+  mode: TraceAnalyticsMode,
 ) => {
-  handleDslRequest(http, DSL, getServicesQuery(serviceName))
+  handleDslRequest(http, DSL, getServicesQuery(mode, serviceName), mode)
     .then(async (response) => {
       const bucket = response.aggregations.service.buckets[0];
       if (!bucket) return {};
-      const serviceObject: ServiceObject = await handleServiceMapRequest(http, DSL);
+      const serviceObject: ServiceObject = await handleServiceMapRequest(http, DSL, mode);
       const connectedServices = [
         ...serviceObject[bucket.key].targetServices,
         ...serviceObject[bucket.key].destServices,
diff --git a/public/components/trace_analytics/requests/traces_request_handler.ts b/public/components/trace_analytics/requests/traces_request_handler.ts
index 8766808658..0ed7a02058 100644
--- a/public/components/trace_analytics/requests/traces_request_handler.ts
+++ b/public/components/trace_analytics/requests/traces_request_handler.ts
@@ -10,7 +10,7 @@ import moment from 'moment';
 import { v1 as uuid } from 'uuid';
 import { HttpSetup } from '../../../../../../src/core/public';
 import { TRACE_ANALYTICS_DATE_FORMAT } from '../../../../common/constants/trace_analytics';
-import { nanoToMilliSec } from '../components/common/helper_functions';
+import { microToMilliSec, nanoToMilliSec } from '../components/common/helper_functions';
 import { SpanSearchParams } from '../components/traces/span_detail_table';
 import {
   getPayloadQuery,
@@ -23,9 +23,10 @@ import {
   getValidTraceIdsQuery,
 } from './queries/traces_queries';
 import { handleDslRequest } from './request_handler';
+import { TraceAnalyticsMode } from '../home';
 
-export const handleValidTraceIds = (http: HttpSetup, DSL: any) => {
-  return handleDslRequest(http, {}, getValidTraceIdsQuery(DSL))
+export const handleValidTraceIds = (http: HttpSetup, DSL: any, mode: TraceAnalyticsMode) => {
+  return handleDslRequest(http, {}, getValidTraceIdsQuery(DSL), mode)
     .then((response) => response.aggregations.traces.buckets.map((bucket: any) => bucket.key))
     .catch((error) => console.error(error));
 };
@@ -36,7 +37,8 @@ export const handleTracesRequest = async (
   timeFilterDSL: any,
   items: any,
   setItems: (items: any) => void,
-  sort?: any
+  mode: TraceAnalyticsMode,
+  sort?: any,
 ) => {
   const binarySearch = (arr: number[], target: number) => {
     if (!arr) return Number.NaN;
@@ -55,7 +57,8 @@ export const handleTracesRequest = async (
   const percentileRanges = await handleDslRequest(
     http,
     timeFilterDSL,
-    getTraceGroupPercentilesQuery()
+    getTraceGroupPercentilesQuery(),
+    mode
   ).then((response) => {
     const map: any = {};
     response.aggregations.trace_group_name.buckets.forEach((traceGroup: any) => {
@@ -66,22 +69,32 @@ export const handleTracesRequest = async (
     return map;
   });
 
-  return handleDslRequest(http, DSL, getTracesQuery(undefined, sort))
+  return handleDslRequest(http, DSL, getTracesQuery(mode, undefined, sort), mode)
     .then((response) => {
       return Promise.all(
         response.aggregations.traces.buckets.map((bucket: any) => {
-          return {
-            trace_id: bucket.key,
-            trace_group: bucket.trace_group.buckets[0]?.key,
-            latency: bucket.latency.value,
-            last_updated: moment(bucket.last_updated.value).format(TRACE_ANALYTICS_DATE_FORMAT),
-            error_count: bucket.error_count.doc_count,
-            percentile_in_trace_group: binarySearch(
-              percentileRanges[bucket.trace_group.buckets[0]?.key],
-              bucket.latency.value
-            ),
-            actions: '#',
-          };
+          if (mode === 'data_prepper') { 
+            return {
+              trace_id: bucket.key,
+              trace_group: bucket.trace_group.buckets[0]?.key,
+              latency: bucket.latency.value,
+              last_updated: moment(bucket.last_updated.value).format(TRACE_ANALYTICS_DATE_FORMAT),
+              error_count: bucket.error_count.doc_count,
+              percentile_in_trace_group: binarySearch(
+                percentileRanges[bucket.trace_group.buckets[0]?.key],
+                bucket.latency.value
+              ),
+              actions: '#',
+            };
+        }
+        return {
+          trace_id: bucket.key,
+          latency: bucket.latency.value,
+          last_updated: moment(bucket.last_updated.value).format(TRACE_ANALYTICS_DATE_FORMAT),
+          error_count: bucket.error_count.doc_count,
+          actions: '#',
+        };
+      
         })
       );
     })
@@ -95,9 +108,10 @@ export const handleTraceViewRequest = (
   traceId: string,
   http: HttpSetup,
   fields: {},
-  setFields: (fields: any) => void
+  setFields: (fields: any) => void,
+  mode: TraceAnalyticsMode,
 ) => {
-  handleDslRequest(http, null, getTracesQuery(traceId))
+  handleDslRequest(http, null, getTracesQuery(mode, traceId), mode)
     .then(async (response) => {
       const bucket = response.aggregations.traces.buckets[0];
       return {
@@ -123,7 +137,8 @@ export const handleServicesPieChartRequest = async (
   traceId: string,
   http: HttpSetup,
   setServiceBreakdownData: (serviceBreakdownData: any) => void,
-  setColorMap: (colorMap: any) => void
+  setColorMap: (colorMap: any) => void,
+  mode: TraceAnalyticsMode,
 ) => {
   const colors = [
     '#7492e7',
@@ -141,7 +156,7 @@ export const handleServicesPieChartRequest = async (
   ];
   const colorMap: any = {};
   let index = 0;
-  await handleDslRequest(http, null, getServiceBreakdownQuery(traceId))
+  await handleDslRequest(http, null, getServiceBreakdownQuery(traceId, mode), mode)
     .then((response) =>
       Promise.all(
         response.aggregations.service_type.buckets.map((bucket: any) => {
@@ -185,10 +200,11 @@ export const handleSpansGanttRequest = (
   http: HttpSetup,
   setSpanDetailData: (spanDetailData: any) => void,
   colorMap: any,
-  spanFiltersDSL: any
+  spanFiltersDSL: any,
+  mode: TraceAnalyticsMode,
 ) => {
-  handleDslRequest(http, spanFiltersDSL, getSpanDetailQuery(traceId))
-    .then((response) => hitsToSpanDetailData(response.hits.hits, colorMap))
+  handleDslRequest(http, spanFiltersDSL, getSpanDetailQuery(mode, traceId), mode)
+    .then((response) => hitsToSpanDetailData(response.hits.hits, colorMap, mode))
     .then((newItems) => setSpanDetailData(newItems))
     .catch((error) => console.error(error));
 };
@@ -196,16 +212,17 @@ export const handleSpansGanttRequest = (
 export const handleSpansFlyoutRequest = (
   http: HttpSetup,
   spanId: string,
-  setItems: (items: any) => void
+  setItems: (items: any) => void,
+  mode: TraceAnalyticsMode,
 ) => {
-  handleDslRequest(http, null, getSpanFlyoutQuery(spanId))
+  handleDslRequest(http, null, getSpanFlyoutQuery(mode, spanId), mode)
     .then((response) => {
       setItems(response?.hits.hits?.[0]?._source);
     })
     .catch((error) => console.error(error));
 };
 
-const hitsToSpanDetailData = async (hits: any, colorMap: any) => {
+const hitsToSpanDetailData = async (hits: any, colorMap: any, mode: TraceAnalyticsMode) => {
   const data: { gantt: any[]; table: any[]; ganttMaxX: number } = {
     gantt: [],
     table: [],
@@ -213,21 +230,21 @@ const hitsToSpanDetailData = async (hits: any, colorMap: any) => {
   };
   if (hits.length === 0) return data;
 
-  const minStartTime = nanoToMilliSec(hits[hits.length - 1].sort[0]);
+  const minStartTime = mode === 'jaeger' ? microToMilliSec(hits[hits.length - 1].sort[0]) : nanoToMilliSec(hits[hits.length - 1].sort[0]);
   let maxEndTime = 0;
 
   hits.forEach((hit: any) => {
-    const startTime = nanoToMilliSec(hit.sort[0]) - minStartTime;
-    const duration = _.round(nanoToMilliSec(hit._source.durationInNanos), 2);
-    const serviceName = _.get(hit, ['_source', 'serviceName']);
-    const name = _.get(hit, '_source.name');
-    const error = hit._source['status.code'] === 2 ? ' \u26a0 Error' : '';
+    const startTime = mode === 'jaeger' ? microToMilliSec(hit.sort[0]) - minStartTime : nanoToMilliSec(hit.sort[0]) - minStartTime;
+    const duration = mode === 'jaeger' ? _.round(microToMilliSec(hit._source.duration), 2) : _.round(nanoToMilliSec(hit._source.durationInNanos), 2);;
+    const serviceName = mode === 'jaeger'? _.get(hit, ['_source', 'process'])['serviceName'] : _.get(hit, ['_source', 'serviceName']);
+    const name = mode === 'jaeger' ? _.get(hit, '_source.operationName') : _.get(hit, '_source.name');
+    const error = mode === 'jaeger' ? (hit._source['tag']['error'] === true ? ' \u26a0 Error' : '') : (hit._source['status.code'] === 2 ? ' \u26a0 Error' : '');
     const uniqueLabel = `${serviceName} <br>${name} ` + uuid();
     maxEndTime = Math.max(maxEndTime, startTime + duration);
 
     data.table.push({
       service_name: serviceName,
-      span_id: hit._source.spanId,
+      span_id: hit._source.spanID,
       latency: duration,
       vs_benchmark: 0,
       error,
@@ -246,7 +263,7 @@ const hitsToSpanDetailData = async (hits: any, colorMap: any) => {
         orientation: BarOrientation.horizontal,
         hoverinfo: 'none',
         showlegend: false,
-        spanId: hit._source.spanId,
+        spanId: mode === 'jaeger' ? hit._source.spanID : hit._source.spanId,
       },
       {
         x: [duration],
@@ -261,7 +278,7 @@ const hitsToSpanDetailData = async (hits: any, colorMap: any) => {
         type: 'bar',
         orientation: BarOrientation.horizontal,
         hovertemplate: '%{x}<extra></extra>',
-        spanId: hit._source.spanId,
+        spanId: mode === 'jaeger' ? hit._source.spanID : hit._source.spanId,
       }
     );
   });
@@ -274,9 +291,10 @@ export const handlePayloadRequest = (
   traceId: string,
   http: HttpSetup,
   payloadData: any,
-  setPayloadData: (payloadData: any) => void
+  setPayloadData: (payloadData: any) => void,
+  mode: TraceAnalyticsMode,
 ) => {
-  handleDslRequest(http, null, getPayloadQuery(traceId))
+  handleDslRequest(http, null, getPayloadQuery(mode, traceId), mode)
     .then((response) => setPayloadData(JSON.stringify(response.hits.hits, null, 2)))
     .catch((error) => console.error(error));
 };
@@ -286,9 +304,10 @@ export const handleSpansRequest = (
   setItems: (items: any) => void,
   setTotal: (total: number) => void,
   spanSearchParams: SpanSearchParams,
-  DSL: any
+  DSL: any,
+  mode: TraceAnalyticsMode,
 ) => {
-  handleDslRequest(http, DSL, getSpansQuery(spanSearchParams))
+  handleDslRequest(http, DSL, getSpansQuery(spanSearchParams), mode)
     .then((response) => {
       setItems(response.hits.hits.map((hit: any) => hit._source));
       setTotal(response.hits.total?.value || 0);
diff --git a/server/routes/trace_analytics_dsl_router.ts b/server/routes/trace_analytics_dsl_router.ts
index b648436220..171483fd9b 100644
--- a/server/routes/trace_analytics_dsl_router.ts
+++ b/server/routes/trace_analytics_dsl_router.ts
@@ -9,15 +9,18 @@ import { IRouter } from '../../../../src/core/server';
 import {
   DATA_PREPPER_INDEX_NAME,
   DATA_PREPPER_SERVICE_INDEX_NAME,
+  JAEGER_INDEX_NAME,
+  JAEGER_SERVICE_INDEX_NAME,
   TRACE_ANALYTICS_DSL_ROUTE,
-  TRACE_ANALYTICS_INDICES_ROUTE,
+  TRACE_ANALYTICS_DATA_PREPPER_INDICES_ROUTE,
+  TRACE_ANALYTICS_JAEGER_INDICES_ROUTE,
 } from '../../common/constants/trace_analytics';
 import { addRequestToMetric } from '../common/metrics/metrics_helper';
 
 export function registerTraceAnalyticsDslRouter(router: IRouter) {
   router.post(
     {
-      path: TRACE_ANALYTICS_INDICES_ROUTE,
+      path: TRACE_ANALYTICS_DATA_PREPPER_INDICES_ROUTE,
       validate: false,
     },
     async (context, request, response) => {
@@ -42,6 +45,33 @@ export function registerTraceAnalyticsDslRouter(router: IRouter) {
       }
     }
   );
+  router.post(
+    {
+      path: TRACE_ANALYTICS_JAEGER_INDICES_ROUTE,
+      validate: false,
+    },
+    async (context, request, response) => {
+      const params: RequestParams.IndicesExists = {
+        index: [JAEGER_INDEX_NAME, JAEGER_SERVICE_INDEX_NAME],
+        allow_no_indices: false,
+      };
+      try {
+        const resp = await context.core.opensearch.legacy.client.callAsCurrentUser(
+          'indices.exists',
+          params
+        );
+        return response.ok({
+          body: resp,
+        });
+      } catch (error) {
+        console.error(error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
   router.post(
     {
       path: TRACE_ANALYTICS_DSL_ROUTE,
diff --git a/test/constants.ts b/test/constants.ts
index 8a4fc127d6..fde1baea60 100644
--- a/test/constants.ts
+++ b/test/constants.ts
@@ -141,6 +141,63 @@ export const TEST_SPAN_RESPONSE = {
     ],
   },
 };
+export const TEST_JAEGER_SPAN_RESPONSE = {
+  took: 10,
+  timed_out: false,
+  _shards: {
+      total: 5,
+      successful: 5,
+      skipped: 0,
+      failed: 0
+  },
+  hits: {
+      total: {
+          value: 1,
+          relation: "eq"
+      },
+      max_score: 4.0943446,
+      hits: [
+          {
+              _index: "jaeger-span-2022-12-16",
+              _id: "FQ_alIUB3s3m6OOm24MJ",
+              _score: 4.0943446,
+              _source: {
+                  traceID: "00de6a9aaf045bd4",
+                  spanID: "00de6a9aaf045bd4",
+                  flags: 1,
+                  operationName: "HTTP GET /config",
+                  references: [],
+                  startTime: 1671214092597974,
+                  startTimeMillis: 1671214092597,
+                  duration: 40,
+                  tags: [],
+                  tag: {
+                      "component": "net/http",
+                      "http@method": "GET",
+                      "http@status_code": 200,
+                      "http@url": "/config?nonse=0.8009634976926217",
+                      "internal@span@format": "proto",
+                      "sampler@param": true,
+                      "sampler@type": "const",
+                      "span@kind": "server"
+                  },
+                  logs: [],
+                  process: {
+                      "serviceName": "frontend",
+                      "tags": [],
+                      "tag": {
+                          "client-uuid": "40958cebd77cf9a2",
+                          "hostname": "b0f1d89879ca",
+                          "ip": "10.18.203.1",
+                          "jaeger@version": "Go-2.30.0"
+                      }
+                  }
+              }
+          }
+      ]
+  }
+}
+
 export const TEST_SERVICE_MAP_GRAPH = {
   graph: {
     nodes: [