From 873a296dbc999cfe3fa51898321f4a4fbb2931a7 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 6 Jun 2023 14:46:11 -0400
Subject: [PATCH 01/26] trace analytics v2 first remove expensive dashboard
 page

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 public/components/trace_analytics/home.tsx    |  6 +++---
 .../trace_analytics/trace_side_nav.tsx        | 20 +++++++------------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/public/components/trace_analytics/home.tsx b/public/components/trace_analytics/home.tsx
index 7d4569949..da4e7bd9d 100644
--- a/public/components/trace_analytics/home.tsx
+++ b/public/components/trace_analytics/home.tsx
@@ -175,7 +175,7 @@ export const Home = (props: HomeProps) => {
         toastLifeTimeMs={6000}
       />
       <HashRouter>
-        <Route
+        {/* <Route
           exact
           path={['/']}
           render={(routerProps) => (
@@ -189,7 +189,7 @@ export const Home = (props: HomeProps) => {
               />
             </TraceSideBar>
           )}
-        />
+        /> */}
         <Route
           exact
           path="/traces"
@@ -218,7 +218,7 @@ export const Home = (props: HomeProps) => {
         />
         <Route
           exact
-          path="/services"
+          path={['/services', '/']}
           render={(routerProps) => (
             <TraceSideBar>
               <Services
diff --git a/public/components/trace_analytics/trace_side_nav.tsx b/public/components/trace_analytics/trace_side_nav.tsx
index 77cb44596..de1a346d4 100644
--- a/public/components/trace_analytics/trace_side_nav.tsx
+++ b/public/components/trace_analytics/trace_side_nav.tsx
@@ -4,7 +4,6 @@
  */
 
 import {
-  EuiButton,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPage,
@@ -12,22 +11,17 @@ import {
   EuiPageSideBar,
   EuiSideNav,
   EuiSideNavItemType,
-  EuiSwitch,
 } from '@elastic/eui';
 import React from 'react';
 
 export function TraceSideBar(props: { children: React.ReactNode }) {
   function setIsSelected(items: Array<EuiSideNavItemType<React.ReactNode>>, hash: string): boolean {
-    if (hash === '#/') {
-      items[0].isSelected = true;
-      return true;
-    }
     if (hash === '#/traces') {
-      items[0].items[0].isSelected = true;
+      items[0].items[1].isSelected = true;
       return true;
     }
-    if (hash === '#/services') {
-      items[0].items[1].isSelected = true;
+    if (hash === '#/services' || hash === '#/') {
+      items[0].items[0].isSelected = true;
       return true;
     }
   }
@@ -39,14 +33,14 @@ export function TraceSideBar(props: { children: React.ReactNode }) {
       href: '#/',
       items: [
         {
-          name: 'Traces',
+          name: 'Services',
           id: 1.1,
-          href: '#/traces',
+          href: '#/services',
         },
         {
-          name: 'Services',
+          name: 'Traces',
           id: 1.2,
-          href: '#/services',
+          href: '#/traces',
         },
       ],
     },

From 639c81102f856cdaa9bdadcfdf43f3a0a8ac61d8 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 7 Jun 2023 10:09:00 -0400
Subject: [PATCH 02/26] get trace groups request working and mapping correctly

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../components/services/services_content.tsx  | 19 ++++++++++++++-
 .../requests/queries/services_queries.ts      | 23 +++++++++++++++++++
 .../requests/services_request_handler.ts      | 19 +++++++++++++++
 3 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx
index 417c9420e..e713ab778 100644
--- a/public/components/trace_analytics/components/services/services_content.tsx
+++ b/public/components/trace_analytics/components/services/services_content.tsx
@@ -4,12 +4,13 @@
  */
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import { EuiSpacer } from '@elastic/eui';
+import { EuiButton, EuiComboBox, EuiSpacer } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import {
   handleServiceMapRequest,
   handleServicesRequest,
+  handleTraceGroupsRequest,
 } from '../../requests/services_request_handler';
 import { FilterType } from '../common/filters/filters';
 import { getValidFilterFields } from '../common/filters/filter_helpers';
@@ -18,6 +19,7 @@ import { ServiceMap, ServiceObject } from '../common/plots/service_map';
 import { SearchBar } from '../common/search_bar';
 import { ServicesProps } from './services';
 import { ServicesTable } from './services_table';
+import { OptionType } from '../../../../../common/types/application_analytics';
 
 export function ServicesContent(props: ServicesProps) {
   const {
@@ -42,6 +44,8 @@ export function ServicesContent(props: ServicesProps) {
     jaegerIndicesExist,
   } = props;
   const [tableItems, setTableItems] = useState([]);
+  const [traceGroups, setTraceGroups] = useState<OptionType[]>([]);
+  // console.log(traceGroups)
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
   const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
     'latency' | 'error_rate' | 'throughput'
@@ -104,6 +108,7 @@ export function ServicesContent(props: ServicesProps) {
         setServiceMap,
         currService || filteredService
       ),
+      ...[mode === 'data_prepper' && dataPrepperIndicesExist ? [handleTraceGroupsRequest(http, DSL, mode, setTraceGroups)] : []]
     ]);
     setLoading(false);
   };
@@ -125,6 +130,18 @@ export function ServicesContent(props: ServicesProps) {
 
   return (
     <>
+      {mode === 'data_prepper' && dataPrepperIndicesExist && traceGroups ? (<EuiComboBox
+            aria-label="Select trace group"
+            placeholder="Select or add trace group"
+            options={traceGroups}
+            singleSelection={{ asPlainText: true }}
+            // selectedOptions={selectedTraces}
+            // onChange={onTraceChange}
+            // onCreateOption={onCreateTrace}
+            isClearable={false}
+            data-test-subj="traceGroupsComboBox"
+          />)
+      : null}
       <SearchBar
         query={query}
         filters={filters}
diff --git a/public/components/trace_analytics/requests/queries/services_queries.ts b/public/components/trace_analytics/requests/queries/services_queries.ts
index 46ee1e30d..82ea27681 100644
--- a/public/components/trace_analytics/requests/queries/services_queries.ts
+++ b/public/components/trace_analytics/requests/queries/services_queries.ts
@@ -13,6 +13,29 @@ import { getServiceMapTargetResources } from '../../components/common/helper_fun
 import { ServiceObject } from '../../components/common/plots/service_map';
 import { TraceAnalyticsMode } from '../../home';
 
+export const getTraceGroupsQuery = () => {
+  const query = {
+    size: 0,
+    query:{
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      }
+    },
+    aggs: {
+      traceGroup: {
+        terms: {
+          field: "traceGroup",
+          size: 500
+        }
+      }
+    }
+  }
+  return query;
+}
+
 export const getServicesQuery = (mode: TraceAnalyticsMode, serviceName: string | undefined, DSL?: any) => {
   const query = {
     size: 0,
diff --git a/public/components/trace_analytics/requests/services_request_handler.ts b/public/components/trace_analytics/requests/services_request_handler.ts
index 2c0152dff..7fe027cbd 100644
--- a/public/components/trace_analytics/requests/services_request_handler.ts
+++ b/public/components/trace_analytics/requests/services_request_handler.ts
@@ -14,6 +14,7 @@ import {
   getServiceMetricsQuery,
   getServiceNodesQuery,
   getServicesQuery,
+  getTraceGroupsQuery,
 } from './queries/services_queries';
 import { handleDslRequest } from './request_handler';
 import { HttpSetup } from '../../../../../../src/core/public';
@@ -56,6 +57,24 @@ export const handleServicesRequest = async (
     .catch((error) => console.error(error));
 };
 
+export const handleTraceGroupsRequest = async (
+  http: HttpSetup,
+  DSL: any,
+  mode: TraceAnalyticsMode,
+  setItems: any,
+) => {
+  return handleDslRequest(http, DSL, getTraceGroupsQuery(), mode)
+    .then ((response) => {
+      return response.aggregations.traceGroup.buckets.map((bucket: any) => {
+        return bucket.key
+      })
+    })
+    .then((newItems) => {
+      setItems(newItems);
+    })
+    .catch((error) => console.error(error));
+};
+
 export const handleServiceMapRequest = async (
   http: HttpSetup,
   DSL: DSLService | any,

From 2569f12b8c1c92e138c3667c9ce1a640aab6581f Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 7 Jun 2023 12:13:35 -0400
Subject: [PATCH 03/26] get trace group filter fully working

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../components/services/services_content.tsx  | 56 ++++++++++++++++---
 .../requests/services_request_handler.ts      |  2 +-
 2 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx
index e713ab778..cb80eea53 100644
--- a/public/components/trace_analytics/components/services/services_content.tsx
+++ b/public/components/trace_analytics/components/services/services_content.tsx
@@ -20,6 +20,9 @@ import { SearchBar } from '../common/search_bar';
 import { ServicesProps } from './services';
 import { ServicesTable } from './services_table';
 import { OptionType } from '../../../../../common/types/application_analytics';
+import { EuiComboBoxOption } from '@opensearch-project/oui';
+import { data } from 'jquery';
+import { trace } from 'console';
 
 export function ServicesContent(props: ServicesProps) {
   const {
@@ -45,7 +48,7 @@ export function ServicesContent(props: ServicesProps) {
   } = props;
   const [tableItems, setTableItems] = useState([]);
   const [traceGroups, setTraceGroups] = useState<OptionType[]>([]);
-  // console.log(traceGroups)
+  const [selectedTraceGroup, setSelectedTraceGroup] = useState<OptionType[]>();
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
   const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
     'latency' | 'error_rate' | 'throughput'
@@ -54,9 +57,21 @@ export function ServicesContent(props: ServicesProps) {
   const [loading, setLoading] = useState(false);
   const [filteredService, setFilteredService] = useState('');
 
+  const onTraceGroupChange = (selectedOptions: OptionType[]) => {
+    // We should only get back either 0 or 1 options.
+    if (selectedOptions && selectedOptions.length) {
+      addFilter({field: 'traceGroup', operator: 'is', value: selectedOptions[0].label, inverted: false, disabled: false})
+    } else {
+      //remove traceGroup filter
+      setFilters(filters.filter((filter) => !(filter.field === 'traceGroup')));
+    }
+    setSelectedTraceGroup(selectedOptions);
+  };
+
   useEffect(() => {
     chrome.setBreadcrumbs([parentBreadcrumb, ...childBreadcrumbs]);
     const validFilters = getValidFilterFields(mode, 'services');
+
     setFilters([
       ...filters.map((filter) => ({
         ...filter,
@@ -64,9 +79,37 @@ export function ServicesContent(props: ServicesProps) {
       })),
     ]);
     setRedirect(false);
-  }, []);
+  }, [mode]);
 
+  // Get trace groups at start and don't refresh on selection
   useEffect(() => {
+    const DSL = filtersToDsl(
+      mode,
+      filters,
+      query,
+      processTimeStamp(startTime, mode),
+      processTimeStamp(endTime, mode),
+      page,
+      appConfigs
+    );
+    if (mode === 'data_prepper' && dataPrepperIndicesExist) {
+      handleTraceGroupsRequest(http, DSL, mode, setTraceGroups)
+    }
+  }, [mode, jaegerIndicesExist, dataPrepperIndicesExist])
+
+  useEffect(() => {
+    let traceGroupFilter = ''
+    for (const filter of filters) {
+      if (filter.field === 'traceGroup') {
+        traceGroupFilter = filter.value
+        break;
+      }
+    }
+    if (traceGroupFilter){
+      setSelectedTraceGroup([{label: traceGroupFilter}])
+    } else {
+      setSelectedTraceGroup([])
+    }
     let newFilteredService = '';
     for (const filter of filters) {
       if (filter.field === 'serviceName') {
@@ -108,7 +151,6 @@ export function ServicesContent(props: ServicesProps) {
         setServiceMap,
         currService || filteredService
       ),
-      ...[mode === 'data_prepper' && dataPrepperIndicesExist ? [handleTraceGroupsRequest(http, DSL, mode, setTraceGroups)] : []]
     ]);
     setLoading(false);
   };
@@ -132,13 +174,13 @@ export function ServicesContent(props: ServicesProps) {
     <>
       {mode === 'data_prepper' && dataPrepperIndicesExist && traceGroups ? (<EuiComboBox
             aria-label="Select trace group"
-            placeholder="Select or add trace group"
+            placeholder="Select trace group"
             options={traceGroups}
             singleSelection={{ asPlainText: true }}
-            // selectedOptions={selectedTraces}
-            // onChange={onTraceChange}
+            selectedOptions={selectedTraceGroup}
+            onChange={onTraceGroupChange}
             // onCreateOption={onCreateTrace}
-            isClearable={false}
+            isClearable={true}
             data-test-subj="traceGroupsComboBox"
           />)
       : null}
diff --git a/public/components/trace_analytics/requests/services_request_handler.ts b/public/components/trace_analytics/requests/services_request_handler.ts
index 7fe027cbd..c25558937 100644
--- a/public/components/trace_analytics/requests/services_request_handler.ts
+++ b/public/components/trace_analytics/requests/services_request_handler.ts
@@ -66,7 +66,7 @@ export const handleTraceGroupsRequest = async (
   return handleDslRequest(http, DSL, getTraceGroupsQuery(), mode)
     .then ((response) => {
       return response.aggregations.traceGroup.buckets.map((bucket: any) => {
-        return bucket.key
+        return {label: bucket.key}
       })
     })
     .then((newItems) => {

From 372aa6d510b9c7452b5cb8e0bd89b282170fe5a8 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 13 Jun 2023 10:41:41 -0400
Subject: [PATCH 04/26] try some service map adjustments

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../components/common/plots/service_map.tsx   | 16 +++++-
 .../components/services/services_content.tsx  | 55 +++++++++++--------
 2 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/public/components/trace_analytics/components/common/plots/service_map.tsx b/public/components/trace_analytics/components/common/plots/service_map.tsx
index a63604968..385bda8ad 100644
--- a/public/components/trace_analytics/components/common/plots/service_map.tsx
+++ b/public/components/trace_analytics/components/common/plots/service_map.tsx
@@ -85,12 +85,24 @@ export function ServiceMap({
 
   const options = {
     layout: {
-      hierarchical: false,
+      // hierarchical: true,
+      hierarchical: {
+        enabled: true,
+        levelSeparation: 150,
+        nodeSpacing: 100,
+        treeSpacing: 200,
+        blockShifting: true,
+        edgeMinimization: true,
+        parentCentralization: true,
+        direction: 'UD', // UD, DU, LR, RL
+        sortMethod: 'hubsize', // hubsize, directed
+        shakeTowards: 'leaves', // roots, leaves
+      },
     },
     edges: {
       arrows: {
         to: {
-          enabled: false,
+          enabled: true,
         },
       },
       physics: false,
diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx
index cb80eea53..61d08d361 100644
--- a/public/components/trace_analytics/components/services/services_content.tsx
+++ b/public/components/trace_analytics/components/services/services_content.tsx
@@ -7,6 +7,9 @@
 import { EuiButton, EuiComboBox, EuiSpacer } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
+import { EuiComboBoxOption } from '@opensearch-project/oui';
+import { data } from 'jquery';
+import { trace } from 'console';
 import {
   handleServiceMapRequest,
   handleServicesRequest,
@@ -20,9 +23,6 @@ import { SearchBar } from '../common/search_bar';
 import { ServicesProps } from './services';
 import { ServicesTable } from './services_table';
 import { OptionType } from '../../../../../common/types/application_analytics';
-import { EuiComboBoxOption } from '@opensearch-project/oui';
-import { data } from 'jquery';
-import { trace } from 'console';
 
 export function ServicesContent(props: ServicesProps) {
   const {
@@ -60,9 +60,15 @@ export function ServicesContent(props: ServicesProps) {
   const onTraceGroupChange = (selectedOptions: OptionType[]) => {
     // We should only get back either 0 or 1 options.
     if (selectedOptions && selectedOptions.length) {
-      addFilter({field: 'traceGroup', operator: 'is', value: selectedOptions[0].label, inverted: false, disabled: false})
+      addFilter({
+        field: 'traceGroup',
+        operator: 'is',
+        value: selectedOptions[0].label,
+        inverted: false,
+        disabled: false,
+      });
     } else {
-      //remove traceGroup filter
+      // remove traceGroup filter
       setFilters(filters.filter((filter) => !(filter.field === 'traceGroup')));
     }
     setSelectedTraceGroup(selectedOptions);
@@ -93,22 +99,22 @@ export function ServicesContent(props: ServicesProps) {
       appConfigs
     );
     if (mode === 'data_prepper' && dataPrepperIndicesExist) {
-      handleTraceGroupsRequest(http, DSL, mode, setTraceGroups)
+      handleTraceGroupsRequest(http, DSL, mode, setTraceGroups);
     }
-  }, [mode, jaegerIndicesExist, dataPrepperIndicesExist])
+  }, [mode, jaegerIndicesExist, dataPrepperIndicesExist, startTime, endTime]);
 
   useEffect(() => {
-    let traceGroupFilter = ''
+    let traceGroupFilter = '';
     for (const filter of filters) {
       if (filter.field === 'traceGroup') {
-        traceGroupFilter = filter.value
+        traceGroupFilter = filter.value;
         break;
       }
     }
-    if (traceGroupFilter){
-      setSelectedTraceGroup([{label: traceGroupFilter}])
+    if (traceGroupFilter) {
+      setSelectedTraceGroup([{ label: traceGroupFilter }]);
     } else {
-      setSelectedTraceGroup([])
+      setSelectedTraceGroup([]);
     }
     let newFilteredService = '';
     for (const filter of filters) {
@@ -172,18 +178,19 @@ export function ServicesContent(props: ServicesProps) {
 
   return (
     <>
-      {mode === 'data_prepper' && dataPrepperIndicesExist && traceGroups ? (<EuiComboBox
-            aria-label="Select trace group"
-            placeholder="Select trace group"
-            options={traceGroups}
-            singleSelection={{ asPlainText: true }}
-            selectedOptions={selectedTraceGroup}
-            onChange={onTraceGroupChange}
-            // onCreateOption={onCreateTrace}
-            isClearable={true}
-            data-test-subj="traceGroupsComboBox"
-          />)
-      : null}
+      {mode === 'data_prepper' && dataPrepperIndicesExist && traceGroups ? (
+        <EuiComboBox
+          aria-label="Select trace group"
+          placeholder="Select trace group"
+          options={traceGroups}
+          singleSelection={{ asPlainText: true }}
+          selectedOptions={selectedTraceGroup}
+          onChange={onTraceGroupChange}
+          // onCreateOption={onCreateTrace}
+          isClearable={true}
+          data-test-subj="traceGroupsComboBox"
+        />
+      ) : null}
       <SearchBar
         query={query}
         filters={filters}

From 4f460958541de2a70fc6544ad3f658aa47a842b2 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 13 Jun 2023 17:06:00 -0400
Subject: [PATCH 05/26] change to up down to fully show labels

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../components/common/plots/service_map.tsx    |  9 +--------
 .../components/services/services.tsx           |  3 ---
 .../components/services/services_content.tsx   | 18 +-----------------
 3 files changed, 2 insertions(+), 28 deletions(-)

diff --git a/public/components/trace_analytics/components/common/plots/service_map.tsx b/public/components/trace_analytics/components/common/plots/service_map.tsx
index 385bda8ad..1073fd5a6 100644
--- a/public/components/trace_analytics/components/common/plots/service_map.tsx
+++ b/public/components/trace_analytics/components/common/plots/service_map.tsx
@@ -88,14 +88,8 @@ export function ServiceMap({
       // hierarchical: true,
       hierarchical: {
         enabled: true,
-        levelSeparation: 150,
-        nodeSpacing: 100,
-        treeSpacing: 200,
-        blockShifting: true,
-        edgeMinimization: true,
-        parentCentralization: true,
         direction: 'UD', // UD, DU, LR, RL
-        sortMethod: 'hubsize', // hubsize, directed
+        sortMethod: 'directed', // hubsize, directed
         shakeTowards: 'leaves', // roots, leaves
       },
     },
@@ -110,7 +104,6 @@ export function ServiceMap({
     nodes: {
       shape: 'dot',
       color: '#adadad',
-      borderWidth: 0,
       font: {
         size: 17,
         color: '#387ab9',
diff --git a/public/components/trace_analytics/components/services/services.tsx b/public/components/trace_analytics/components/services/services.tsx
index d1a6cbe2a..d1d97021a 100644
--- a/public/components/trace_analytics/components/services/services.tsx
+++ b/public/components/trace_analytics/components/services/services.tsx
@@ -20,9 +20,6 @@ export interface ServicesProps extends TraceAnalyticsComponentDeps {
 export function Services(props: ServicesProps) {
   return (
     <>
-      <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 61d08d361..9cea04283 100644
--- a/public/components/trace_analytics/components/services/services_content.tsx
+++ b/public/components/trace_analytics/components/services/services_content.tsx
@@ -4,12 +4,9 @@
  */
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import { EuiButton, EuiComboBox, EuiSpacer } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
-import { EuiComboBoxOption } from '@opensearch-project/oui';
-import { data } from 'jquery';
-import { trace } from 'console';
 import {
   handleServiceMapRequest,
   handleServicesRequest,
@@ -178,19 +175,6 @@ export function ServicesContent(props: ServicesProps) {
 
   return (
     <>
-      {mode === 'data_prepper' && dataPrepperIndicesExist && traceGroups ? (
-        <EuiComboBox
-          aria-label="Select trace group"
-          placeholder="Select trace group"
-          options={traceGroups}
-          singleSelection={{ asPlainText: true }}
-          selectedOptions={selectedTraceGroup}
-          onChange={onTraceGroupChange}
-          // onCreateOption={onCreateTrace}
-          isClearable={true}
-          data-test-subj="traceGroupsComboBox"
-        />
-      ) : null}
       <SearchBar
         query={query}
         filters={filters}

From d882225e66dbc5d8d0669b7b2175c3b2dfe13d2c Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 14 Jun 2023 10:26:53 -0400
Subject: [PATCH 06/26] put dashboard in accordian at bottom of services and
 only make calls if it is open

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../components/services/services.tsx          | 10 ++++++++-
 .../components/services/services_content.tsx  | 22 ++++++++++++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/public/components/trace_analytics/components/services/services.tsx b/public/components/trace_analytics/components/services/services.tsx
index d1d97021a..351b096d1 100644
--- a/public/components/trace_analytics/components/services/services.tsx
+++ b/public/components/trace_analytics/components/services/services.tsx
@@ -3,9 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiBreadcrumb, EuiTitle } from '@elastic/eui';
+import { EuiBreadcrumb } from '@elastic/eui';
 import _ from 'lodash';
 import React from 'react';
+import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import { TraceAnalyticsComponentDeps } from '../../home';
 import { DataSourcePicker } from '../dashboard/mode_picker';
 import { ServicesContent } from './services_content';
@@ -15,6 +16,13 @@ export interface ServicesProps extends TraceAnalyticsComponentDeps {
   nameColumnAction: any;
   traceColumnAction: any;
   page: 'services' | 'app';
+  toasts: Toast[];
+  setToast?: (
+    title: string,
+    color?: string,
+    text?: React.ReactChild | undefined,
+    side?: string | undefined
+  ) => void;
 }
 
 export function Services(props: ServicesProps) {
diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx
index 9cea04283..8cad94304 100644
--- a/public/components/trace_analytics/components/services/services_content.tsx
+++ b/public/components/trace_analytics/components/services/services_content.tsx
@@ -4,7 +4,7 @@
  */
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import { EuiSpacer } from '@elastic/eui';
+import { EuiAccordion, EuiPanel, EuiSpacer } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import {
@@ -20,6 +20,7 @@ import { SearchBar } from '../common/search_bar';
 import { ServicesProps } from './services';
 import { ServicesTable } from './services_table';
 import { OptionType } from '../../../../../common/types/application_analytics';
+import { DashboardContent } from '../dashboard/dashboard_content';
 
 export function ServicesContent(props: ServicesProps) {
   const {
@@ -46,6 +47,8 @@ export function ServicesContent(props: ServicesProps) {
   const [tableItems, setTableItems] = useState([]);
   const [traceGroups, setTraceGroups] = useState<OptionType[]>([]);
   const [selectedTraceGroup, setSelectedTraceGroup] = useState<OptionType[]>();
+
+  const [trigger, setTrigger] = useState<'open' | 'closed' | undefined>('closed');
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
   const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
     'latency' | 'error_rate' | 'throughput'
@@ -54,6 +57,11 @@ export function ServicesContent(props: ServicesProps) {
   const [loading, setLoading] = useState(false);
   const [filteredService, setFilteredService] = useState('');
 
+  const onToggle = (isOpen) => {
+    const newState = isOpen ? 'open' : 'closed';
+    setTrigger(newState);
+  };
+
   const onTraceGroupChange = (selectedOptions: OptionType[]) => {
     // We should only get back either 0 or 1 options.
     if (selectedOptions && selectedOptions.length) {
@@ -214,6 +222,18 @@ export function ServicesContent(props: ServicesProps) {
       ) : (
         <div />
       )}
+      <EuiSpacer size="m" />
+      <EuiPanel>
+        <EuiAccordion
+          id="accordion1"
+          buttonContent="Trace Groups"
+          forceState={trigger}
+          onToggle={onToggle}
+        >
+          <EuiSpacer size="m" />
+          {trigger === 'open' && <DashboardContent {...props} />}
+        </EuiAccordion>
+      </EuiPanel>
     </>
   );
 }

From 422f27e5c7fcb1618dac0e1b30f8c5bd8a5ec968 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Thu, 15 Jun 2023 10:33:15 -0400
Subject: [PATCH 07/26] some changes to support dashboard content in accordian

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../components/common/plots/service_map.tsx   |  6 +--
 .../dashboard/dashboard_content.tsx           | 45 +++--------------
 .../components/dashboard/dashboard_table.tsx  |  6 +--
 .../components/services/services_content.tsx  | 49 +------------------
 .../components/services/services_table.tsx    |  4 +-
 5 files changed, 17 insertions(+), 93 deletions(-)

diff --git a/public/components/trace_analytics/components/common/plots/service_map.tsx b/public/components/trace_analytics/components/common/plots/service_map.tsx
index 1073fd5a6..6f59c1af1 100644
--- a/public/components/trace_analytics/components/common/plots/service_map.tsx
+++ b/public/components/trace_analytics/components/common/plots/service_map.tsx
@@ -71,15 +71,15 @@ export function ServiceMap({
   const toggleButtons = [
     {
       id: 'latency',
-      label: 'Latency',
+      label: 'Duration',
     },
     {
       id: 'error_rate',
-      label: 'Error rate',
+      label: 'Errors',
     },
     {
       id: 'throughput',
-      label: 'Throughput',
+      label: 'Rate',
     },
   ];
 
diff --git a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
index 9cf1d8cd9..60e001f0b 100644
--- a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
+++ b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
@@ -61,10 +61,6 @@ export function DashboardContent(props: DashboardProps) {
   const [jaegerErrorTableItems, setJaegerErrorTableItems] = useState([]);
   const [throughputPltItems, setThroughputPltItems] = useState({ items: [], fixedInterval: '1h' });
   const [errorRatePltItems, setErrorRatePltItems] = useState({ items: [], fixedInterval: '1h' });
-  const [serviceMap, setServiceMap] = useState<ServiceObject>({});
-  const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
-    'latency' | 'error_rate' | 'throughput'
-  >('latency');
   const [percentileMap, setPercentileMap] = useState<{ [traceGroup: string]: number[] }>({});
   const [filteredService, setFilteredService] = useState('');
   const [redirect, setRedirect] = useState(true);
@@ -210,13 +206,13 @@ export function DashboardContent(props: DashboardProps) {
       serviceMapDSL.query.bool.must = serviceMapDSL.query.bool.must.filter(
         (must: any) => must?.term?.serviceName == null
       );
-      handleServiceMapRequest(
-        http,
-        serviceMapDSL,
-        mode,
-        setServiceMap,
-        currService || filteredService
-      );
+      // handleServiceMapRequest(
+      //   http,
+      //   serviceMapDSL,
+      //   mode,
+      //   setServiceMap,
+      //   currService || filteredService
+      // );
     }
 
     handleDashboardThroughputPltRequest(
@@ -298,21 +294,6 @@ export function DashboardContent(props: DashboardProps) {
 
   return (
     <>
-      <SearchBar
-        query={query}
-        filters={filters}
-        appConfigs={appConfigs}
-        setFilters={setFilters}
-        setQuery={setQuery}
-        startTime={startTime}
-        setStartTime={setStartTime}
-        endTime={endTime}
-        setEndTime={setEndTime}
-        refresh={refresh}
-        page={page}
-        mode={mode}
-      />
-      <EuiSpacer size="m" />
       {(mode === 'data_prepper' && dataPrepperIndicesExist) ||
       (mode === 'jaeger' && jaegerIndicesExist) ? (
         <div>
@@ -329,18 +310,8 @@ export function DashboardContent(props: DashboardProps) {
               />
               <EuiSpacer />
               <EuiFlexGroup alignItems="baseline">
-                <EuiFlexItem grow={4}>
-                  <ServiceMap
-                    addFilter={addFilter}
-                    serviceMap={serviceMap}
-                    idSelected={serviceMapIdSelected}
-                    setIdSelected={setServiceMapIdSelected}
-                    currService={filteredService}
-                    page={page}
-                  />
-                </EuiFlexItem>
                 <EuiFlexItem>
-                  <EuiFlexGroup direction="column">
+                  <EuiFlexGroup direction="row">
                     <EuiFlexItem>
                       <ErrorRatePlt
                         items={errorRatePltItems}
diff --git a/public/components/trace_analytics/components/dashboard/dashboard_table.tsx b/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
index ecc887203..4386221dc 100644
--- a/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
+++ b/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
@@ -135,7 +135,7 @@ export function DashboardTable(props: {
               }
             >
               <span>
-                Latency variance (ms){' '}
+                Duration variance (ms){' '}
                 <EuiIcon
                   size="s"
                   color="subdued"
@@ -216,7 +216,7 @@ export function DashboardTable(props: {
             <>
               {/* <div style={{ marginRight: 40 }}>Average</div> */}
               <div>
-                Average latency (ms){' '}
+                Average duration (ms){' '}
                 <EuiIcon
                   size="s"
                   color="subdued"
@@ -247,7 +247,7 @@ export function DashboardTable(props: {
             <>
               {/* <div style={{ marginRight: 44 }}>24-hour</div> */}
               <div>
-                24-hour latency trend{' '}
+                24-hour duration trend{' '}
                 <EuiIcon
                   size="s"
                   color="subdued"
diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx
index 8cad94304..5a5a619d8 100644
--- a/public/components/trace_analytics/components/services/services_content.tsx
+++ b/public/components/trace_analytics/components/services/services_content.tsx
@@ -45,8 +45,6 @@ export function ServicesContent(props: ServicesProps) {
     jaegerIndicesExist,
   } = props;
   const [tableItems, setTableItems] = useState([]);
-  const [traceGroups, setTraceGroups] = useState<OptionType[]>([]);
-  const [selectedTraceGroup, setSelectedTraceGroup] = useState<OptionType[]>();
 
   const [trigger, setTrigger] = useState<'open' | 'closed' | undefined>('closed');
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
@@ -62,23 +60,6 @@ export function ServicesContent(props: ServicesProps) {
     setTrigger(newState);
   };
 
-  const onTraceGroupChange = (selectedOptions: OptionType[]) => {
-    // We should only get back either 0 or 1 options.
-    if (selectedOptions && selectedOptions.length) {
-      addFilter({
-        field: 'traceGroup',
-        operator: 'is',
-        value: selectedOptions[0].label,
-        inverted: false,
-        disabled: false,
-      });
-    } else {
-      // remove traceGroup filter
-      setFilters(filters.filter((filter) => !(filter.field === 'traceGroup')));
-    }
-    setSelectedTraceGroup(selectedOptions);
-  };
-
   useEffect(() => {
     chrome.setBreadcrumbs([parentBreadcrumb, ...childBreadcrumbs]);
     const validFilters = getValidFilterFields(mode, 'services');
@@ -92,35 +73,7 @@ export function ServicesContent(props: ServicesProps) {
     setRedirect(false);
   }, [mode]);
 
-  // Get trace groups at start and don't refresh on selection
-  useEffect(() => {
-    const DSL = filtersToDsl(
-      mode,
-      filters,
-      query,
-      processTimeStamp(startTime, mode),
-      processTimeStamp(endTime, mode),
-      page,
-      appConfigs
-    );
-    if (mode === 'data_prepper' && dataPrepperIndicesExist) {
-      handleTraceGroupsRequest(http, DSL, mode, setTraceGroups);
-    }
-  }, [mode, jaegerIndicesExist, dataPrepperIndicesExist, startTime, endTime]);
-
   useEffect(() => {
-    let traceGroupFilter = '';
-    for (const filter of filters) {
-      if (filter.field === 'traceGroup') {
-        traceGroupFilter = filter.value;
-        break;
-      }
-    }
-    if (traceGroupFilter) {
-      setSelectedTraceGroup([{ label: traceGroupFilter }]);
-    } else {
-      setSelectedTraceGroup([]);
-    }
     let newFilteredService = '';
     for (const filter of filters) {
       if (filter.field === 'serviceName') {
@@ -226,7 +179,7 @@ export function ServicesContent(props: ServicesProps) {
       <EuiPanel>
         <EuiAccordion
           id="accordion1"
-          buttonContent="Trace Groups"
+          // buttonContent={mode === 'data_prepper' ? "Trace Groups" : "Service and Operations"}
           forceState={trigger}
           onToggle={onToggle}
         >
diff --git a/public/components/trace_analytics/components/services/services_table.tsx b/public/components/trace_analytics/components/services/services_table.tsx
index 4ffe85107..49f0ca7c9 100644
--- a/public/components/trace_analytics/components/services/services_table.tsx
+++ b/public/components/trace_analytics/components/services/services_table.tsx
@@ -76,7 +76,7 @@ export function ServicesTable(props: ServicesTableProps) {
         },
         {
           field: 'average_latency',
-          name: 'Average latency (ms)',
+          name: 'Average duration (ms)',
           align: 'right',
           sortable: true,
           render: (item: any) => (item === 0 || item ? _.round(item, 2) : '-'),
@@ -91,7 +91,7 @@ export function ServicesTable(props: ServicesTableProps) {
         },
         {
           field: 'throughput',
-          name: 'Throughput',
+          name: 'Rate',
           align: 'right',
           sortable: true,
           truncateText: true,

From 4d619885349b1deabbe1c7f129070728809e46c2 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Thu, 15 Jun 2023 11:16:58 -0400
Subject: [PATCH 08/26] demo code

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../components/dashboard/dashboard_content.tsx            | 4 +++-
 .../components/dashboard/top_error_rates_table.tsx        | 2 +-
 .../components/dashboard/top_groups_page.tsx              | 4 ++--
 .../components/dashboard/top_latency_table.tsx            | 4 ++--
 .../components/services/services_content.tsx              | 8 ++++++--
 .../trace_analytics/components/traces/traces.tsx          | 4 ++--
 .../trace_analytics/components/traces/traces_table.tsx    | 2 +-
 public/components/trace_analytics/home.tsx                | 2 ++
 .../trace_analytics/requests/dashboard_request_handler.ts | 3 ++-
 .../trace_analytics/requests/request_handler.ts           | 2 +-
 10 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
index 60e001f0b..fd9fe5ed9 100644
--- a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
+++ b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
@@ -33,6 +33,7 @@ import { SearchBar } from '../common/search_bar';
 import { DashboardProps } from './dashboard';
 import { DashboardTable } from './dashboard_table';
 import { TopGroupsPage } from './top_groups_page';
+import { useToast } from '../../../../../public/components/common/toast';
 
 export function DashboardContent(props: DashboardProps) {
   const {
@@ -68,7 +69,7 @@ export function DashboardContent(props: DashboardProps) {
   const [showTimeoutToast, setShowTimeoutToast] = useState(false);
 
   useEffect(() => {
-    if (showTimeoutToast === true && toasts.length === 0) {
+    if (showTimeoutToast === true && (!toasts || toasts.length === 0)) {
       setToast!(
         'Query took too long to execute.',
         'danger',
@@ -199,6 +200,7 @@ export function DashboardContent(props: DashboardProps) {
         tableItems,
         setTableItems,
         mode,
+        () => setShowTimeoutToast(true),
         setPercentileMap
       ).then(() => setLoading(false));
       // service map should not be filtered by service name (https://github.com/opensearch-project/observability/issues/442)
diff --git a/public/components/trace_analytics/components/dashboard/top_error_rates_table.tsx b/public/components/trace_analytics/components/dashboard/top_error_rates_table.tsx
index 6f5b32b5e..b677f4b4f 100644
--- a/public/components/trace_analytics/components/dashboard/top_error_rates_table.tsx
+++ b/public/components/trace_analytics/components/dashboard/top_error_rates_table.tsx
@@ -111,7 +111,7 @@ export function ErrorRatesTable(props: {
             <>
               {/* <div style={{ marginRight: 40 }}>Average</div> */}
               <div>
-                Average latency (ms){' '}
+                Average duration (ms){' '}
                 <EuiIcon
                   size="s"
                   color="subdued"
diff --git a/public/components/trace_analytics/components/dashboard/top_groups_page.tsx b/public/components/trace_analytics/components/dashboard/top_groups_page.tsx
index f08633284..1741a12b0 100644
--- a/public/components/trace_analytics/components/dashboard/top_groups_page.tsx
+++ b/public/components/trace_analytics/components/dashboard/top_groups_page.tsx
@@ -29,12 +29,12 @@ export function TopGroupsPage(props: {
   const toggleButtons = [
     {
       id: 'error_rate',
-      label: 'Error rate',
+      label: 'Errors',
       'data-test-subj': 'errors-toggle'
     },
     {
       id: 'throughput',
-      label: 'Throughput',
+      label: 'Rate',
       'data-test-subj': 'throughput-toggle'
     },
   ];
diff --git a/public/components/trace_analytics/components/dashboard/top_latency_table.tsx b/public/components/trace_analytics/components/dashboard/top_latency_table.tsx
index 0cc290acb..ff8293b65 100644
--- a/public/components/trace_analytics/components/dashboard/top_latency_table.tsx
+++ b/public/components/trace_analytics/components/dashboard/top_latency_table.tsx
@@ -145,7 +145,7 @@ export function LatencyTable(props: {
               }
             >
               <span>
-                Latency variance (ms){' '}
+                Duration variance (ms){' '}
                 <EuiIcon
                   size="s"
                   color="subdued"
@@ -226,7 +226,7 @@ export function LatencyTable(props: {
             <>
               {/* <div style={{ marginRight: 40 }}>Average</div> */}
               <div>
-                Average latency (ms){' '}
+                Average duration (ms){' '}
                 <EuiIcon
                   size="s"
                   color="subdued"
diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx
index 5a5a619d8..52dc5b6a0 100644
--- a/public/components/trace_analytics/components/services/services_content.tsx
+++ b/public/components/trace_analytics/components/services/services_content.tsx
@@ -134,6 +134,10 @@ export function ServicesContent(props: ServicesProps) {
     setFilters(newFilters);
   };
 
+  const dashboardContent = () => {
+    return  <DashboardContent {...props} />
+  }
+
   return (
     <>
       <SearchBar
@@ -179,12 +183,12 @@ export function ServicesContent(props: ServicesProps) {
       <EuiPanel>
         <EuiAccordion
           id="accordion1"
-          // buttonContent={mode === 'data_prepper' ? "Trace Groups" : "Service and Operations"}
+          buttonContent={mode === 'data_prepper' ? "Trace Groups" : "Service and Operations"}
           forceState={trigger}
           onToggle={onToggle}
         >
           <EuiSpacer size="m" />
-          {trigger === 'open' && <DashboardContent {...props} />}
+          {trigger === 'open' && dashboardContent()}
         </EuiAccordion>
       </EuiPanel>
     </>
diff --git a/public/components/trace_analytics/components/traces/traces.tsx b/public/components/trace_analytics/components/traces/traces.tsx
index 566955f16..3d692c416 100644
--- a/public/components/trace_analytics/components/traces/traces.tsx
+++ b/public/components/trace_analytics/components/traces/traces.tsx
@@ -18,9 +18,9 @@ export interface TracesProps extends TraceAnalyticsComponentDeps {
 export function Traces(props: TracesProps) {
   return (
     <>
-      <EuiTitle size="l">
+      {/* <EuiTitle size="l">
         <h2 style={{ fontWeight: 430 }}>Traces</h2>
-      </EuiTitle>
+      </EuiTitle> */}
       <DataSourcePicker modes={props.modes} selectedMode={props.mode} setMode={props.setMode!} />
       <TracesContent {...props} />
     </>
diff --git a/public/components/trace_analytics/components/traces/traces_table.tsx b/public/components/trace_analytics/components/traces/traces_table.tsx
index 03fa6c68a..cd6699961 100644
--- a/public/components/trace_analytics/components/traces/traces_table.tsx
+++ b/public/components/trace_analytics/components/traces/traces_table.tsx
@@ -110,7 +110,7 @@ export function TracesTable(props: TracesTableProps) {
         },
         {
           field: 'latency',
-          name: 'Latency (ms)',
+          name: 'Duration (ms)',
           align: 'right',
           sortable: true,
           truncateText: true,
diff --git a/public/components/trace_analytics/home.tsx b/public/components/trace_analytics/home.tsx
index da4e7bd9d..5f7f148ac 100644
--- a/public/components/trace_analytics/home.tsx
+++ b/public/components/trace_analytics/home.tsx
@@ -226,6 +226,8 @@ export const Home = (props: HomeProps) => {
                 childBreadcrumbs={serviceBreadcrumbs}
                 nameColumnAction={nameColumnAction}
                 traceColumnAction={traceColumnAction}
+                setToast={setToast}
+                toasts={toasts}
                 {...commonProps}
               />
             </TraceSideBar>
diff --git a/public/components/trace_analytics/requests/dashboard_request_handler.ts b/public/components/trace_analytics/requests/dashboard_request_handler.ts
index d25ad03fd..b1054676e 100644
--- a/public/components/trace_analytics/requests/dashboard_request_handler.ts
+++ b/public/components/trace_analytics/requests/dashboard_request_handler.ts
@@ -28,6 +28,7 @@ export const handleDashboardRequest = async (
   items,
   setItems,
   mode,
+  setShowTimeoutToast,
   setPercentileMap?
 ) => {
   // latency_variance should only be affected by timefilter
@@ -49,7 +50,7 @@ export const handleDashboardRequest = async (
     .catch((error) => console.error(error));
   if (setPercentileMap) setPercentileMap(latencyVariances);
 
-  const latencyTrends = await handleDslRequest(http, latencyTrendDSL, getLatencyTrendQuery(), mode)
+  const latencyTrends = await handleDslRequest(http, latencyTrendDSL, getLatencyTrendQuery(), mode, true, setShowTimeoutToast)
     .then((response) => {
       const map: any = {};
       response.aggregations.trace_group_name.buckets.map((bucket) => {
diff --git a/public/components/trace_analytics/requests/request_handler.ts b/public/components/trace_analytics/requests/request_handler.ts
index 2d3191a02..0667ade43 100644
--- a/public/components/trace_analytics/requests/request_handler.ts
+++ b/public/components/trace_analytics/requests/request_handler.ts
@@ -34,7 +34,7 @@ export async function handleDslRequest(
     body = { ...bodyQuery, index: mode === 'jaeger' ? JAEGER_INDEX_NAME : DATA_PREPPER_INDEX_NAME };
   }
   if (timeout) {
-    const id = setTimeout(() => setShowTimeoutToast!(), 30000);
+    const id = setTimeout(() => setShowTimeoutToast!(), 3);
 
     try {
       return await http.post(TRACE_ANALYTICS_DSL_ROUTE, {

From 1042b17b06935d1e1fb13c49dcbcf297a93e7c3e Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Fri, 16 Jun 2023 10:29:19 -0400
Subject: [PATCH 09/26] fix tests

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../__snapshots__/create.test.tsx.snap        |  288 ++---
 .../service_config.test.tsx.snap              |  108 +-
 .../__snapshots__/service_map.test.tsx.snap   |    6 +-
 .../__snapshots__/dashboard.test.tsx.snap     | 1114 +----------------
 .../dashboard_table.test.tsx.snap             |   48 +-
 .../top_error_rates_table.test.tsx.snap       |   16 +-
 .../top_latency_table.test.tsx.snap           |   34 +-
 .../dashboard/dashboard_content.tsx           |   18 +-
 .../__snapshots__/services.test.tsx.snap      |  466 +++++--
 .../services_table.test.tsx.snap              |   64 +-
 .../__snapshots__/traces.test.tsx.snap        |   42 -
 .../__snapshots__/traces_table.test.tsx.snap  |   16 +-
 12 files changed, 701 insertions(+), 1519 deletions(-)

diff --git a/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
index fd2d3f4e4..8b6b73688 100644
--- a/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
+++ b/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
@@ -578,8 +578,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Latency"
-                                    title="Latency"
+                                    data-text="Duration"
+                                    title="Duration"
                                   >
                                     <input
                                       checked=""
@@ -590,7 +590,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Latency
+                                    Duration
                                   </span>
                                 </span>
                               </label>
@@ -603,8 +603,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Error rate"
-                                    title="Error rate"
+                                    data-text="Errors"
+                                    title="Errors"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -614,7 +614,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Error rate
+                                    Errors
                                   </span>
                                 </span>
                               </label>
@@ -627,8 +627,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Throughput"
-                                    title="Throughput"
+                                    data-text="Rate"
+                                    title="Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -638,7 +638,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Throughput
+                                    Rate
                                   </span>
                                 </span>
                               </label>
@@ -1831,8 +1831,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Latency"
-                                  title="Latency"
+                                  data-text="Duration"
+                                  title="Duration"
                                 >
                                   <input
                                     checked=""
@@ -1843,7 +1843,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Latency
+                                  Duration
                                 </span>
                               </span>
                             </label>
@@ -1856,8 +1856,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Error rate"
-                                  title="Error rate"
+                                  data-text="Errors"
+                                  title="Errors"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -1867,7 +1867,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Error rate
+                                  Errors
                                 </span>
                               </span>
                             </label>
@@ -1880,8 +1880,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Throughput"
-                                  title="Throughput"
+                                  data-text="Rate"
+                                  title="Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -1891,7 +1891,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Throughput
+                                  Rate
                                 </span>
                               </span>
                             </label>
@@ -3023,8 +3023,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Latency"
-                                    title="Latency"
+                                    data-text="Duration"
+                                    title="Duration"
                                   >
                                     <input
                                       checked=""
@@ -3035,7 +3035,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Latency
+                                    Duration
                                   </span>
                                 </span>
                               </label>
@@ -3048,8 +3048,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Error rate"
-                                    title="Error rate"
+                                    data-text="Errors"
+                                    title="Errors"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -3059,7 +3059,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Error rate
+                                    Errors
                                   </span>
                                 </span>
                               </label>
@@ -3072,8 +3072,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Throughput"
-                                    title="Throughput"
+                                    data-text="Rate"
+                                    title="Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -3083,7 +3083,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Throughput
+                                    Rate
                                   </span>
                                 </span>
                               </label>
@@ -4190,8 +4190,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Latency"
-                                  title="Latency"
+                                  data-text="Duration"
+                                  title="Duration"
                                 >
                                   <input
                                     checked=""
@@ -4202,7 +4202,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Latency
+                                  Duration
                                 </span>
                               </span>
                             </label>
@@ -4215,8 +4215,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Error rate"
-                                  title="Error rate"
+                                  data-text="Errors"
+                                  title="Errors"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -4226,7 +4226,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Error rate
+                                  Errors
                                 </span>
                               </span>
                             </label>
@@ -4239,8 +4239,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Throughput"
-                                  title="Throughput"
+                                  data-text="Rate"
+                                  title="Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -4250,7 +4250,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Throughput
+                                  Rate
                                 </span>
                               </span>
                             </label>
@@ -5450,8 +5450,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Latency"
-                                    title="Latency"
+                                    data-text="Duration"
+                                    title="Duration"
                                   >
                                     <input
                                       checked=""
@@ -5462,7 +5462,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Latency
+                                    Duration
                                   </span>
                                 </span>
                               </label>
@@ -5475,8 +5475,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Error rate"
-                                    title="Error rate"
+                                    data-text="Errors"
+                                    title="Errors"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -5486,7 +5486,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Error rate
+                                    Errors
                                   </span>
                                 </span>
                               </label>
@@ -5499,8 +5499,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Throughput"
-                                    title="Throughput"
+                                    data-text="Rate"
+                                    title="Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -5510,7 +5510,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Throughput
+                                    Rate
                                   </span>
                                 </span>
                               </label>
@@ -6617,8 +6617,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Latency"
-                                  title="Latency"
+                                  data-text="Duration"
+                                  title="Duration"
                                 >
                                   <input
                                     checked=""
@@ -6629,7 +6629,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Latency
+                                  Duration
                                 </span>
                               </span>
                             </label>
@@ -6642,8 +6642,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Error rate"
-                                  title="Error rate"
+                                  data-text="Errors"
+                                  title="Errors"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -6653,7 +6653,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Error rate
+                                  Errors
                                 </span>
                               </span>
                             </label>
@@ -6666,8 +6666,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Throughput"
-                                  title="Throughput"
+                                  data-text="Rate"
+                                  title="Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -6677,7 +6677,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Throughput
+                                  Rate
                                 </span>
                               </span>
                             </label>
@@ -7792,8 +7792,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Latency"
-                                    title="Latency"
+                                    data-text="Duration"
+                                    title="Duration"
                                   >
                                     <input
                                       checked=""
@@ -7804,7 +7804,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Latency
+                                    Duration
                                   </span>
                                 </span>
                               </label>
@@ -7817,8 +7817,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Error rate"
-                                    title="Error rate"
+                                    data-text="Errors"
+                                    title="Errors"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -7828,7 +7828,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Error rate
+                                    Errors
                                   </span>
                                 </span>
                               </label>
@@ -7841,8 +7841,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Throughput"
-                                    title="Throughput"
+                                    data-text="Rate"
+                                    title="Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -7852,7 +7852,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Throughput
+                                    Rate
                                   </span>
                                 </span>
                               </label>
@@ -8896,8 +8896,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Latency"
-                                  title="Latency"
+                                  data-text="Duration"
+                                  title="Duration"
                                 >
                                   <input
                                     checked=""
@@ -8908,7 +8908,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Latency
+                                  Duration
                                 </span>
                               </span>
                             </label>
@@ -8921,8 +8921,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Error rate"
-                                  title="Error rate"
+                                  data-text="Errors"
+                                  title="Errors"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -8932,7 +8932,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Error rate
+                                  Errors
                                 </span>
                               </span>
                             </label>
@@ -8945,8 +8945,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Throughput"
-                                  title="Throughput"
+                                  data-text="Rate"
+                                  title="Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -8956,7 +8956,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Throughput
+                                  Rate
                                 </span>
                               </span>
                             </label>
@@ -10074,8 +10074,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Latency"
-                                    title="Latency"
+                                    data-text="Duration"
+                                    title="Duration"
                                   >
                                     <input
                                       checked=""
@@ -10086,7 +10086,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Latency
+                                    Duration
                                   </span>
                                 </span>
                               </label>
@@ -10099,8 +10099,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Error rate"
-                                    title="Error rate"
+                                    data-text="Errors"
+                                    title="Errors"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -10110,7 +10110,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Error rate
+                                    Errors
                                   </span>
                                 </span>
                               </label>
@@ -10123,8 +10123,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Throughput"
-                                    title="Throughput"
+                                    data-text="Rate"
+                                    title="Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -10134,7 +10134,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Throughput
+                                    Rate
                                   </span>
                                 </span>
                               </label>
@@ -11207,8 +11207,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Latency"
-                                  title="Latency"
+                                  data-text="Duration"
+                                  title="Duration"
                                 >
                                   <input
                                     checked=""
@@ -11219,7 +11219,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Latency
+                                  Duration
                                 </span>
                               </span>
                             </label>
@@ -11232,8 +11232,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Error rate"
-                                  title="Error rate"
+                                  data-text="Errors"
+                                  title="Errors"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -11243,7 +11243,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Error rate
+                                  Errors
                                 </span>
                               </span>
                             </label>
@@ -11256,8 +11256,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Throughput"
-                                  title="Throughput"
+                                  data-text="Rate"
+                                  title="Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -11267,7 +11267,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Throughput
+                                  Rate
                                 </span>
                               </span>
                             </label>
@@ -12431,8 +12431,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Latency"
-                                    title="Latency"
+                                    data-text="Duration"
+                                    title="Duration"
                                   >
                                     <input
                                       checked=""
@@ -12443,7 +12443,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Latency
+                                    Duration
                                   </span>
                                 </span>
                               </label>
@@ -12456,8 +12456,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Error rate"
-                                    title="Error rate"
+                                    data-text="Errors"
+                                    title="Errors"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -12467,7 +12467,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Error rate
+                                    Errors
                                   </span>
                                 </span>
                               </label>
@@ -12480,8 +12480,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Throughput"
-                                    title="Throughput"
+                                    data-text="Rate"
+                                    title="Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -12491,7 +12491,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Throughput
+                                    Rate
                                   </span>
                                 </span>
                               </label>
@@ -13598,8 +13598,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Latency"
-                                  title="Latency"
+                                  data-text="Duration"
+                                  title="Duration"
                                 >
                                   <input
                                     checked=""
@@ -13610,7 +13610,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Latency
+                                  Duration
                                 </span>
                               </span>
                             </label>
@@ -13623,8 +13623,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Error rate"
-                                  title="Error rate"
+                                  data-text="Errors"
+                                  title="Errors"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -13634,7 +13634,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Error rate
+                                  Errors
                                 </span>
                               </span>
                             </label>
@@ -13647,8 +13647,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Throughput"
-                                  title="Throughput"
+                                  data-text="Rate"
+                                  title="Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -13658,7 +13658,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Throughput
+                                  Rate
                                 </span>
                               </span>
                             </label>
@@ -14790,8 +14790,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Latency"
-                                    title="Latency"
+                                    data-text="Duration"
+                                    title="Duration"
                                   >
                                     <input
                                       checked=""
@@ -14802,7 +14802,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Latency
+                                    Duration
                                   </span>
                                 </span>
                               </label>
@@ -14815,8 +14815,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Error rate"
-                                    title="Error rate"
+                                    data-text="Errors"
+                                    title="Errors"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -14826,7 +14826,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Error rate
+                                    Errors
                                   </span>
                                 </span>
                               </label>
@@ -14839,8 +14839,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Throughput"
-                                    title="Throughput"
+                                    data-text="Rate"
+                                    title="Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -14850,7 +14850,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Throughput
+                                    Rate
                                   </span>
                                 </span>
                               </label>
@@ -15957,8 +15957,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Latency"
-                                  title="Latency"
+                                  data-text="Duration"
+                                  title="Duration"
                                 >
                                   <input
                                     checked=""
@@ -15969,7 +15969,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Latency
+                                  Duration
                                 </span>
                               </span>
                             </label>
@@ -15982,8 +15982,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Error rate"
-                                  title="Error rate"
+                                  data-text="Errors"
+                                  title="Errors"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -15993,7 +15993,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Error rate
+                                  Errors
                                 </span>
                               </span>
                             </label>
@@ -16006,8 +16006,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Throughput"
-                                  title="Throughput"
+                                  data-text="Rate"
+                                  title="Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -16017,7 +16017,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Throughput
+                                  Rate
                                 </span>
                               </span>
                             </label>
@@ -17187,8 +17187,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Latency"
-                                    title="Latency"
+                                    data-text="Duration"
+                                    title="Duration"
                                   >
                                     <input
                                       checked=""
@@ -17199,7 +17199,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Latency
+                                    Duration
                                   </span>
                                 </span>
                               </label>
@@ -17212,8 +17212,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Error rate"
-                                    title="Error rate"
+                                    data-text="Errors"
+                                    title="Errors"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -17223,7 +17223,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Error rate
+                                    Errors
                                   </span>
                                 </span>
                               </label>
@@ -17236,8 +17236,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Throughput"
-                                    title="Throughput"
+                                    data-text="Rate"
+                                    title="Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -17247,7 +17247,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Throughput
+                                    Rate
                                   </span>
                                 </span>
                               </label>
@@ -18436,8 +18436,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Latency"
-                                  title="Latency"
+                                  data-text="Duration"
+                                  title="Duration"
                                 >
                                   <input
                                     checked=""
@@ -18448,7 +18448,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Latency
+                                  Duration
                                 </span>
                               </span>
                             </label>
@@ -18461,8 +18461,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Error rate"
-                                  title="Error rate"
+                                  data-text="Errors"
+                                  title="Errors"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -18472,7 +18472,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Error rate
+                                  Errors
                                 </span>
                               </span>
                             </label>
@@ -18485,8 +18485,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Throughput"
-                                  title="Throughput"
+                                  data-text="Rate"
+                                  title="Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -18496,7 +18496,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Throughput
+                                  Rate
                                 </span>
                               </span>
                             </label>
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 f6bc62f39..a4d859206 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
@@ -626,15 +626,15 @@ exports[`Service Config component renders empty service config 1`] = `
                           Array [
                             Object {
                               "id": "latency",
-                              "label": "Latency",
+                              "label": "Duration",
                             },
                             Object {
                               "id": "error_rate",
-                              "label": "Error rate",
+                              "label": "Errors",
                             },
                             Object {
                               "id": "throughput",
-                              "label": "Throughput",
+                              "label": "Rate",
                             },
                           ]
                         }
@@ -659,7 +659,7 @@ exports[`Service Config component renders empty service config 1`] = `
                               isIconOnly={false}
                               isSelected={true}
                               key="0"
-                              label="Latency"
+                              label="Duration"
                               name="random_html_id"
                               onChange={[Function]}
                               size="s"
@@ -677,9 +677,9 @@ exports[`Service Config component renders empty service config 1`] = `
                                 textProps={
                                   Object {
                                     "className": "euiButtonGroupButton__textShift",
-                                    "data-text": "Latency",
+                                    "data-text": "Duration",
                                     "ref": [Function],
-                                    "title": "Latency",
+                                    "title": "Duration",
                                   }
                                 }
                               >
@@ -700,9 +700,9 @@ exports[`Service Config component renders empty service config 1`] = `
                                     textProps={
                                       Object {
                                         "className": "euiButton__text euiButtonGroupButton__textShift",
-                                        "data-text": "Latency",
+                                        "data-text": "Duration",
                                         "ref": [Function],
-                                        "title": "Latency",
+                                        "title": "Duration",
                                       }
                                     }
                                   >
@@ -711,8 +711,8 @@ exports[`Service Config component renders empty service config 1`] = `
                                     >
                                       <span
                                         className="euiButton__text euiButtonGroupButton__textShift"
-                                        data-text="Latency"
-                                        title="Latency"
+                                        data-text="Duration"
+                                        title="Duration"
                                       >
                                         <input
                                           checked={true}
@@ -724,7 +724,7 @@ exports[`Service Config component renders empty service config 1`] = `
                                           onChange={[Function]}
                                           type="radio"
                                         />
-                                        Latency
+                                        Duration
                                       </span>
                                     </span>
                                   </EuiButtonContent>
@@ -739,7 +739,7 @@ exports[`Service Config component renders empty service config 1`] = `
                               isIconOnly={false}
                               isSelected={false}
                               key="1"
-                              label="Error rate"
+                              label="Errors"
                               name="random_html_id"
                               onChange={[Function]}
                               size="s"
@@ -757,9 +757,9 @@ exports[`Service Config component renders empty service config 1`] = `
                                 textProps={
                                   Object {
                                     "className": "euiButtonGroupButton__textShift",
-                                    "data-text": "Error rate",
+                                    "data-text": "Errors",
                                     "ref": [Function],
-                                    "title": "Error rate",
+                                    "title": "Errors",
                                   }
                                 }
                               >
@@ -780,9 +780,9 @@ exports[`Service Config component renders empty service config 1`] = `
                                     textProps={
                                       Object {
                                         "className": "euiButton__text euiButtonGroupButton__textShift",
-                                        "data-text": "Error rate",
+                                        "data-text": "Errors",
                                         "ref": [Function],
-                                        "title": "Error rate",
+                                        "title": "Errors",
                                       }
                                     }
                                   >
@@ -791,8 +791,8 @@ exports[`Service Config component renders empty service config 1`] = `
                                     >
                                       <span
                                         className="euiButton__text euiButtonGroupButton__textShift"
-                                        data-text="Error rate"
-                                        title="Error rate"
+                                        data-text="Errors"
+                                        title="Errors"
                                       >
                                         <input
                                           checked={false}
@@ -804,7 +804,7 @@ exports[`Service Config component renders empty service config 1`] = `
                                           onChange={[Function]}
                                           type="radio"
                                         />
-                                        Error rate
+                                        Errors
                                       </span>
                                     </span>
                                   </EuiButtonContent>
@@ -819,7 +819,7 @@ exports[`Service Config component renders empty service config 1`] = `
                               isIconOnly={false}
                               isSelected={false}
                               key="2"
-                              label="Throughput"
+                              label="Rate"
                               name="random_html_id"
                               onChange={[Function]}
                               size="s"
@@ -837,9 +837,9 @@ exports[`Service Config component renders empty service config 1`] = `
                                 textProps={
                                   Object {
                                     "className": "euiButtonGroupButton__textShift",
-                                    "data-text": "Throughput",
+                                    "data-text": "Rate",
                                     "ref": [Function],
-                                    "title": "Throughput",
+                                    "title": "Rate",
                                   }
                                 }
                               >
@@ -860,9 +860,9 @@ exports[`Service Config component renders empty service config 1`] = `
                                     textProps={
                                       Object {
                                         "className": "euiButton__text euiButtonGroupButton__textShift",
-                                        "data-text": "Throughput",
+                                        "data-text": "Rate",
                                         "ref": [Function],
-                                        "title": "Throughput",
+                                        "title": "Rate",
                                       }
                                     }
                                   >
@@ -871,8 +871,8 @@ exports[`Service Config component renders empty service config 1`] = `
                                     >
                                       <span
                                         className="euiButton__text euiButtonGroupButton__textShift"
-                                        data-text="Throughput"
-                                        title="Throughput"
+                                        data-text="Rate"
+                                        title="Rate"
                                       >
                                         <input
                                           checked={false}
@@ -884,7 +884,7 @@ exports[`Service Config component renders empty service config 1`] = `
                                           onChange={[Function]}
                                           type="radio"
                                         />
-                                        Throughput
+                                        Rate
                                       </span>
                                     </span>
                                   </EuiButtonContent>
@@ -1764,15 +1764,15 @@ exports[`Service Config component renders with one service selected 1`] = `
                           Array [
                             Object {
                               "id": "latency",
-                              "label": "Latency",
+                              "label": "Duration",
                             },
                             Object {
                               "id": "error_rate",
-                              "label": "Error rate",
+                              "label": "Errors",
                             },
                             Object {
                               "id": "throughput",
-                              "label": "Throughput",
+                              "label": "Rate",
                             },
                           ]
                         }
@@ -1797,7 +1797,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                               isIconOnly={false}
                               isSelected={true}
                               key="0"
-                              label="Latency"
+                              label="Duration"
                               name="random_html_id"
                               onChange={[Function]}
                               size="s"
@@ -1815,9 +1815,9 @@ exports[`Service Config component renders with one service selected 1`] = `
                                 textProps={
                                   Object {
                                     "className": "euiButtonGroupButton__textShift",
-                                    "data-text": "Latency",
+                                    "data-text": "Duration",
                                     "ref": [Function],
-                                    "title": "Latency",
+                                    "title": "Duration",
                                   }
                                 }
                               >
@@ -1838,9 +1838,9 @@ exports[`Service Config component renders with one service selected 1`] = `
                                     textProps={
                                       Object {
                                         "className": "euiButton__text euiButtonGroupButton__textShift",
-                                        "data-text": "Latency",
+                                        "data-text": "Duration",
                                         "ref": [Function],
-                                        "title": "Latency",
+                                        "title": "Duration",
                                       }
                                     }
                                   >
@@ -1849,8 +1849,8 @@ exports[`Service Config component renders with one service selected 1`] = `
                                     >
                                       <span
                                         className="euiButton__text euiButtonGroupButton__textShift"
-                                        data-text="Latency"
-                                        title="Latency"
+                                        data-text="Duration"
+                                        title="Duration"
                                       >
                                         <input
                                           checked={true}
@@ -1862,7 +1862,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                                           onChange={[Function]}
                                           type="radio"
                                         />
-                                        Latency
+                                        Duration
                                       </span>
                                     </span>
                                   </EuiButtonContent>
@@ -1877,7 +1877,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                               isIconOnly={false}
                               isSelected={false}
                               key="1"
-                              label="Error rate"
+                              label="Errors"
                               name="random_html_id"
                               onChange={[Function]}
                               size="s"
@@ -1895,9 +1895,9 @@ exports[`Service Config component renders with one service selected 1`] = `
                                 textProps={
                                   Object {
                                     "className": "euiButtonGroupButton__textShift",
-                                    "data-text": "Error rate",
+                                    "data-text": "Errors",
                                     "ref": [Function],
-                                    "title": "Error rate",
+                                    "title": "Errors",
                                   }
                                 }
                               >
@@ -1918,9 +1918,9 @@ exports[`Service Config component renders with one service selected 1`] = `
                                     textProps={
                                       Object {
                                         "className": "euiButton__text euiButtonGroupButton__textShift",
-                                        "data-text": "Error rate",
+                                        "data-text": "Errors",
                                         "ref": [Function],
-                                        "title": "Error rate",
+                                        "title": "Errors",
                                       }
                                     }
                                   >
@@ -1929,8 +1929,8 @@ exports[`Service Config component renders with one service selected 1`] = `
                                     >
                                       <span
                                         className="euiButton__text euiButtonGroupButton__textShift"
-                                        data-text="Error rate"
-                                        title="Error rate"
+                                        data-text="Errors"
+                                        title="Errors"
                                       >
                                         <input
                                           checked={false}
@@ -1942,7 +1942,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                                           onChange={[Function]}
                                           type="radio"
                                         />
-                                        Error rate
+                                        Errors
                                       </span>
                                     </span>
                                   </EuiButtonContent>
@@ -1957,7 +1957,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                               isIconOnly={false}
                               isSelected={false}
                               key="2"
-                              label="Throughput"
+                              label="Rate"
                               name="random_html_id"
                               onChange={[Function]}
                               size="s"
@@ -1975,9 +1975,9 @@ exports[`Service Config component renders with one service selected 1`] = `
                                 textProps={
                                   Object {
                                     "className": "euiButtonGroupButton__textShift",
-                                    "data-text": "Throughput",
+                                    "data-text": "Rate",
                                     "ref": [Function],
-                                    "title": "Throughput",
+                                    "title": "Rate",
                                   }
                                 }
                               >
@@ -1998,9 +1998,9 @@ exports[`Service Config component renders with one service selected 1`] = `
                                     textProps={
                                       Object {
                                         "className": "euiButton__text euiButtonGroupButton__textShift",
-                                        "data-text": "Throughput",
+                                        "data-text": "Rate",
                                         "ref": [Function],
-                                        "title": "Throughput",
+                                        "title": "Rate",
                                       }
                                     }
                                   >
@@ -2009,8 +2009,8 @@ exports[`Service Config component renders with one service selected 1`] = `
                                     >
                                       <span
                                         className="euiButton__text euiButtonGroupButton__textShift"
-                                        data-text="Throughput"
-                                        title="Throughput"
+                                        data-text="Rate"
+                                        title="Rate"
                                       >
                                         <input
                                           checked={false}
@@ -2022,7 +2022,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                                           onChange={[Function]}
                                           type="radio"
                                         />
-                                        Throughput
+                                        Rate
                                       </span>
                                     </span>
                                   </EuiButtonContent>
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap
index ec80b8296..638208496 100644
--- a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap
@@ -18,15 +18,15 @@ exports[`Service map component renders service map 1`] = `
         Array [
           Object {
             "id": "latency",
-            "label": "Latency",
+            "label": "Duration",
           },
           Object {
             "id": "error_rate",
-            "label": "Error rate",
+            "label": "Errors",
           },
           Object {
             "id": "throughput",
-            "label": "Throughput",
+            "label": "Rate",
           },
         ]
       }
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 8d437c451..203370851 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
@@ -1482,550 +1482,15 @@ exports[`Dashboard component renders dashboard 1`] = `
         <div
           className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--directionRow euiFlexGroup--responsive"
         >
-          <EuiFlexItem
-            grow={4}
-          >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrow4"
-            >
-              <ServiceMap
-                addFilter={[Function]}
-                currService=""
-                idSelected="latency"
-                page="dashboard"
-                serviceMap={Object {}}
-                setIdSelected={[Function]}
-              >
-                <EuiPanel>
-                  <div
-                    className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-                  >
-                    <PanelTitle
-                      title="Service map"
-                    >
-                      <EuiText
-                        size="m"
-                      >
-                        <div
-                          className="euiText euiText--medium"
-                        >
-                          <span
-                            className="panel-title"
-                          >
-                            Service map
-                          </span>
-                        </div>
-                      </EuiText>
-                    </PanelTitle>
-                    <EuiSpacer
-                      size="m"
-                    >
-                      <div
-                        className="euiSpacer euiSpacer--m"
-                      />
-                    </EuiSpacer>
-                    <EuiButtonGroup
-                      buttonSize="s"
-                      color="text"
-                      idSelected="latency"
-                      onChange={[Function]}
-                      options={
-                        Array [
-                          Object {
-                            "id": "latency",
-                            "label": "Latency",
-                          },
-                          Object {
-                            "id": "error_rate",
-                            "label": "Error rate",
-                          },
-                          Object {
-                            "id": "throughput",
-                            "label": "Throughput",
-                          },
-                        ]
-                      }
-                    >
-                      <fieldset
-                        className="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
-                        disabled={false}
-                      >
-                        <EuiScreenReaderOnly>
-                          <legend
-                            className="euiScreenReaderOnly"
-                          />
-                        </EuiScreenReaderOnly>
-                        <div
-                          className="euiButtonGroup__buttons"
-                        >
-                          <EuiButtonGroupButton
-                            color="text"
-                            element="label"
-                            id="latency"
-                            isDisabled={false}
-                            isIconOnly={false}
-                            isSelected={true}
-                            key="0"
-                            label="Latency"
-                            name="random_html_id"
-                            onChange={[Function]}
-                            size="s"
-                          >
-                            <EuiButtonDisplay
-                              baseClassName="euiButtonGroupButton"
-                              className="euiButtonGroupButton-isSelected"
-                              color="text"
-                              element="label"
-                              fill={true}
-                              htmlFor="random_html_id"
-                              isDisabled={false}
-                              onClick={[Function]}
-                              size="s"
-                              textProps={
-                                Object {
-                                  "className": "euiButtonGroupButton__textShift",
-                                  "data-text": "Latency",
-                                  "ref": [Function],
-                                  "title": "Latency",
-                                }
-                              }
-                            >
-                              <label
-                                className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
-                                disabled={false}
-                                htmlFor="random_html_id"
-                                onClick={[Function]}
-                                style={
-                                  Object {
-                                    "minWidth": undefined,
-                                  }
-                                }
-                              >
-                                <EuiButtonContent
-                                  className="euiButton__content"
-                                  iconSide="left"
-                                  textProps={
-                                    Object {
-                                      "className": "euiButton__text euiButtonGroupButton__textShift",
-                                      "data-text": "Latency",
-                                      "ref": [Function],
-                                      "title": "Latency",
-                                    }
-                                  }
-                                >
-                                  <span
-                                    className="euiButtonContent euiButton__content"
-                                  >
-                                    <span
-                                      className="euiButton__text euiButtonGroupButton__textShift"
-                                      data-text="Latency"
-                                      title="Latency"
-                                    >
-                                      <input
-                                        checked={true}
-                                        className="euiScreenReaderOnly"
-                                        data-test-subj="latency"
-                                        disabled={false}
-                                        id="random_html_id"
-                                        name="random_html_id"
-                                        onChange={[Function]}
-                                        type="radio"
-                                      />
-                                      Latency
-                                    </span>
-                                  </span>
-                                </EuiButtonContent>
-                              </label>
-                            </EuiButtonDisplay>
-                          </EuiButtonGroupButton>
-                          <EuiButtonGroupButton
-                            color="text"
-                            element="label"
-                            id="error_rate"
-                            isDisabled={false}
-                            isIconOnly={false}
-                            isSelected={false}
-                            key="1"
-                            label="Error rate"
-                            name="random_html_id"
-                            onChange={[Function]}
-                            size="s"
-                          >
-                            <EuiButtonDisplay
-                              baseClassName="euiButtonGroupButton"
-                              className=""
-                              color="text"
-                              element="label"
-                              fill={false}
-                              htmlFor="random_html_id"
-                              isDisabled={false}
-                              onClick={[Function]}
-                              size="s"
-                              textProps={
-                                Object {
-                                  "className": "euiButtonGroupButton__textShift",
-                                  "data-text": "Error rate",
-                                  "ref": [Function],
-                                  "title": "Error rate",
-                                }
-                              }
-                            >
-                              <label
-                                className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-                                disabled={false}
-                                htmlFor="random_html_id"
-                                onClick={[Function]}
-                                style={
-                                  Object {
-                                    "minWidth": undefined,
-                                  }
-                                }
-                              >
-                                <EuiButtonContent
-                                  className="euiButton__content"
-                                  iconSide="left"
-                                  textProps={
-                                    Object {
-                                      "className": "euiButton__text euiButtonGroupButton__textShift",
-                                      "data-text": "Error rate",
-                                      "ref": [Function],
-                                      "title": "Error rate",
-                                    }
-                                  }
-                                >
-                                  <span
-                                    className="euiButtonContent euiButton__content"
-                                  >
-                                    <span
-                                      className="euiButton__text euiButtonGroupButton__textShift"
-                                      data-text="Error rate"
-                                      title="Error rate"
-                                    >
-                                      <input
-                                        checked={false}
-                                        className="euiScreenReaderOnly"
-                                        data-test-subj="error_rate"
-                                        disabled={false}
-                                        id="random_html_id"
-                                        name="random_html_id"
-                                        onChange={[Function]}
-                                        type="radio"
-                                      />
-                                      Error rate
-                                    </span>
-                                  </span>
-                                </EuiButtonContent>
-                              </label>
-                            </EuiButtonDisplay>
-                          </EuiButtonGroupButton>
-                          <EuiButtonGroupButton
-                            color="text"
-                            element="label"
-                            id="throughput"
-                            isDisabled={false}
-                            isIconOnly={false}
-                            isSelected={false}
-                            key="2"
-                            label="Throughput"
-                            name="random_html_id"
-                            onChange={[Function]}
-                            size="s"
-                          >
-                            <EuiButtonDisplay
-                              baseClassName="euiButtonGroupButton"
-                              className=""
-                              color="text"
-                              element="label"
-                              fill={false}
-                              htmlFor="random_html_id"
-                              isDisabled={false}
-                              onClick={[Function]}
-                              size="s"
-                              textProps={
-                                Object {
-                                  "className": "euiButtonGroupButton__textShift",
-                                  "data-text": "Throughput",
-                                  "ref": [Function],
-                                  "title": "Throughput",
-                                }
-                              }
-                            >
-                              <label
-                                className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-                                disabled={false}
-                                htmlFor="random_html_id"
-                                onClick={[Function]}
-                                style={
-                                  Object {
-                                    "minWidth": undefined,
-                                  }
-                                }
-                              >
-                                <EuiButtonContent
-                                  className="euiButton__content"
-                                  iconSide="left"
-                                  textProps={
-                                    Object {
-                                      "className": "euiButton__text euiButtonGroupButton__textShift",
-                                      "data-text": "Throughput",
-                                      "ref": [Function],
-                                      "title": "Throughput",
-                                    }
-                                  }
-                                >
-                                  <span
-                                    className="euiButtonContent euiButton__content"
-                                  >
-                                    <span
-                                      className="euiButton__text euiButtonGroupButton__textShift"
-                                      data-text="Throughput"
-                                      title="Throughput"
-                                    >
-                                      <input
-                                        checked={false}
-                                        className="euiScreenReaderOnly"
-                                        data-test-subj="throughput"
-                                        disabled={false}
-                                        id="random_html_id"
-                                        name="random_html_id"
-                                        onChange={[Function]}
-                                        type="radio"
-                                      />
-                                      Throughput
-                                    </span>
-                                  </span>
-                                </EuiButtonContent>
-                              </label>
-                            </EuiButtonDisplay>
-                          </EuiButtonGroupButton>
-                        </div>
-                      </fieldset>
-                    </EuiButtonGroup>
-                    <EuiHorizontalRule
-                      margin="m"
-                    >
-                      <hr
-                        className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
-                      />
-                    </EuiHorizontalRule>
-                    <EuiFlexGroup
-                      alignItems="center"
-                      gutterSize="s"
-                    >
-                      <div
-                        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-                      >
-                        <EuiFlexItem
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
-                          >
-                            <EuiText>
-                              <div
-                                className="euiText euiText--medium"
-                              >
-                                Focus on
-                              </div>
-                            </EuiText>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiFlexItem>
-                          <div
-                            className="euiFlexItem"
-                          >
-                            <EuiFieldSearch
-                              compressed={false}
-                              fullWidth={false}
-                              incremental={false}
-                              isClearable={true}
-                              isInvalid={false}
-                              isLoading={false}
-                              onChange={[Function]}
-                              onSearch={[Function]}
-                              placeholder="Service name"
-                              value=""
-                            >
-                              <EuiFormControlLayout
-                                compressed={false}
-                                fullWidth={false}
-                                icon="search"
-                                isLoading={false}
-                              >
-                                <div
-                                  className="euiFormControlLayout"
-                                >
-                                  <div
-                                    className="euiFormControlLayout__childrenWrapper"
-                                  >
-                                    <EuiValidatableControl
-                                      isInvalid={false}
-                                    >
-                                      <input
-                                        className="euiFieldSearch"
-                                        onChange={[Function]}
-                                        onKeyUp={[Function]}
-                                        placeholder="Service name"
-                                        type="search"
-                                        value=""
-                                      />
-                                    </EuiValidatableControl>
-                                    <EuiFormControlLayoutIcons
-                                      compressed={false}
-                                      icon="search"
-                                      isLoading={false}
-                                    >
-                                      <div
-                                        className="euiFormControlLayoutIcons"
-                                      >
-                                        <EuiFormControlLayoutCustomIcon
-                                          size="m"
-                                          type="search"
-                                        >
-                                          <span
-                                            className="euiFormControlLayoutCustomIcon"
-                                          >
-                                            <EuiIcon
-                                              aria-hidden="true"
-                                              className="euiFormControlLayoutCustomIcon__icon"
-                                              size="m"
-                                              type="search"
-                                            >
-                                              <EuiIconSearch
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                focusable="false"
-                                                role="img"
-                                                style={null}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                  focusable="false"
-                                                  height={16}
-                                                  role="img"
-                                                  style={null}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
-                                                  />
-                                                </svg>
-                                              </EuiIconSearch>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiFormControlLayoutCustomIcon>
-                                      </div>
-                                    </EuiFormControlLayoutIcons>
-                                  </div>
-                                </div>
-                              </EuiFormControlLayout>
-                            </EuiFieldSearch>
-                          </div>
-                        </EuiFlexItem>
-                      </div>
-                    </EuiFlexGroup>
-                    <EuiSpacer>
-                      <div
-                        className="euiSpacer euiSpacer--l"
-                      />
-                    </EuiSpacer>
-                    <div
-                      style={
-                        Object {
-                          "minHeight": 434,
-                        }
-                      }
-                    >
-                      <NoMatchMessage
-                        size="s"
-                      >
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                        <EuiEmptyPrompt
-                          body={
-                            <EuiText>
-                              No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-                            </EuiText>
-                          }
-                          title={
-                            <h2>
-                              No matches
-                            </h2>
-                          }
-                        >
-                          <div
-                            className="euiEmptyPrompt"
-                          >
-                            <EuiTitle
-                              size="m"
-                            >
-                              <h2
-                                className="euiTitle euiTitle--medium"
-                              >
-                                No matches
-                              </h2>
-                            </EuiTitle>
-                            <EuiTextColor
-                              color="subdued"
-                            >
-                              <span
-                                className="euiTextColor euiTextColor--subdued"
-                              >
-                                <EuiSpacer
-                                  size="m"
-                                >
-                                  <div
-                                    className="euiSpacer euiSpacer--m"
-                                  />
-                                </EuiSpacer>
-                                <EuiText>
-                                  <div
-                                    className="euiText euiText--medium"
-                                  >
-                                    <EuiText>
-                                      <div
-                                        className="euiText euiText--medium"
-                                      >
-                                        No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
-                                      </div>
-                                    </EuiText>
-                                  </div>
-                                </EuiText>
-                              </span>
-                            </EuiTextColor>
-                          </div>
-                        </EuiEmptyPrompt>
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                      </NoMatchMessage>
-                    </div>
-                  </div>
-                </EuiPanel>
-              </ServiceMap>
-            </div>
-          </EuiFlexItem>
           <EuiFlexItem>
             <div
               className="euiFlexItem"
             >
               <EuiFlexGroup
-                direction="column"
+                direction="row"
               >
                 <div
-                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                 >
                   <EuiFlexItem>
                     <div
@@ -3812,546 +3277,15 @@ exports[`Dashboard component renders empty dashboard 1`] = `
         <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"
+                direction="row"
               >
                 <div
-                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                 >
                   <EuiFlexItem>
                     <div
@@ -5971,12 +4905,12 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
               Object {
                 "data-test-subj": "errors-toggle",
                 "id": "error_rate",
-                "label": "Error rate",
+                "label": "Errors",
               },
               Object {
                 "data-test-subj": "throughput-toggle",
                 "id": "throughput",
-                "label": "Throughput",
+                "label": "Rate",
               },
             ]
           }
@@ -6032,12 +4966,12 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                         Object {
                           "data-test-subj": "errors-toggle",
                           "id": "error_rate",
-                          "label": "Error rate",
+                          "label": "Errors",
                         },
                         Object {
                           "data-test-subj": "throughput-toggle",
                           "id": "throughput",
-                          "label": "Throughput",
+                          "label": "Rate",
                         },
                       ]
                     }
@@ -6063,7 +4997,7 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                           isIconOnly={false}
                           isSelected={true}
                           key="0"
-                          label="Error rate"
+                          label="Errors"
                           name="random_html_id"
                           onChange={[Function]}
                           size="s"
@@ -6082,9 +5016,9 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                             textProps={
                               Object {
                                 "className": "euiButtonGroupButton__textShift",
-                                "data-text": "Error rate",
+                                "data-text": "Errors",
                                 "ref": [Function],
-                                "title": "Error rate",
+                                "title": "Errors",
                               }
                             }
                           >
@@ -6106,9 +5040,9 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                                 textProps={
                                   Object {
                                     "className": "euiButton__text euiButtonGroupButton__textShift",
-                                    "data-text": "Error rate",
+                                    "data-text": "Errors",
                                     "ref": [Function],
-                                    "title": "Error rate",
+                                    "title": "Errors",
                                   }
                                 }
                               >
@@ -6117,8 +5051,8 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                                 >
                                   <span
                                     className="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Error rate"
-                                    title="Error rate"
+                                    data-text="Errors"
+                                    title="Errors"
                                   >
                                     <input
                                       checked={true}
@@ -6130,7 +5064,7 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                                       onChange={[Function]}
                                       type="radio"
                                     />
-                                    Error rate
+                                    Errors
                                   </span>
                                 </span>
                               </EuiButtonContent>
@@ -6146,7 +5080,7 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                           isIconOnly={false}
                           isSelected={false}
                           key="1"
-                          label="Throughput"
+                          label="Rate"
                           name="random_html_id"
                           onChange={[Function]}
                           size="s"
@@ -6165,9 +5099,9 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                             textProps={
                               Object {
                                 "className": "euiButtonGroupButton__textShift",
-                                "data-text": "Throughput",
+                                "data-text": "Rate",
                                 "ref": [Function],
-                                "title": "Throughput",
+                                "title": "Rate",
                               }
                             }
                           >
@@ -6189,9 +5123,9 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                                 textProps={
                                   Object {
                                     "className": "euiButton__text euiButtonGroupButton__textShift",
-                                    "data-text": "Throughput",
+                                    "data-text": "Rate",
                                     "ref": [Function],
-                                    "title": "Throughput",
+                                    "title": "Rate",
                                   }
                                 }
                               >
@@ -6200,8 +5134,8 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                                 >
                                   <span
                                     className="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Throughput"
-                                    title="Throughput"
+                                    data-text="Rate"
+                                    title="Rate"
                                   >
                                     <input
                                       checked={false}
@@ -6213,7 +5147,7 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                                       onChange={[Function]}
                                       type="radio"
                                     />
-                                    Throughput
+                                    Rate
                                   </span>
                                 </span>
                               </EuiButtonContent>
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard_table.test.tsx.snap b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard_table.test.tsx.snap
index e5a546bb0..fdabcbc28 100644
--- a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard_table.test.tsx.snap
+++ b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard_table.test.tsx.snap
@@ -237,7 +237,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                   position="top"
                 >
                   <span>
-                    Latency variance (ms)
+                    Duration variance (ms)
                      
                     <EuiIcon
                       className="eui-alignTop"
@@ -275,7 +275,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
               >
                 <React.Fragment>
                   <div>
-                    Average latency (ms)
+                    Average duration (ms)
                      
                     <EuiIcon
                       className="eui-alignTop"
@@ -308,7 +308,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
               >
                 <React.Fragment>
                   <div>
-                    24-hour latency trend
+                    24-hour duration trend
                      
                     <EuiIcon
                       className="eui-alignTop"
@@ -485,7 +485,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                     position="top"
                   >
                     <span>
-                      Latency variance (ms)
+                      Duration variance (ms)
                        
                       <EuiIcon
                         className="eui-alignTop"
@@ -523,7 +523,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                 >
                   <React.Fragment>
                     <div>
-                      Average latency (ms)
+                      Average duration (ms)
                        
                       <EuiIcon
                         className="eui-alignTop"
@@ -556,7 +556,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                 >
                   <React.Fragment>
                     <div>
-                      24-hour latency trend
+                      24-hour duration trend
                        
                       <EuiIcon
                         className="eui-alignTop"
@@ -693,7 +693,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                     position="top"
                   >
                     <span>
-                      Latency variance (ms)
+                      Duration variance (ms)
                        
                       <EuiIcon
                         className="eui-alignTop"
@@ -798,7 +798,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                                       position="top"
                                     >
                                       <span>
-                                        Latency variance (ms)
+                                        Duration variance (ms)
                                          
                                         <EuiIcon
                                           className="eui-alignTop"
@@ -834,7 +834,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                                   >
                                     <React.Fragment>
                                       <div>
-                                        Average latency (ms)
+                                        Average duration (ms)
                                          
                                         <EuiIcon
                                           className="eui-alignTop"
@@ -1204,13 +1204,13 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                                       values={
                                         Object {
                                           "description": undefined,
-                                          "innerText": "Latency variance (ms) 0                100            200            300            400",
+                                          "innerText": "Duration variance (ms) 0                100            200            300            400",
                                         }
                                       }
                                     >
                                       <span
                                         className="euiTableCellContent__text"
-                                        title="Latency variance (ms) 0                100            200            300            400"
+                                        title="Duration variance (ms) 0                100            200            300            400"
                                       >
                                         <EuiToolTip
                                           content={
@@ -1233,7 +1233,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                                               onBlur={[Function]}
                                               onFocus={[Function]}
                                             >
-                                              Latency variance (ms)
+                                              Duration variance (ms)
                                                
                                               <EuiIcon
                                                 className="eui-alignTop"
@@ -1357,13 +1357,13 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                                       values={
                                         Object {
                                           "description": undefined,
-                                          "innerText": "Average latency (ms)  ",
+                                          "innerText": "Average duration (ms)  ",
                                         }
                                       }
                                     >
                                       <span
                                         className="euiTableCellContent__text"
-                                        title="Average latency (ms)  "
+                                        title="Average duration (ms)  "
                                       >
                                         <EuiToolTip
                                           content={
@@ -1383,7 +1383,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                                             onMouseOver={[Function]}
                                           >
                                             <div>
-                                              Average latency (ms)
+                                              Average duration (ms)
                                                
                                               <EuiIcon
                                                 className="eui-alignTop"
@@ -1455,13 +1455,13 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                                     values={
                                       Object {
                                         "description": undefined,
-                                        "innerText": "24-hour latency trend  ",
+                                        "innerText": "24-hour duration trend  ",
                                       }
                                     }
                                   >
                                     <span
                                       className="euiTableCellContent__text"
-                                      title="24-hour latency trend  "
+                                      title="24-hour duration trend  "
                                     >
                                       <EuiToolTip
                                         content={
@@ -1481,7 +1481,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                                           onMouseOver={[Function]}
                                         >
                                           <div>
-                                            24-hour latency trend
+                                            24-hour duration trend
                                              
                                             <EuiIcon
                                               className="eui-alignTop"
@@ -1895,7 +1895,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                                     position="top"
                                   >
                                     <span>
-                                      Latency variance (ms)
+                                      Duration variance (ms)
                                        
                                       <EuiIcon
                                         className="eui-alignTop"
@@ -1951,7 +1951,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                                       onBlur={[Function]}
                                       onFocus={[Function]}
                                     >
-                                      Latency variance (ms)
+                                      Duration variance (ms)
                                        
                                       <EuiIcon
                                         className="eui-alignTop"
@@ -2340,7 +2340,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                                 >
                                   <React.Fragment>
                                     <div>
-                                      Average latency (ms)
+                                      Average duration (ms)
                                        
                                       <EuiIcon
                                         className="eui-alignTop"
@@ -2389,7 +2389,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                                     onMouseOver={[Function]}
                                   >
                                     <div>
-                                      Average latency (ms)
+                                      Average duration (ms)
                                        
                                       <EuiIcon
                                         className="eui-alignTop"
@@ -2449,7 +2449,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                                 >
                                   <React.Fragment>
                                     <div>
-                                      24-hour latency trend
+                                      24-hour duration trend
                                        
                                       <EuiIcon
                                         className="eui-alignTop"
@@ -2498,7 +2498,7 @@ exports[`Dashboard table component renders dashboard table 1`] = `
                                     onMouseOver={[Function]}
                                   >
                                     <div>
-                                      24-hour latency trend
+                                      24-hour duration trend
                                        
                                       <EuiIcon
                                         className="eui-alignTop"
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
index 00580538e..71733fa84 100644
--- 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
@@ -304,7 +304,7 @@ exports[`Error Rates Table component renders top error rates table with data 1`]
               >
                 <React.Fragment>
                   <div>
-                    Average latency (ms)
+                    Average duration (ms)
                      
                     <EuiIcon
                       className="eui-alignTop"
@@ -480,7 +480,7 @@ exports[`Error Rates Table component renders top error rates table with data 1`]
                 >
                   <React.Fragment>
                     <div>
-                      Average latency (ms)
+                      Average duration (ms)
                        
                       <EuiIcon
                         className="eui-alignTop"
@@ -688,7 +688,7 @@ exports[`Error Rates Table component renders top error rates table with data 1`]
                                   >
                                     <React.Fragment>
                                       <div>
-                                        Average latency (ms)
+                                        Average duration (ms)
                                          
                                         <EuiIcon
                                           className="eui-alignTop"
@@ -1022,13 +1022,13 @@ exports[`Error Rates Table component renders top error rates table with data 1`]
                                       values={
                                         Object {
                                           "description": undefined,
-                                          "innerText": "Average latency (ms)  ",
+                                          "innerText": "Average duration (ms)  ",
                                         }
                                       }
                                     >
                                       <span
                                         className="euiTableCellContent__text"
-                                        title="Average latency (ms)  "
+                                        title="Average duration (ms)  "
                                       >
                                         <EuiToolTip
                                           content={
@@ -1048,7 +1048,7 @@ exports[`Error Rates Table component renders top error rates table with data 1`]
                                             onMouseOver={[Function]}
                                           >
                                             <div>
-                                              Average latency (ms)
+                                              Average duration (ms)
                                                
                                               <EuiIcon
                                                 className="eui-alignTop"
@@ -1451,7 +1451,7 @@ exports[`Error Rates Table component renders top error rates table with data 1`]
                                 >
                                   <React.Fragment>
                                     <div>
-                                      Average latency (ms)
+                                      Average duration (ms)
                                        
                                       <EuiIcon
                                         className="eui-alignTop"
@@ -1500,7 +1500,7 @@ exports[`Error Rates Table component renders top error rates table with data 1`]
                                     onMouseOver={[Function]}
                                   >
                                     <div>
-                                      Average latency (ms)
+                                      Average duration (ms)
                                        
                                       <EuiIcon
                                         className="eui-alignTop"
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
index 0935b8fc7..d0279c186 100644
--- 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
@@ -487,7 +487,7 @@ exports[`Latency Table component renders top error rates table with data 1`] = `
                   position="top"
                 >
                   <span>
-                    Latency variance (ms)
+                    Duration variance (ms)
                      
                     <EuiIcon
                       className="eui-alignTop"
@@ -525,7 +525,7 @@ exports[`Latency Table component renders top error rates table with data 1`] = `
               >
                 <React.Fragment>
                   <div>
-                    Average latency (ms)
+                    Average duration (ms)
                      
                     <EuiIcon
                       className="eui-alignTop"
@@ -700,7 +700,7 @@ exports[`Latency Table component renders top error rates table with data 1`] = `
                     position="top"
                   >
                     <span>
-                      Latency variance (ms)
+                      Duration variance (ms)
                        
                       <EuiIcon
                         className="eui-alignTop"
@@ -738,7 +738,7 @@ exports[`Latency Table component renders top error rates table with data 1`] = `
                 >
                   <React.Fragment>
                     <div>
-                      Average latency (ms)
+                      Average duration (ms)
                        
                       <EuiIcon
                         className="eui-alignTop"
@@ -873,7 +873,7 @@ exports[`Latency Table component renders top error rates table with data 1`] = `
                     position="top"
                   >
                     <span>
-                      Latency variance (ms)
+                      Duration variance (ms)
                        
                       <EuiIcon
                         className="eui-alignTop"
@@ -978,7 +978,7 @@ exports[`Latency Table component renders top error rates table with data 1`] = `
                                       position="top"
                                     >
                                       <span>
-                                        Latency variance (ms)
+                                        Duration variance (ms)
                                          
                                         <EuiIcon
                                           className="eui-alignTop"
@@ -1014,7 +1014,7 @@ exports[`Latency Table component renders top error rates table with data 1`] = `
                                   >
                                     <React.Fragment>
                                       <div>
-                                        Average latency (ms)
+                                        Average duration (ms)
                                          
                                         <EuiIcon
                                           className="eui-alignTop"
@@ -1384,13 +1384,13 @@ exports[`Latency Table component renders top error rates table with data 1`] = `
                                       values={
                                         Object {
                                           "description": undefined,
-                                          "innerText": "Latency variance (ms) 0                100            200            300            400",
+                                          "innerText": "Duration variance (ms) 0                100            200            300            400",
                                         }
                                       }
                                     >
                                       <span
                                         className="euiTableCellContent__text"
-                                        title="Latency variance (ms) 0                100            200            300            400"
+                                        title="Duration variance (ms) 0                100            200            300            400"
                                       >
                                         <EuiToolTip
                                           content={
@@ -1413,7 +1413,7 @@ exports[`Latency Table component renders top error rates table with data 1`] = `
                                               onBlur={[Function]}
                                               onFocus={[Function]}
                                             >
-                                              Latency variance (ms)
+                                              Duration variance (ms)
                                                
                                               <EuiIcon
                                                 className="eui-alignTop"
@@ -1537,13 +1537,13 @@ exports[`Latency Table component renders top error rates table with data 1`] = `
                                       values={
                                         Object {
                                           "description": undefined,
-                                          "innerText": "Average latency (ms)  ",
+                                          "innerText": "Average duration (ms)  ",
                                         }
                                       }
                                     >
                                       <span
                                         className="euiTableCellContent__text"
-                                        title="Average latency (ms)  "
+                                        title="Average duration (ms)  "
                                       >
                                         <EuiToolTip
                                           content={
@@ -1563,7 +1563,7 @@ exports[`Latency Table component renders top error rates table with data 1`] = `
                                             onMouseOver={[Function]}
                                           >
                                             <div>
-                                              Average latency (ms)
+                                              Average duration (ms)
                                                
                                               <EuiIcon
                                                 className="eui-alignTop"
@@ -1978,7 +1978,7 @@ exports[`Latency Table component renders top error rates table with data 1`] = `
                                     position="top"
                                   >
                                     <span>
-                                      Latency variance (ms)
+                                      Duration variance (ms)
                                        
                                       <EuiIcon
                                         className="eui-alignTop"
@@ -2034,7 +2034,7 @@ exports[`Latency Table component renders top error rates table with data 1`] = `
                                       onBlur={[Function]}
                                       onFocus={[Function]}
                                     >
-                                      Latency variance (ms)
+                                      Duration variance (ms)
                                        
                                       <EuiIcon
                                         className="eui-alignTop"
@@ -2423,7 +2423,7 @@ exports[`Latency Table component renders top error rates table with data 1`] = `
                                 >
                                   <React.Fragment>
                                     <div>
-                                      Average latency (ms)
+                                      Average duration (ms)
                                        
                                       <EuiIcon
                                         className="eui-alignTop"
@@ -2472,7 +2472,7 @@ exports[`Latency Table component renders top error rates table with data 1`] = `
                                     onMouseOver={[Function]}
                                   >
                                     <div>
-                                      Average latency (ms)
+                                      Average duration (ms)
                                        
                                       <EuiIcon
                                         className="eui-alignTop"
diff --git a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
index fd9fe5ed9..fa47b2920 100644
--- a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
+++ b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
@@ -55,7 +55,7 @@ export function DashboardContent(props: DashboardProps) {
     dataPrepperIndicesExist,
     jaegerIndicesExist,
     toasts,
-    setToast,
+    // setToast,
   } = props;
   const [tableItems, setTableItems] = useState([]);
   const [jaegerTableItems, setJaegerTableItems] = useState([]);
@@ -67,6 +67,7 @@ export function DashboardContent(props: DashboardProps) {
   const [redirect, setRedirect] = useState(true);
   const [loading, setLoading] = useState(false);
   const [showTimeoutToast, setShowTimeoutToast] = useState(false);
+  const { setToast } = useToast();
 
   useEffect(() => {
     if (showTimeoutToast === true && (!toasts || toasts.length === 0)) {
@@ -296,6 +297,21 @@ export function DashboardContent(props: DashboardProps) {
 
   return (
     <>
+      <SearchBar
+        query={query}
+        filters={filters}
+        appConfigs={appConfigs}
+        setFilters={setFilters}
+        setQuery={setQuery}
+        startTime={startTime}
+        setStartTime={setStartTime}
+        endTime={endTime}
+        setEndTime={setEndTime}
+        refresh={refresh}
+        page={page}
+        mode={mode}
+      />
+      <EuiSpacer size="m" />
       {(mode === 'data_prepper' && dataPrepperIndicesExist) ||
       (mode === 'jaeger' && jaegerIndicesExist) ? (
         <div>
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 0d88b2139..563c56097 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
@@ -137,20 +137,6 @@ exports[`Services component renders empty services page 1`] = `
   startTime="now-5m"
   traceColumnAction={[Function]}
 >
-  <EuiTitle
-    size="l"
-  >
-    <h2
-      className="euiTitle euiTitle--large"
-      style={
-        Object {
-          "fontWeight": 430,
-        }
-      }
-    >
-      Services
-    </h2>
-  </EuiTitle>
   <DataSourcePicker
     modes={
       Array [
@@ -1409,15 +1395,15 @@ exports[`Services component renders empty services page 1`] = `
               Array [
                 Object {
                   "id": "latency",
-                  "label": "Latency",
+                  "label": "Duration",
                 },
                 Object {
                   "id": "error_rate",
-                  "label": "Error rate",
+                  "label": "Errors",
                 },
                 Object {
                   "id": "throughput",
-                  "label": "Throughput",
+                  "label": "Rate",
                 },
               ]
             }
@@ -1442,7 +1428,7 @@ exports[`Services component renders empty services page 1`] = `
                   isIconOnly={false}
                   isSelected={true}
                   key="0"
-                  label="Latency"
+                  label="Duration"
                   name="random_html_id"
                   onChange={[Function]}
                   size="s"
@@ -1460,9 +1446,9 @@ exports[`Services component renders empty services page 1`] = `
                     textProps={
                       Object {
                         "className": "euiButtonGroupButton__textShift",
-                        "data-text": "Latency",
+                        "data-text": "Duration",
                         "ref": [Function],
-                        "title": "Latency",
+                        "title": "Duration",
                       }
                     }
                   >
@@ -1483,9 +1469,9 @@ exports[`Services component renders empty services page 1`] = `
                         textProps={
                           Object {
                             "className": "euiButton__text euiButtonGroupButton__textShift",
-                            "data-text": "Latency",
+                            "data-text": "Duration",
                             "ref": [Function],
-                            "title": "Latency",
+                            "title": "Duration",
                           }
                         }
                       >
@@ -1494,8 +1480,8 @@ exports[`Services component renders empty services page 1`] = `
                         >
                           <span
                             className="euiButton__text euiButtonGroupButton__textShift"
-                            data-text="Latency"
-                            title="Latency"
+                            data-text="Duration"
+                            title="Duration"
                           >
                             <input
                               checked={true}
@@ -1507,7 +1493,7 @@ exports[`Services component renders empty services page 1`] = `
                               onChange={[Function]}
                               type="radio"
                             />
-                            Latency
+                            Duration
                           </span>
                         </span>
                       </EuiButtonContent>
@@ -1522,7 +1508,7 @@ exports[`Services component renders empty services page 1`] = `
                   isIconOnly={false}
                   isSelected={false}
                   key="1"
-                  label="Error rate"
+                  label="Errors"
                   name="random_html_id"
                   onChange={[Function]}
                   size="s"
@@ -1540,9 +1526,9 @@ exports[`Services component renders empty services page 1`] = `
                     textProps={
                       Object {
                         "className": "euiButtonGroupButton__textShift",
-                        "data-text": "Error rate",
+                        "data-text": "Errors",
                         "ref": [Function],
-                        "title": "Error rate",
+                        "title": "Errors",
                       }
                     }
                   >
@@ -1563,9 +1549,9 @@ exports[`Services component renders empty services page 1`] = `
                         textProps={
                           Object {
                             "className": "euiButton__text euiButtonGroupButton__textShift",
-                            "data-text": "Error rate",
+                            "data-text": "Errors",
                             "ref": [Function],
-                            "title": "Error rate",
+                            "title": "Errors",
                           }
                         }
                       >
@@ -1574,8 +1560,8 @@ exports[`Services component renders empty services page 1`] = `
                         >
                           <span
                             className="euiButton__text euiButtonGroupButton__textShift"
-                            data-text="Error rate"
-                            title="Error rate"
+                            data-text="Errors"
+                            title="Errors"
                           >
                             <input
                               checked={false}
@@ -1587,7 +1573,7 @@ exports[`Services component renders empty services page 1`] = `
                               onChange={[Function]}
                               type="radio"
                             />
-                            Error rate
+                            Errors
                           </span>
                         </span>
                       </EuiButtonContent>
@@ -1602,7 +1588,7 @@ exports[`Services component renders empty services page 1`] = `
                   isIconOnly={false}
                   isSelected={false}
                   key="2"
-                  label="Throughput"
+                  label="Rate"
                   name="random_html_id"
                   onChange={[Function]}
                   size="s"
@@ -1620,9 +1606,9 @@ exports[`Services component renders empty services page 1`] = `
                     textProps={
                       Object {
                         "className": "euiButtonGroupButton__textShift",
-                        "data-text": "Throughput",
+                        "data-text": "Rate",
                         "ref": [Function],
-                        "title": "Throughput",
+                        "title": "Rate",
                       }
                     }
                   >
@@ -1643,9 +1629,9 @@ exports[`Services component renders empty services page 1`] = `
                         textProps={
                           Object {
                             "className": "euiButton__text euiButtonGroupButton__textShift",
-                            "data-text": "Throughput",
+                            "data-text": "Rate",
                             "ref": [Function],
-                            "title": "Throughput",
+                            "title": "Rate",
                           }
                         }
                       >
@@ -1654,8 +1640,8 @@ exports[`Services component renders empty services page 1`] = `
                         >
                           <span
                             className="euiButton__text euiButtonGroupButton__textShift"
-                            data-text="Throughput"
-                            title="Throughput"
+                            data-text="Rate"
+                            title="Rate"
                           >
                             <input
                               checked={false}
@@ -1667,7 +1653,7 @@ exports[`Services component renders empty services page 1`] = `
                               onChange={[Function]}
                               type="radio"
                             />
-                            Throughput
+                            Rate
                           </span>
                         </span>
                       </EuiButtonContent>
@@ -1887,6 +1873,108 @@ exports[`Services component renders empty services page 1`] = `
         </div>
       </EuiPanel>
     </ServiceMap>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <EuiPanel>
+      <div
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+      >
+        <EuiAccordion
+          arrowDisplay="left"
+          buttonContent="Trace Groups"
+          forceState="closed"
+          id="accordion1"
+          initialIsOpen={false}
+          isLoading={false}
+          isLoadingMessage={false}
+          onToggle={[Function]}
+          paddingSize="none"
+        >
+          <div
+            className="euiAccordion"
+            onToggle={[Function]}
+          >
+            <div
+              className="euiAccordion__triggerWrapper"
+            >
+              <button
+                aria-controls="accordion1"
+                aria-expanded={false}
+                className="euiAccordion__button"
+                id="random_html_id"
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="euiAccordion__iconWrapper"
+                >
+                  <EuiIcon
+                    className="euiAccordion__icon"
+                    size="m"
+                    type="arrowRight"
+                  >
+                    <EuiIconEmpty
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                      focusable="false"
+                      role="img"
+                      style={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__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>
+                <span
+                  className="euiIEFlexWrapFix"
+                >
+                  Trace Groups
+                </span>
+              </button>
+            </div>
+            <div
+              aria-labelledby="random_html_id"
+              className="euiAccordion__childWrapper"
+              id="accordion1"
+              role="region"
+              tabIndex={-1}
+            >
+              <EuiResizeObserver
+                onResize={[Function]}
+              >
+                <div>
+                  <div
+                    className=""
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                  </div>
+                </div>
+              </EuiResizeObserver>
+            </div>
+          </div>
+        </EuiAccordion>
+      </div>
+    </EuiPanel>
   </ServicesContent>
 </Services>
 `;
@@ -2028,20 +2116,6 @@ exports[`Services component renders jaeger services page 1`] = `
   startTime="now-5m"
   traceColumnAction={[Function]}
 >
-  <EuiTitle
-    size="l"
-  >
-    <h2
-      className="euiTitle euiTitle--large"
-      style={
-        Object {
-          "fontWeight": 430,
-        }
-      }
-    >
-      Services
-    </h2>
-  </EuiTitle>
   <DataSourcePicker
     modes={
       Array [
@@ -3285,6 +3359,113 @@ exports[`Services component renders jaeger services page 1`] = `
       />
     </EuiSpacer>
     <div />
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <EuiPanel>
+      <div
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+      >
+        <EuiAccordion
+          arrowDisplay="left"
+          buttonContent="Service and Operations"
+          forceState="closed"
+          id="accordion1"
+          initialIsOpen={false}
+          isLoading={false}
+          isLoadingMessage={false}
+          onToggle={[Function]}
+          paddingSize="none"
+        >
+          <div
+            className="euiAccordion"
+            onToggle={[Function]}
+          >
+            <div
+              className="euiAccordion__triggerWrapper"
+            >
+              <button
+                aria-controls="accordion1"
+                aria-expanded={false}
+                className="euiAccordion__button"
+                id="random_html_id"
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="euiAccordion__iconWrapper"
+                >
+                  <EuiIcon
+                    className="euiAccordion__icon"
+                    size="m"
+                    type="arrowRight"
+                  >
+                    <EuiIconArrowRight
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiAccordion__icon"
+                      focusable="false"
+                      role="img"
+                      style={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiAccordion__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>
+                </span>
+                <span
+                  className="euiIEFlexWrapFix"
+                >
+                  Service and Operations
+                </span>
+              </button>
+            </div>
+            <div
+              aria-labelledby="random_html_id"
+              className="euiAccordion__childWrapper"
+              id="accordion1"
+              role="region"
+              tabIndex={-1}
+            >
+              <EuiResizeObserver
+                onResize={[Function]}
+              >
+                <div>
+                  <div
+                    className=""
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                  </div>
+                </div>
+              </EuiResizeObserver>
+            </div>
+          </div>
+        </EuiAccordion>
+      </div>
+    </EuiPanel>
   </ServicesContent>
 </Services>
 `;
@@ -3425,20 +3606,6 @@ exports[`Services component renders services page 1`] = `
   startTime="now-5m"
   traceColumnAction={[Function]}
 >
-  <EuiTitle
-    size="l"
-  >
-    <h2
-      className="euiTitle euiTitle--large"
-      style={
-        Object {
-          "fontWeight": 430,
-        }
-      }
-    >
-      Services
-    </h2>
-  </EuiTitle>
   <DataSourcePicker
     modes={
       Array [
@@ -4724,15 +4891,15 @@ exports[`Services component renders services page 1`] = `
               Array [
                 Object {
                   "id": "latency",
-                  "label": "Latency",
+                  "label": "Duration",
                 },
                 Object {
                   "id": "error_rate",
-                  "label": "Error rate",
+                  "label": "Errors",
                 },
                 Object {
                   "id": "throughput",
-                  "label": "Throughput",
+                  "label": "Rate",
                 },
               ]
             }
@@ -4757,7 +4924,7 @@ exports[`Services component renders services page 1`] = `
                   isIconOnly={false}
                   isSelected={true}
                   key="0"
-                  label="Latency"
+                  label="Duration"
                   name="random_html_id"
                   onChange={[Function]}
                   size="s"
@@ -4775,9 +4942,9 @@ exports[`Services component renders services page 1`] = `
                     textProps={
                       Object {
                         "className": "euiButtonGroupButton__textShift",
-                        "data-text": "Latency",
+                        "data-text": "Duration",
                         "ref": [Function],
-                        "title": "Latency",
+                        "title": "Duration",
                       }
                     }
                   >
@@ -4798,9 +4965,9 @@ exports[`Services component renders services page 1`] = `
                         textProps={
                           Object {
                             "className": "euiButton__text euiButtonGroupButton__textShift",
-                            "data-text": "Latency",
+                            "data-text": "Duration",
                             "ref": [Function],
-                            "title": "Latency",
+                            "title": "Duration",
                           }
                         }
                       >
@@ -4809,8 +4976,8 @@ exports[`Services component renders services page 1`] = `
                         >
                           <span
                             className="euiButton__text euiButtonGroupButton__textShift"
-                            data-text="Latency"
-                            title="Latency"
+                            data-text="Duration"
+                            title="Duration"
                           >
                             <input
                               checked={true}
@@ -4822,7 +4989,7 @@ exports[`Services component renders services page 1`] = `
                               onChange={[Function]}
                               type="radio"
                             />
-                            Latency
+                            Duration
                           </span>
                         </span>
                       </EuiButtonContent>
@@ -4837,7 +5004,7 @@ exports[`Services component renders services page 1`] = `
                   isIconOnly={false}
                   isSelected={false}
                   key="1"
-                  label="Error rate"
+                  label="Errors"
                   name="random_html_id"
                   onChange={[Function]}
                   size="s"
@@ -4855,9 +5022,9 @@ exports[`Services component renders services page 1`] = `
                     textProps={
                       Object {
                         "className": "euiButtonGroupButton__textShift",
-                        "data-text": "Error rate",
+                        "data-text": "Errors",
                         "ref": [Function],
-                        "title": "Error rate",
+                        "title": "Errors",
                       }
                     }
                   >
@@ -4878,9 +5045,9 @@ exports[`Services component renders services page 1`] = `
                         textProps={
                           Object {
                             "className": "euiButton__text euiButtonGroupButton__textShift",
-                            "data-text": "Error rate",
+                            "data-text": "Errors",
                             "ref": [Function],
-                            "title": "Error rate",
+                            "title": "Errors",
                           }
                         }
                       >
@@ -4889,8 +5056,8 @@ exports[`Services component renders services page 1`] = `
                         >
                           <span
                             className="euiButton__text euiButtonGroupButton__textShift"
-                            data-text="Error rate"
-                            title="Error rate"
+                            data-text="Errors"
+                            title="Errors"
                           >
                             <input
                               checked={false}
@@ -4902,7 +5069,7 @@ exports[`Services component renders services page 1`] = `
                               onChange={[Function]}
                               type="radio"
                             />
-                            Error rate
+                            Errors
                           </span>
                         </span>
                       </EuiButtonContent>
@@ -4917,7 +5084,7 @@ exports[`Services component renders services page 1`] = `
                   isIconOnly={false}
                   isSelected={false}
                   key="2"
-                  label="Throughput"
+                  label="Rate"
                   name="random_html_id"
                   onChange={[Function]}
                   size="s"
@@ -4935,9 +5102,9 @@ exports[`Services component renders services page 1`] = `
                     textProps={
                       Object {
                         "className": "euiButtonGroupButton__textShift",
-                        "data-text": "Throughput",
+                        "data-text": "Rate",
                         "ref": [Function],
-                        "title": "Throughput",
+                        "title": "Rate",
                       }
                     }
                   >
@@ -4958,9 +5125,9 @@ exports[`Services component renders services page 1`] = `
                         textProps={
                           Object {
                             "className": "euiButton__text euiButtonGroupButton__textShift",
-                            "data-text": "Throughput",
+                            "data-text": "Rate",
                             "ref": [Function],
-                            "title": "Throughput",
+                            "title": "Rate",
                           }
                         }
                       >
@@ -4969,8 +5136,8 @@ exports[`Services component renders services page 1`] = `
                         >
                           <span
                             className="euiButton__text euiButtonGroupButton__textShift"
-                            data-text="Throughput"
-                            title="Throughput"
+                            data-text="Rate"
+                            title="Rate"
                           >
                             <input
                               checked={false}
@@ -4982,7 +5149,7 @@ exports[`Services component renders services page 1`] = `
                               onChange={[Function]}
                               type="radio"
                             />
-                            Throughput
+                            Rate
                           </span>
                         </span>
                       </EuiButtonContent>
@@ -5206,6 +5373,113 @@ exports[`Services component renders services page 1`] = `
         </div>
       </EuiPanel>
     </ServiceMap>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <EuiPanel>
+      <div
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+      >
+        <EuiAccordion
+          arrowDisplay="left"
+          buttonContent="Trace Groups"
+          forceState="closed"
+          id="accordion1"
+          initialIsOpen={false}
+          isLoading={false}
+          isLoadingMessage={false}
+          onToggle={[Function]}
+          paddingSize="none"
+        >
+          <div
+            className="euiAccordion"
+            onToggle={[Function]}
+          >
+            <div
+              className="euiAccordion__triggerWrapper"
+            >
+              <button
+                aria-controls="accordion1"
+                aria-expanded={false}
+                className="euiAccordion__button"
+                id="random_html_id"
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="euiAccordion__iconWrapper"
+                >
+                  <EuiIcon
+                    className="euiAccordion__icon"
+                    size="m"
+                    type="arrowRight"
+                  >
+                    <EuiIconArrowRight
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiAccordion__icon"
+                      focusable="false"
+                      role="img"
+                      style={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiAccordion__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>
+                </span>
+                <span
+                  className="euiIEFlexWrapFix"
+                >
+                  Trace Groups
+                </span>
+              </button>
+            </div>
+            <div
+              aria-labelledby="random_html_id"
+              className="euiAccordion__childWrapper"
+              id="accordion1"
+              role="region"
+              tabIndex={-1}
+            >
+              <EuiResizeObserver
+                onResize={[Function]}
+              >
+                <div>
+                  <div
+                    className=""
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                  </div>
+                </div>
+              </EuiResizeObserver>
+            </div>
+          </div>
+        </EuiAccordion>
+      </div>
+    </EuiPanel>
   </ServicesContent>
 </Services>
 `;
diff --git a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services_table.test.tsx.snap b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services_table.test.tsx.snap
index 9d99f82c4..f12e3dcc8 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
@@ -387,7 +387,7 @@ exports[`Services table component renders jaeger services table 1`] = `
             Object {
               "align": "right",
               "field": "average_latency",
-              "name": "Average latency (ms)",
+              "name": "Average duration (ms)",
               "render": [Function],
               "sortable": true,
             },
@@ -401,7 +401,7 @@ exports[`Services table component renders jaeger services table 1`] = `
             Object {
               "align": "right",
               "field": "throughput",
-              "name": "Throughput",
+              "name": "Rate",
               "render": [Function],
               "sortable": true,
               "truncateText": true,
@@ -462,7 +462,7 @@ exports[`Services table component renders jaeger services table 1`] = `
               Object {
                 "align": "right",
                 "field": "average_latency",
-                "name": "Average latency (ms)",
+                "name": "Average duration (ms)",
                 "render": [Function],
                 "sortable": true,
               },
@@ -476,7 +476,7 @@ exports[`Services table component renders jaeger services table 1`] = `
               Object {
                 "align": "right",
                 "field": "throughput",
-                "name": "Throughput",
+                "name": "Rate",
                 "render": [Function],
                 "sortable": true,
                 "truncateText": true,
@@ -573,7 +573,7 @@ exports[`Services table component renders jaeger services table 1`] = `
                                   "isSortAscending": undefined,
                                   "isSorted": false,
                                   "key": "_data_s_average_latency_1",
-                                  "name": "Average latency (ms)",
+                                  "name": "Average duration (ms)",
                                   "onSort": [Function],
                                 },
                                 Object {
@@ -587,7 +587,7 @@ exports[`Services table component renders jaeger services table 1`] = `
                                   "isSortAscending": undefined,
                                   "isSorted": false,
                                   "key": "_data_s_throughput_3",
-                                  "name": "Throughput",
+                                  "name": "Rate",
                                   "onSort": [Function],
                                 },
                                 Object {
@@ -867,15 +867,15 @@ exports[`Services table component renders jaeger services table 1`] = `
                                       values={
                                         Object {
                                           "description": undefined,
-                                          "innerText": "Average latency (ms)",
+                                          "innerText": "Average duration (ms)",
                                         }
                                       }
                                     >
                                       <span
                                         className="euiTableCellContent__text"
-                                        title="Average latency (ms)"
+                                        title="Average duration (ms)"
                                       >
-                                        Average latency (ms)
+                                        Average duration (ms)
                                       </span>
                                     </EuiI18n>
                                   </EuiInnerText>
@@ -983,15 +983,15 @@ exports[`Services table component renders jaeger services table 1`] = `
                                       values={
                                         Object {
                                           "description": undefined,
-                                          "innerText": "Throughput",
+                                          "innerText": "Rate",
                                         }
                                       }
                                     >
                                       <span
                                         className="euiTableCellContent__text"
-                                        title="Throughput"
+                                        title="Rate"
                                       >
-                                        Throughput
+                                        Rate
                                       </span>
                                     </EuiI18n>
                                   </EuiInnerText>
@@ -1123,7 +1123,7 @@ exports[`Services table component renders jaeger services table 1`] = `
                             key="_data_column_average_latency_0_1"
                             mobileOptions={
                               Object {
-                                "header": "Average latency (ms)",
+                                "header": "Average duration (ms)",
                                 "render": undefined,
                               }
                             }
@@ -1141,7 +1141,7 @@ exports[`Services table component renders jaeger services table 1`] = `
                               <div
                                 className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                               >
-                                Average latency (ms)
+                                Average duration (ms)
                               </div>
                               <div
                                 className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
@@ -1197,7 +1197,7 @@ exports[`Services table component renders jaeger services table 1`] = `
                             key="_data_column_throughput_0_3"
                             mobileOptions={
                               Object {
-                                "header": "Throughput",
+                                "header": "Rate",
                                 "render": undefined,
                               }
                             }
@@ -1216,7 +1216,7 @@ exports[`Services table component renders jaeger services table 1`] = `
                               <div
                                 className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                               >
-                                Throughput
+                                Rate
                               </div>
                               <div
                                 className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
@@ -1801,7 +1801,7 @@ exports[`Services table component renders services table 1`] = `
             Object {
               "align": "right",
               "field": "average_latency",
-              "name": "Average latency (ms)",
+              "name": "Average duration (ms)",
               "render": [Function],
               "sortable": true,
             },
@@ -1815,7 +1815,7 @@ exports[`Services table component renders services table 1`] = `
             Object {
               "align": "right",
               "field": "throughput",
-              "name": "Throughput",
+              "name": "Rate",
               "render": [Function],
               "sortable": true,
               "truncateText": true,
@@ -1898,7 +1898,7 @@ exports[`Services table component renders services table 1`] = `
               Object {
                 "align": "right",
                 "field": "average_latency",
-                "name": "Average latency (ms)",
+                "name": "Average duration (ms)",
                 "render": [Function],
                 "sortable": true,
               },
@@ -1912,7 +1912,7 @@ exports[`Services table component renders services table 1`] = `
               Object {
                 "align": "right",
                 "field": "throughput",
-                "name": "Throughput",
+                "name": "Rate",
                 "render": [Function],
                 "sortable": true,
                 "truncateText": true,
@@ -2031,7 +2031,7 @@ exports[`Services table component renders services table 1`] = `
                                   "isSortAscending": undefined,
                                   "isSorted": false,
                                   "key": "_data_s_average_latency_1",
-                                  "name": "Average latency (ms)",
+                                  "name": "Average duration (ms)",
                                   "onSort": [Function],
                                 },
                                 Object {
@@ -2045,7 +2045,7 @@ exports[`Services table component renders services table 1`] = `
                                   "isSortAscending": undefined,
                                   "isSorted": false,
                                   "key": "_data_s_throughput_3",
-                                  "name": "Throughput",
+                                  "name": "Rate",
                                   "onSort": [Function],
                                 },
                                 Object {
@@ -2330,15 +2330,15 @@ exports[`Services table component renders services table 1`] = `
                                       values={
                                         Object {
                                           "description": undefined,
-                                          "innerText": "Average latency (ms)",
+                                          "innerText": "Average duration (ms)",
                                         }
                                       }
                                     >
                                       <span
                                         className="euiTableCellContent__text"
-                                        title="Average latency (ms)"
+                                        title="Average duration (ms)"
                                       >
-                                        Average latency (ms)
+                                        Average duration (ms)
                                       </span>
                                     </EuiI18n>
                                   </EuiInnerText>
@@ -2446,15 +2446,15 @@ exports[`Services table component renders services table 1`] = `
                                       values={
                                         Object {
                                           "description": undefined,
-                                          "innerText": "Throughput",
+                                          "innerText": "Rate",
                                         }
                                       }
                                     >
                                       <span
                                         className="euiTableCellContent__text"
-                                        title="Throughput"
+                                        title="Rate"
                                       >
-                                        Throughput
+                                        Rate
                                       </span>
                                     </EuiI18n>
                                   </EuiInnerText>
@@ -2703,7 +2703,7 @@ exports[`Services table component renders services table 1`] = `
                             key="_data_column_average_latency_0_1"
                             mobileOptions={
                               Object {
-                                "header": "Average latency (ms)",
+                                "header": "Average duration (ms)",
                                 "render": undefined,
                               }
                             }
@@ -2721,7 +2721,7 @@ exports[`Services table component renders services table 1`] = `
                               <div
                                 className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                               >
-                                Average latency (ms)
+                                Average duration (ms)
                               </div>
                               <div
                                 className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
@@ -2777,7 +2777,7 @@ exports[`Services table component renders services table 1`] = `
                             key="_data_column_throughput_0_3"
                             mobileOptions={
                               Object {
-                                "header": "Throughput",
+                                "header": "Rate",
                                 "render": undefined,
                               }
                             }
@@ -2796,7 +2796,7 @@ exports[`Services table component renders services table 1`] = `
                               <div
                                 className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                               >
-                                Throughput
+                                Rate
                               </div>
                               <div
                                 className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
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 c39db34c1..9bfefb347 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
@@ -136,20 +136,6 @@ exports[`Traces component renders empty traces page 1`] = `
   startTime="now-5m"
   traceIdColumnAction={[Function]}
 >
-  <EuiTitle
-    size="l"
-  >
-    <h2
-      className="euiTitle euiTitle--large"
-      style={
-        Object {
-          "fontWeight": 430,
-        }
-      }
-    >
-      Traces
-    </h2>
-  </EuiTitle>
   <DataSourcePicker
     modes={
       Array [
@@ -1493,20 +1479,6 @@ exports[`Traces component renders jaeger traces page 1`] = `
   startTime="now-5m"
   traceIdColumnAction={[Function]}
 >
-  <EuiTitle
-    size="l"
-  >
-    <h2
-      className="euiTitle euiTitle--large"
-      style={
-        Object {
-          "fontWeight": 430,
-        }
-      }
-    >
-      Traces
-    </h2>
-  </EuiTitle>
   <DataSourcePicker
     modes={
       Array [
@@ -2878,20 +2850,6 @@ exports[`Traces component renders traces page 1`] = `
   startTime="now-5m"
   traceIdColumnAction={[Function]}
 >
-  <EuiTitle
-    size="l"
-  >
-    <h2
-      className="euiTitle euiTitle--large"
-      style={
-        Object {
-          "fontWeight": 430,
-        }
-      }
-    >
-      Traces
-    </h2>
-  </EuiTitle>
   <DataSourcePicker
     modes={
       Array [
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 ac654a6f7..b9add4a2a 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
@@ -1847,7 +1847,7 @@ exports[`Traces table component renders traces table 1`] = `
             Object {
               "align": "right",
               "field": "latency",
-              "name": "Latency (ms)",
+              "name": "Duration (ms)",
               "sortable": true,
               "truncateText": true,
             },
@@ -1936,7 +1936,7 @@ exports[`Traces table component renders traces table 1`] = `
               Object {
                 "align": "right",
                 "field": "latency",
-                "name": "Latency (ms)",
+                "name": "Duration (ms)",
                 "sortable": true,
                 "truncateText": true,
               },
@@ -2058,7 +2058,7 @@ exports[`Traces table component renders traces table 1`] = `
                                   "isSortAscending": undefined,
                                   "isSorted": false,
                                   "key": "_data_s_latency_2",
-                                  "name": "Latency (ms)",
+                                  "name": "Duration (ms)",
                                   "onSort": [Function],
                                 },
                                 Object {
@@ -2405,15 +2405,15 @@ exports[`Traces table component renders traces table 1`] = `
                                       values={
                                         Object {
                                           "description": undefined,
-                                          "innerText": "Latency (ms)",
+                                          "innerText": "Duration (ms)",
                                         }
                                       }
                                     >
                                       <span
                                         className="euiTableCellContent__text"
-                                        title="Latency (ms)"
+                                        title="Duration (ms)"
                                       >
-                                        Latency (ms)
+                                        Duration (ms)
                                       </span>
                                     </EuiI18n>
                                   </EuiInnerText>
@@ -2806,7 +2806,7 @@ exports[`Traces table component renders traces table 1`] = `
                             key="_data_column_latency_0_2"
                             mobileOptions={
                               Object {
-                                "header": "Latency (ms)",
+                                "header": "Duration (ms)",
                                 "render": undefined,
                               }
                             }
@@ -2825,7 +2825,7 @@ exports[`Traces table component renders traces table 1`] = `
                               <div
                                 className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                               >
-                                Latency (ms)
+                                Duration (ms)
                               </div>
                               <div
                                 className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText"

From ebd73810f42004c7596bc06ce0a87553138abf9a Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Mon, 17 Jul 2023 11:01:34 -0400
Subject: [PATCH 10/26] remove dashboard from app analytics

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../components/application.tsx                | 24 -------------------
 1 file changed, 24 deletions(-)

diff --git a/public/components/application_analytics/components/application.tsx b/public/components/application_analytics/components/application.tsx
index 9e1186324..d5ba1b8fe 100644
--- a/public/components/application_analytics/components/application.tsx
+++ b/public/components/application_analytics/components/application.tsx
@@ -284,25 +284,6 @@ export function Application(props: AppDetailProps) {
     },
   ];
 
-  const getOverview = () => {
-    return (
-      <>
-        <EuiSpacer size="m" />
-        <DashboardContent
-          {...props}
-          page="app"
-          startTime={appStartTime}
-          endTime={appEndTime}
-          setStartTime={setStartTimeForApp}
-          setEndTime={setEndTimeForApp}
-          parentBreadcrumb={parentBreadcrumbs[0]}
-          childBreadcrumbs={childBreadcrumbs}
-          toasts={toasts}
-        />
-      </>
-    );
-  };
-
   const nameColumnAction = (item: any) => openServiceFlyout(item);
   const traceColumnAction = () => switchToTrace();
 
@@ -497,11 +478,6 @@ export function Application(props: AppDetailProps) {
   }
 
   const appAnalyticsTabs = [
-    getAppAnalyticsTab({
-      tabId: TAB_OVERVIEW_ID,
-      tabTitle: TAB_OVERVIEW_TITLE,
-      getContent: () => getOverview(),
-    }),
     getAppAnalyticsTab({
       tabId: TAB_SERVICE_ID,
       tabTitle: TAB_SERVICE_TITLE,

From 74fd3f7ed205c7774ddc978d20491d54b738b8fa Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 19 Jul 2023 13:23:40 -0400
Subject: [PATCH 11/26] fix up with tests

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../4_trace_analytics_dashboard.spec.js       | 14 ++++--------
 .../5_trace_analytics_services.spec.js        | 22 +++++++++----------
 .../6_trace_analytics_traces.spec.js          |  4 +---
 .cypress/integration/7_app_analytics.spec.js  | 20 ++++++++---------
 .cypress/utils/constants.js                   |  2 +-
 .../components/services/services_content.tsx  |  7 +++---
 .../requests/request_handler.ts               |  2 +-
 7 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/.cypress/integration/4_trace_analytics_dashboard.spec.js b/.cypress/integration/4_trace_analytics_dashboard.spec.js
index 656ac7e98..4e0ff3eee 100644
--- a/.cypress/integration/4_trace_analytics_dashboard.spec.js
+++ b/.cypress/integration/4_trace_analytics_dashboard.spec.js
@@ -6,6 +6,9 @@
 /// <reference types="cypress" />
 
 import { testDataSet, delay, setTimeFilter, jaegerTestDataSet } from '../utils/constants';
+import { suppressResizeObserverIssue } from '../utils/constants';
+
+suppressResizeObserverIssue();//needs to be in file once
 
 describe('Dump test data', () => {
   it('Indexes test data', () => {
@@ -88,6 +91,7 @@ describe('Testing dashboard table', () => {
       },
     });
     setTimeFilter();
+    cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click();
   });
 
   it('Renders the dashboard table', () => {
@@ -97,15 +101,6 @@ describe('Testing dashboard table', () => {
     cy.contains('7.14%').should('exist');
   });
 
-  it('Has working breadcrumbs', () => {
-    cy.get('.euiBreadcrumb').contains('Dashboard').click();
-    cy.get('.euiTitle').contains('Dashboard').should('exist');
-    cy.get('.euiBreadcrumb').contains('Trace analytics').click();
-    cy.get('.euiTitle').contains('Dashboard').should('exist');
-    cy.get('.euiBreadcrumb').contains('Observability').click();
-    cy.get('.euiTitle').contains('Logs').should('exist');
-  });
-
   it('Adds the percentile filters', () => {
     cy.contains(' >= 95 percentile').click({ force: true });
     cy.contains(' >= 95 percentile').click({ force: true });
@@ -131,7 +126,6 @@ describe('Testing dashboard table', () => {
   it('Redirects to traces table with filter', () => {
     cy.get('.euiLink').contains('13').click();
 
-    cy.get('h2.euiTitle').contains('Traces').should('exist');
     cy.contains(' (13)').should('exist');
     cy.contains('client_create_order').should('exist');
 
diff --git a/.cypress/integration/5_trace_analytics_services.spec.js b/.cypress/integration/5_trace_analytics_services.spec.js
index 7e0296661..52a5aecd5 100644
--- a/.cypress/integration/5_trace_analytics_services.spec.js
+++ b/.cypress/integration/5_trace_analytics_services.spec.js
@@ -6,6 +6,9 @@
 /// <reference types="cypress" />
 
 import { delay, SERVICE_NAME, SERVICE_SPAN_ID, setTimeFilter, verify_traces_spans_data_grid_cols_exists, count_table_row } from '../utils/constants';
+import { suppressResizeObserverIssue } from '../utils/constants';
+
+suppressResizeObserverIssue();//needs to be in file once
 
 describe('Testing services table empty state', () => {
   beforeEach(() => {
@@ -49,9 +52,9 @@ describe('Testing services table', () => {
   it('Verify columns in Services table', () => {
     cy.get('.euiFlexItem.euiFlexItem--flexGrow10 .panel-title').contains('Services').should('exist');
     cy.get('.euiTableCellContent__text[title="Name"]').should('exist');
-    cy.get('.euiTableCellContent__text[title="Average latency (ms)"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Average duration (ms)"]').should('exist');
     cy.get('.euiTableCellContent__text[title="Error rate"]').should('exist');
-    cy.get('.euiTableCellContent__text[title="Throughput"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Rate"]').should('exist');
     cy.get('.euiTableCellContent__text[title="No. of connected services"]').should('exist');
     cy.get('.euiTableCellContent__text[title="Connected services"]').should('exist');
     cy.get('.euiTableCellContent__text[title="Traces"]').should('exist');
@@ -110,9 +113,7 @@ describe('Testing service view', () => {
     cy.get('.euiBreadcrumb').contains(SERVICE_NAME).click();
     cy.get('h2.euiTitle').contains(SERVICE_NAME).should('exist');
     cy.get('.euiBreadcrumb').contains('Services').click();
-    cy.get('.euiTitle').contains('Services').should('exist');
     cy.get('.euiBreadcrumb').contains('Trace analytics').click();
-    cy.get('.euiTitle').contains('Dashboard').should('exist');
     cy.get('.euiBreadcrumb').contains('Observability').click();
     cy.get('.euiTitle').contains('Logs').should('exist');
   });
@@ -144,9 +145,9 @@ describe('Testing Service map', () => {
     cy.get('.euiText.euiText--medium .panel-title').contains('Service map');
     cy.get('[data-test-subj="latency"]').should('exist');
     cy.get('.ytitle').contains('Latency (ms)');
-    cy.get('[data-text = "Error rate"]').click();
+    cy.get('[data-text = "Errors"]').click();
     cy.contains('60%');
-    cy.get('[data-text = "Throughput"]').click();
+    cy.get('[data-text = "Duration"]').click();
     cy.contains('100');
     cy.get('.euiText.euiText--medium').contains('Focus on').should('exist');
     cy.get('[placeholder="Service name"]').focus().type('database{enter}');
@@ -242,12 +243,12 @@ describe('Testing traces Spans table and verify columns functionality', () => {
     cy.get('[data-test-subj="spanDetailFlyout"] .euiTitle.euiTitle--medium').contains('Span detail').should('exist');
     cy.get('.euiFlyoutBody .panel-title').contains('Overview').should('exist');
     cy.get('.euiTextColor.euiTextColor--subdued').contains('Span ID').should('exist');
-    cy.get('[data-test-subj="parentSpanId"]').contains('d03fecfa0f55b77c').should('exist');
+    cy.get('[data-test-subj="parentSpanId"]').contains('e9e09c3ce939b488').should('exist');
     cy.get('.euiFlyoutBody__overflowContent .panel-title').contains('Span attributes').should('exist');
     cy.get('.euiDescriptionList__description .euiFlexItem').eq(0).trigger('mouseover').click();
     cy.get('[aria-label="span-flyout-filter-icon"]').click();
     cy.get('.euiFlyout__closeButton.euiFlyout__closeButton--inside').click();
-    cy.get('.euiBadge__content .euiBadge__text').contains('spanId: 277a5934acf55dcf').should('exist');
+    cy.get('.euiBadge__content .euiBadge__text').contains('spanId: d03fecfa0f55b77c').should('exist');
     count_table_row(1);
     cy.get('[aria-label="remove current filter"]').click();
     count_table_row(8);
@@ -284,16 +285,15 @@ describe('Testing switch mode to jaeger', () => {
     cy.contains('310.29').should('exist');
     cy.contains('0%').should('exist');
     cy.contains('Name').should('exist');
-    cy.contains('Average latency (ms)').should('exist');
+    cy.contains('Average duration (ms)').should('exist');
     cy.contains('Error rate').should('exist');
-    cy.contains('Throughput').should('exist');
+    cy.contains('Rate').should('exist');
     cy.contains('Traces').should('exist');
   });
 
   it('Verifies traces links to traces page with filter applied', () => {
     cy.get('.euiTableRow').should('have.length.lessThan', 7);//Replaces Wait
     cy.get('.euiLink').contains('7').click();
-    cy.get('h2.euiTitle').contains('Traces').should('exist');
     cy.contains(' (7)').should('exist');
     cy.get("[data-test-subj='filterBadge']").eq(0).contains('process.serviceName: customer')
   })
diff --git a/.cypress/integration/6_trace_analytics_traces.spec.js b/.cypress/integration/6_trace_analytics_traces.spec.js
index c3ca6f339..336f5b6ff 100644
--- a/.cypress/integration/6_trace_analytics_traces.spec.js
+++ b/.cypress/integration/6_trace_analytics_traces.spec.js
@@ -87,9 +87,7 @@ describe('Testing trace view', () => {
     cy.get(`.euiBreadcrumb[href="#/traces/${TRACE_ID}"]`).click();
     cy.get('h2.euiTitle').contains(TRACE_ID).should('exist');
     cy.get('.euiBreadcrumb[href="#/traces"]').click();
-    cy.get('.euiTitle').contains('Traces').should('exist');
     cy.get('.euiBreadcrumb[href="#/"]').click();
-    cy.get('.euiTitle').contains('Dashboard').should('exist');
     cy.get('.euiBreadcrumb[href="observability-logs#/"]').click();
     cy.get('.euiTitle').contains('Logs').should('exist');
   });
@@ -125,7 +123,7 @@ describe('Testing traces table', () => {
   it('Renders the traces table and verify Table Column, Pagination and Rows Data ', () => {
     cy.get('.euiTableCellContent__text').contains('Trace ID').should('exist');
     cy.get('.euiTableCellContent__text').contains('Trace group').should('exist');
-    cy.get('.euiTableCellContent__text').contains('Latency (ms)').should('exist');
+    cy.get('.euiTableCellContent__text').contains('Duration (ms)').should('exist');
     cy.get('.euiTableCellContent__text').contains('Percentile in trace group').should('exist');
     cy.get('.euiTableCellContent__text').contains('Errors').should('exist');
     cy.get('.euiTableCellContent__text').contains('Last updated').should('exist');
diff --git a/.cypress/integration/7_app_analytics.spec.js b/.cypress/integration/7_app_analytics.spec.js
index d3ee0ef8f..b24d22034 100644
--- a/.cypress/integration/7_app_analytics.spec.js
+++ b/.cypress/integration/7_app_analytics.spec.js
@@ -204,17 +204,14 @@ describe('Setting availability', () => {
     cy.wait(delay);//needed for page to create correctly
     cy.get('[data-test-subj="createAndSetButton"]').click({ force: true });
     cy.get('.euiTableRow').should('have.length.lessThan', 1);
-    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree);
     cy.get('.euiBreadcrumb[href="#/"]').click();
     cy.get('[data-test-subj="setAvailabilityHomePageLink"]').first().click();
-    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree);
     cy.get('.euiTab-isSelected[id="app-analytics-log"]').should('exist', { timeout: timeoutDelay });
     cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain.value', availability_default);
     cy.get('[id="explorerPlotComponent"]').should('exist');
     cy.get('.euiTab-isSelected[id="availability-panel"]').should('exist');
     cy.get('.euiBreadcrumb[href="#/"]').click();
     cy.get(`[data-test-subj="${nameThree}ApplicationLink"]`).click();
-    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree);
     cy.get('[data-test-subj="app-analytics-configTab"]').click();
     cy.get('[data-test-subj="setAvailabilityConfigLink"]').click();
     cy.get('.euiTab-isSelected[id="app-analytics-log"]').should('exist', { timeout: timeoutDelay });
@@ -226,13 +223,12 @@ describe('Setting availability', () => {
 
 describe('Viewing application', () => {
   beforeEach(() => {
-    moveToApplication(nameOne);
+    moveToApplication(nameThree);
   });
 
   it('Has working breadcrumbs', () => {
     cy.wait(delay);//List not loading without
-    cy.get('.euiBreadcrumb').contains(nameOne).click();
-    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne);
+    cy.get('.euiBreadcrumb').contains(nameThree).click();
     cy.get('.euiBreadcrumb[href="#/"]').click();
     cy.get('[data-test-subj="applicationHomePageTitle"]').should('contain', 'Applications');
     cy.get('.euiBreadcrumb[href="observability-logs#/"]').click();
@@ -253,7 +249,8 @@ describe('Viewing application', () => {
   });
 
   it('Shows latency variance in dashboards table', () => {
-    changeTimeTo24('months');
+    changeTimeTo24('years');
+    cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click();
     cy.get('[data-test-subj="dashboardTable"]').first().within(($table) => {
       cy.get('.plot-container').should('have.length.at.least', 1);
     })
@@ -261,11 +258,10 @@ describe('Viewing application', () => {
 
   it('Adds filter when Trace group name is clicked', () => {
     cy.wait(delay);//List not loading without
-    cy.get('[data-test-subj="app-analytics-overviewTab"]').click();
+    cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click();
     cy.get('[data-test-subj="dashboard-table-trace-group-name-button"]').contains('client_create_order').click();
-    cy.get('.euiTableRow').should('have.length', 1, { timeout: timeoutDelay });
     cy.get('[data-test-subj="client_create_orderFilterBadge"]').should('exist');
-    cy.get('[data-test-subj="filterBadge"]').click();
+    cy.get('[data-test-subj="filterBadge"]').eq(1).click();
     cy.get('[data-test-subj="deleteFilterIcon"]').click();
     cy.get('[data-test-subj="client_create_orderFilterBadge"]').should('not.exist');
   });
@@ -276,7 +272,7 @@ describe('Viewing application', () => {
     cy.get('[data-test-subj="serviceDetailFlyoutTitle"]').should('be.visible');
     cy.get('[data-test-subj="serviceDetailFlyout"]').within(($flyout) => {
       cy.get('[data-test-subj="Number of connected servicesDescriptionList"]').should('contain', '3');
-      cy.get('[data-text="Error rate"]').click();
+      cy.get('[data-text="Errors"]').click();
       cy.get('.ytitle').contains('Error rate').should('exist');
     });
     cy.get('[data-test-subj="dataGridRowCell"] button').contains('718dc32a693c8a17').click();
@@ -307,6 +303,7 @@ describe('Viewing application', () => {
   it('Opens span detail flyout when Span ID is clicked', () => {
     cy.get('[data-test-subj="app-analytics-traceTab"]').click();
     cy.wait(delay);
+    cy.get('input[type="search"]').focus().type(`5ff3516909562c60`);
     cy.get('[data-test-subj="dataGridRowCell"]').contains('5ff3516909562c60').click();
     cy.get('[data-test-subj="spanDetailFlyout"]').should('be.visible');
     cy.get('[data-test-subj="spanDetailFlyout"]').within(($flyout) => {
@@ -543,6 +540,7 @@ describe('Editing application', () => {
   });
 });
 
+
 describe('Application Analytics home page', () => {
   beforeEach(() => {
     moveToHomePage();
diff --git a/.cypress/utils/constants.js b/.cypress/utils/constants.js
index 515cb4bb2..f7c46f10b 100644
--- a/.cypress/utils/constants.js
+++ b/.cypress/utils/constants.js
@@ -10,7 +10,7 @@ export const COMMAND_TIMEOUT_LONG = 10000;
 export const TRACE_ID = '8832ed6abbb2a83516461960c89af49d';
 export const SPAN_ID = 'a673bc074b438374';
 export const SERVICE_NAME = 'frontend-client';
-export const SERVICE_SPAN_ID = '7df5609a6d104736';
+export const SERVICE_SPAN_ID = 'e275ac9d21929e9b';
 
 export const testDataSet = [
   {
diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx
index 52dc5b6a0..370520d86 100644
--- a/public/components/trace_analytics/components/services/services_content.tsx
+++ b/public/components/trace_analytics/components/services/services_content.tsx
@@ -135,8 +135,8 @@ export function ServicesContent(props: ServicesProps) {
   };
 
   const dashboardContent = () => {
-    return  <DashboardContent {...props} />
-  }
+    return <DashboardContent {...props} />;
+  };
 
   return (
     <>
@@ -183,9 +183,10 @@ export function ServicesContent(props: ServicesProps) {
       <EuiPanel>
         <EuiAccordion
           id="accordion1"
-          buttonContent={mode === 'data_prepper' ? "Trace Groups" : "Service and Operations"}
+          buttonContent={mode === 'data_prepper' ? 'Trace Groups' : 'Service and Operations'}
           forceState={trigger}
           onToggle={onToggle}
+          data-test-subj="trace-groups-service-operation-accordian"
         >
           <EuiSpacer size="m" />
           {trigger === 'open' && dashboardContent()}
diff --git a/public/components/trace_analytics/requests/request_handler.ts b/public/components/trace_analytics/requests/request_handler.ts
index 0667ade43..2d3191a02 100644
--- a/public/components/trace_analytics/requests/request_handler.ts
+++ b/public/components/trace_analytics/requests/request_handler.ts
@@ -34,7 +34,7 @@ export async function handleDslRequest(
     body = { ...bodyQuery, index: mode === 'jaeger' ? JAEGER_INDEX_NAME : DATA_PREPPER_INDEX_NAME };
   }
   if (timeout) {
-    const id = setTimeout(() => setShowTimeoutToast!(), 3);
+    const id = setTimeout(() => setShowTimeoutToast!(), 30000);
 
     try {
       return await http.post(TRACE_ANALYTICS_DSL_ROUTE, {

From dcdcb95a88472c8b2a3b3c700fe0edcadf257571 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 19 Jul 2023 14:44:24 -0400
Subject: [PATCH 12/26] fix test

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .cypress/integration/5_trace_analytics_services.spec.js   | 8 ++++----
 .cypress/integration/7_app_analytics.spec.js              | 8 ++++++--
 .../__tests__/__snapshots__/services.test.tsx.snap        | 6 ++++++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/.cypress/integration/5_trace_analytics_services.spec.js b/.cypress/integration/5_trace_analytics_services.spec.js
index 52a5aecd5..c22e1f54f 100644
--- a/.cypress/integration/5_trace_analytics_services.spec.js
+++ b/.cypress/integration/5_trace_analytics_services.spec.js
@@ -236,19 +236,19 @@ describe('Testing traces Spans table and verify columns functionality', () => {
     setTimeFilter();
   });
 
-  it('Renders the spans table and click on first span to verify details', () => {
+  it.only('Renders the spans table and click on first span to verify details', () => {
     cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
     verify_traces_spans_data_grid_cols_exists();
-    cy.get('.euiLink--primary').eq(4).click();
+    cy.contains('277a5934acf55dcf').click();
     cy.get('[data-test-subj="spanDetailFlyout"] .euiTitle.euiTitle--medium').contains('Span detail').should('exist');
     cy.get('.euiFlyoutBody .panel-title').contains('Overview').should('exist');
     cy.get('.euiTextColor.euiTextColor--subdued').contains('Span ID').should('exist');
-    cy.get('[data-test-subj="parentSpanId"]').contains('e9e09c3ce939b488').should('exist');
+    cy.get('[data-test-subj="parentSpanId"]').contains('d03fecfa0f55b77c').should('exist');
     cy.get('.euiFlyoutBody__overflowContent .panel-title').contains('Span attributes').should('exist');
     cy.get('.euiDescriptionList__description .euiFlexItem').eq(0).trigger('mouseover').click();
     cy.get('[aria-label="span-flyout-filter-icon"]').click();
     cy.get('.euiFlyout__closeButton.euiFlyout__closeButton--inside').click();
-    cy.get('.euiBadge__content .euiBadge__text').contains('spanId: d03fecfa0f55b77c').should('exist');
+    cy.get('.euiBadge__content .euiBadge__text').contains('spanId: 277a5934acf55dcf').should('exist');
     count_table_row(1);
     cy.get('[aria-label="remove current filter"]').click();
     count_table_row(8);
diff --git a/.cypress/integration/7_app_analytics.spec.js b/.cypress/integration/7_app_analytics.spec.js
index b24d22034..1e50d76aa 100644
--- a/.cypress/integration/7_app_analytics.spec.js
+++ b/.cypress/integration/7_app_analytics.spec.js
@@ -204,14 +204,17 @@ describe('Setting availability', () => {
     cy.wait(delay);//needed for page to create correctly
     cy.get('[data-test-subj="createAndSetButton"]').click({ force: true });
     cy.get('.euiTableRow').should('have.length.lessThan', 1);
+    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree);
     cy.get('.euiBreadcrumb[href="#/"]').click();
     cy.get('[data-test-subj="setAvailabilityHomePageLink"]').first().click();
+    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree);
     cy.get('.euiTab-isSelected[id="app-analytics-log"]').should('exist', { timeout: timeoutDelay });
     cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain.value', availability_default);
     cy.get('[id="explorerPlotComponent"]').should('exist');
     cy.get('.euiTab-isSelected[id="availability-panel"]').should('exist');
     cy.get('.euiBreadcrumb[href="#/"]').click();
     cy.get(`[data-test-subj="${nameThree}ApplicationLink"]`).click();
+    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree);
     cy.get('[data-test-subj="app-analytics-configTab"]').click();
     cy.get('[data-test-subj="setAvailabilityConfigLink"]').click();
     cy.get('.euiTab-isSelected[id="app-analytics-log"]').should('exist', { timeout: timeoutDelay });
@@ -223,12 +226,13 @@ describe('Setting availability', () => {
 
 describe('Viewing application', () => {
   beforeEach(() => {
-    moveToApplication(nameThree);
+    moveToApplication(nameOne);
   });
 
   it('Has working breadcrumbs', () => {
     cy.wait(delay);//List not loading without
-    cy.get('.euiBreadcrumb').contains(nameThree).click();
+    cy.get('.euiBreadcrumb').contains(nameOne).click();
+    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne);
     cy.get('.euiBreadcrumb[href="#/"]').click();
     cy.get('[data-test-subj="applicationHomePageTitle"]').should('contain', 'Applications');
     cy.get('.euiBreadcrumb[href="observability-logs#/"]').click();
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 563c56097..0eff8994e 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
@@ -1887,6 +1887,7 @@ exports[`Services component renders empty services page 1`] = `
         <EuiAccordion
           arrowDisplay="left"
           buttonContent="Trace Groups"
+          data-test-subj="trace-groups-service-operation-accordian"
           forceState="closed"
           id="accordion1"
           initialIsOpen={false}
@@ -1897,6 +1898,7 @@ exports[`Services component renders empty services page 1`] = `
         >
           <div
             className="euiAccordion"
+            data-test-subj="trace-groups-service-operation-accordian"
             onToggle={[Function]}
           >
             <div
@@ -3373,6 +3375,7 @@ exports[`Services component renders jaeger services page 1`] = `
         <EuiAccordion
           arrowDisplay="left"
           buttonContent="Service and Operations"
+          data-test-subj="trace-groups-service-operation-accordian"
           forceState="closed"
           id="accordion1"
           initialIsOpen={false}
@@ -3383,6 +3386,7 @@ exports[`Services component renders jaeger services page 1`] = `
         >
           <div
             className="euiAccordion"
+            data-test-subj="trace-groups-service-operation-accordian"
             onToggle={[Function]}
           >
             <div
@@ -5387,6 +5391,7 @@ exports[`Services component renders services page 1`] = `
         <EuiAccordion
           arrowDisplay="left"
           buttonContent="Trace Groups"
+          data-test-subj="trace-groups-service-operation-accordian"
           forceState="closed"
           id="accordion1"
           initialIsOpen={false}
@@ -5397,6 +5402,7 @@ exports[`Services component renders services page 1`] = `
         >
           <div
             className="euiAccordion"
+            data-test-subj="trace-groups-service-operation-accordian"
             onToggle={[Function]}
           >
             <div

From 1a6296463fb1fe40c33e0b3d9e38c0a85f10b06e Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 19 Jul 2023 14:51:45 -0400
Subject: [PATCH 13/26] revert only and extract to constant

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .cypress/integration/5_trace_analytics_services.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.cypress/integration/5_trace_analytics_services.spec.js b/.cypress/integration/5_trace_analytics_services.spec.js
index c22e1f54f..b2d8fb976 100644
--- a/.cypress/integration/5_trace_analytics_services.spec.js
+++ b/.cypress/integration/5_trace_analytics_services.spec.js
@@ -5,7 +5,7 @@
 
 /// <reference types="cypress" />
 
-import { delay, SERVICE_NAME, SERVICE_SPAN_ID, setTimeFilter, verify_traces_spans_data_grid_cols_exists, count_table_row } from '../utils/constants';
+import { delay, SERVICE_NAME, SERVICE_SPAN_ID, setTimeFilter, verify_traces_spans_data_grid_cols_exists, count_table_row, AUTH_SERVICE_SPAN_ID } from '../utils/constants';
 import { suppressResizeObserverIssue } from '../utils/constants';
 
 suppressResizeObserverIssue();//needs to be in file once
@@ -236,10 +236,10 @@ describe('Testing traces Spans table and verify columns functionality', () => {
     setTimeFilter();
   });
 
-  it.only('Renders the spans table and click on first span to verify details', () => {
+  it('Renders the spans table and click on first span to verify details', () => {
     cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
     verify_traces_spans_data_grid_cols_exists();
-    cy.contains('277a5934acf55dcf').click();
+    cy.contains(AUTH_SERVICE_SPAN_ID).click();
     cy.get('[data-test-subj="spanDetailFlyout"] .euiTitle.euiTitle--medium').contains('Span detail').should('exist');
     cy.get('.euiFlyoutBody .panel-title').contains('Overview').should('exist');
     cy.get('.euiTextColor.euiTextColor--subdued').contains('Span ID').should('exist');

From 3f9401eca50e31d4906c95643491141c597b5015 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 19 Jul 2023 14:52:33 -0400
Subject: [PATCH 14/26] add auth const

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .cypress/utils/constants.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.cypress/utils/constants.js b/.cypress/utils/constants.js
index f7c46f10b..b3743e83c 100644
--- a/.cypress/utils/constants.js
+++ b/.cypress/utils/constants.js
@@ -11,6 +11,7 @@ export const TRACE_ID = '8832ed6abbb2a83516461960c89af49d';
 export const SPAN_ID = 'a673bc074b438374';
 export const SERVICE_NAME = 'frontend-client';
 export const SERVICE_SPAN_ID = 'e275ac9d21929e9b';
+export const AUTH_SERVICE_SPAN_ID = '277a5934acf55dcf';
 
 export const testDataSet = [
   {

From a35079155159d19dc2e04bb51fcd36c976c2851e Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 19 Jul 2023 15:08:46 -0400
Subject: [PATCH 15/26] address self-PR review

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../dashboard/dashboard_content.tsx           | 10 +-------
 .../components/services/service_view.tsx      |  2 +-
 .../components/services/services.tsx          |  6 -----
 .../components/traces/traces.tsx              |  5 +---
 public/components/trace_analytics/home.tsx    | 16 -------------
 .../requests/dashboard_request_handler.ts     |  2 +-
 .../requests/queries/services_queries.ts      | 23 -------------------
 .../requests/services_request_handler.ts      | 19 ---------------
 8 files changed, 4 insertions(+), 79 deletions(-)

diff --git a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
index fa47b2920..97ec3eea6 100644
--- a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
+++ b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
@@ -55,7 +55,6 @@ export function DashboardContent(props: DashboardProps) {
     dataPrepperIndicesExist,
     jaegerIndicesExist,
     toasts,
-    // setToast,
   } = props;
   const [tableItems, setTableItems] = useState([]);
   const [jaegerTableItems, setJaegerTableItems] = useState([]);
@@ -209,13 +208,6 @@ export function DashboardContent(props: DashboardProps) {
       serviceMapDSL.query.bool.must = serviceMapDSL.query.bool.must.filter(
         (must: any) => must?.term?.serviceName == null
       );
-      // handleServiceMapRequest(
-      //   http,
-      //   serviceMapDSL,
-      //   mode,
-      //   setServiceMap,
-      //   currService || filteredService
-      // );
     }
 
     handleDashboardThroughputPltRequest(
@@ -329,7 +321,7 @@ export function DashboardContent(props: DashboardProps) {
               <EuiSpacer />
               <EuiFlexGroup alignItems="baseline">
                 <EuiFlexItem>
-                  <EuiFlexGroup direction="row">
+                  <EuiFlexGroup direction="column">
                     <EuiFlexItem>
                       <ErrorRatePlt
                         items={errorRatePltItems}
diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
index ac4875526..2faa77885 100644
--- a/public/components/trace_analytics/components/services/service_view.tsx
+++ b/public/components/trace_analytics/components/services/service_view.tsx
@@ -65,7 +65,7 @@ export function ServiceView(props: ServiceViewProps) {
       props.parentBreadcrumb,
       {
         text: 'Trace analytics',
-        href: '#/home',
+        href: '#/',
       },
       {
         text: 'Services',
diff --git a/public/components/trace_analytics/components/services/services.tsx b/public/components/trace_analytics/components/services/services.tsx
index 351b096d1..2029cdfb8 100644
--- a/public/components/trace_analytics/components/services/services.tsx
+++ b/public/components/trace_analytics/components/services/services.tsx
@@ -17,12 +17,6 @@ export interface ServicesProps extends TraceAnalyticsComponentDeps {
   traceColumnAction: any;
   page: 'services' | 'app';
   toasts: Toast[];
-  setToast?: (
-    title: string,
-    color?: string,
-    text?: React.ReactChild | undefined,
-    side?: string | undefined
-  ) => void;
 }
 
 export function Services(props: ServicesProps) {
diff --git a/public/components/trace_analytics/components/traces/traces.tsx b/public/components/trace_analytics/components/traces/traces.tsx
index 3d692c416..b000a3954 100644
--- a/public/components/trace_analytics/components/traces/traces.tsx
+++ b/public/components/trace_analytics/components/traces/traces.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiBreadcrumb, EuiTitle } from '@elastic/eui';
+import { EuiBreadcrumb } from '@elastic/eui';
 import React from 'react';
 import { TraceAnalyticsComponentDeps } from '../../home';
 import { DataSourcePicker } from '../dashboard/mode_picker';
@@ -18,9 +18,6 @@ export interface TracesProps extends TraceAnalyticsComponentDeps {
 export function Traces(props: TracesProps) {
   return (
     <>
-      {/* <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/home.tsx b/public/components/trace_analytics/home.tsx
index 5f7f148ac..8ef40ffec 100644
--- a/public/components/trace_analytics/home.tsx
+++ b/public/components/trace_analytics/home.tsx
@@ -175,21 +175,6 @@ export const Home = (props: HomeProps) => {
         toastLifeTimeMs={6000}
       />
       <HashRouter>
-        {/* <Route
-          exact
-          path={['/']}
-          render={(routerProps) => (
-            <TraceSideBar>
-              <Dashboard
-                page="dashboard"
-                childBreadcrumbs={dashboardBreadcrumbs}
-                {...commonProps}
-                setToast={setToast}
-                toasts={toasts}
-              />
-            </TraceSideBar>
-          )}
-        /> */}
         <Route
           exact
           path="/traces"
@@ -226,7 +211,6 @@ export const Home = (props: HomeProps) => {
                 childBreadcrumbs={serviceBreadcrumbs}
                 nameColumnAction={nameColumnAction}
                 traceColumnAction={traceColumnAction}
-                setToast={setToast}
                 toasts={toasts}
                 {...commonProps}
               />
diff --git a/public/components/trace_analytics/requests/dashboard_request_handler.ts b/public/components/trace_analytics/requests/dashboard_request_handler.ts
index b1054676e..253fab1b3 100644
--- a/public/components/trace_analytics/requests/dashboard_request_handler.ts
+++ b/public/components/trace_analytics/requests/dashboard_request_handler.ts
@@ -105,7 +105,7 @@ export const handleDashboardRequest = async (
     })
     .catch((error) => console.error(error));
 
-  await handleDslRequest(http, DSL, getDashboardQuery(), mode)
+  await handleDslRequest(http, DSL, getDashboardQuery(), mode, true, setShowTimeoutToast)
     .then((response) => {
       return Promise.all(
         response.aggregations.trace_group_name.buckets.map((bucket) => {
diff --git a/public/components/trace_analytics/requests/queries/services_queries.ts b/public/components/trace_analytics/requests/queries/services_queries.ts
index 82ea27681..46ee1e30d 100644
--- a/public/components/trace_analytics/requests/queries/services_queries.ts
+++ b/public/components/trace_analytics/requests/queries/services_queries.ts
@@ -13,29 +13,6 @@ import { getServiceMapTargetResources } from '../../components/common/helper_fun
 import { ServiceObject } from '../../components/common/plots/service_map';
 import { TraceAnalyticsMode } from '../../home';
 
-export const getTraceGroupsQuery = () => {
-  const query = {
-    size: 0,
-    query:{
-      bool: {
-        must: [],
-        filter: [],
-        should: [],
-        must_not: [],
-      }
-    },
-    aggs: {
-      traceGroup: {
-        terms: {
-          field: "traceGroup",
-          size: 500
-        }
-      }
-    }
-  }
-  return query;
-}
-
 export const getServicesQuery = (mode: TraceAnalyticsMode, serviceName: string | undefined, DSL?: any) => {
   const query = {
     size: 0,
diff --git a/public/components/trace_analytics/requests/services_request_handler.ts b/public/components/trace_analytics/requests/services_request_handler.ts
index c25558937..2c0152dff 100644
--- a/public/components/trace_analytics/requests/services_request_handler.ts
+++ b/public/components/trace_analytics/requests/services_request_handler.ts
@@ -14,7 +14,6 @@ import {
   getServiceMetricsQuery,
   getServiceNodesQuery,
   getServicesQuery,
-  getTraceGroupsQuery,
 } from './queries/services_queries';
 import { handleDslRequest } from './request_handler';
 import { HttpSetup } from '../../../../../../src/core/public';
@@ -57,24 +56,6 @@ export const handleServicesRequest = async (
     .catch((error) => console.error(error));
 };
 
-export const handleTraceGroupsRequest = async (
-  http: HttpSetup,
-  DSL: any,
-  mode: TraceAnalyticsMode,
-  setItems: any,
-) => {
-  return handleDslRequest(http, DSL, getTraceGroupsQuery(), mode)
-    .then ((response) => {
-      return response.aggregations.traceGroup.buckets.map((bucket: any) => {
-        return {label: bucket.key}
-      })
-    })
-    .then((newItems) => {
-      setItems(newItems);
-    })
-    .catch((error) => console.error(error));
-};
-
 export const handleServiceMapRequest = async (
   http: HttpSetup,
   DSL: DSLService | any,

From 7b5f791d0ad911a940215acbec523c7b5ff3a74c Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 19 Jul 2023 15:11:36 -0400
Subject: [PATCH 16/26] remove unecessary code

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 public/components/trace_analytics/home.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/public/components/trace_analytics/home.tsx b/public/components/trace_analytics/home.tsx
index 8ef40ffec..3fa8dfc11 100644
--- a/public/components/trace_analytics/home.tsx
+++ b/public/components/trace_analytics/home.tsx
@@ -101,17 +101,6 @@ export const Home = (props: HomeProps) => {
     }
   }, [jaegerIndicesExist, dataPrepperIndicesExist]);
 
-  const dashboardBreadcrumbs = [
-    {
-      text: 'Trace analytics',
-      href: '#/',
-    },
-    {
-      text: 'Dashboard',
-      href: '#/',
-    },
-  ];
-
   const serviceBreadcrumbs = [
     {
       text: 'Trace analytics',

From 829e2ac94b82ec661fb82ef77035f44b2efe74d4 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 19 Jul 2023 15:20:52 -0400
Subject: [PATCH 17/26] change timeout to 25 seconds

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 public/components/trace_analytics/requests/request_handler.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/components/trace_analytics/requests/request_handler.ts b/public/components/trace_analytics/requests/request_handler.ts
index 2d3191a02..e5ba11707 100644
--- a/public/components/trace_analytics/requests/request_handler.ts
+++ b/public/components/trace_analytics/requests/request_handler.ts
@@ -34,7 +34,7 @@ export async function handleDslRequest(
     body = { ...bodyQuery, index: mode === 'jaeger' ? JAEGER_INDEX_NAME : DATA_PREPPER_INDEX_NAME };
   }
   if (timeout) {
-    const id = setTimeout(() => setShowTimeoutToast!(), 30000);
+    const id = setTimeout(() => setShowTimeoutToast!(), 25000); // 25 seconds
 
     try {
       return await http.post(TRACE_ANALYTICS_DSL_ROUTE, {

From ec4704b65112423c87f754f234595e164a754386 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Thu, 20 Jul 2023 10:49:30 -0400
Subject: [PATCH 18/26] change to row in accordian

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../trace_analytics/components/dashboard/dashboard_content.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
index 97ec3eea6..9cac1abd4 100644
--- a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
+++ b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
@@ -321,7 +321,7 @@ export function DashboardContent(props: DashboardProps) {
               <EuiSpacer />
               <EuiFlexGroup alignItems="baseline">
                 <EuiFlexItem>
-                  <EuiFlexGroup direction="column">
+                  <EuiFlexGroup direction="row">
                     <EuiFlexItem>
                       <ErrorRatePlt
                         items={errorRatePltItems}

From 45b61631cdcf7399672c0c44c8a61aa4966ea481 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Mon, 28 Aug 2023 14:52:18 -0400
Subject: [PATCH 19/26] update labels and tests

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../__snapshots__/create.test.tsx.snap        | 96 +++++++++----------
 .../service_config.test.tsx.snap              | 36 +++----
 .../components/common/helper_functions.tsx    | 16 ++--
 .../__snapshots__/service_map.test.tsx.snap   |  2 +-
 .../service_map_scale.test.tsx.snap           |  4 +-
 .../components/common/plots/service_map.tsx   |  2 +-
 .../common/plots/service_map_scale.tsx        | 10 +-
 .../__snapshots__/service_view.test.tsx.snap  |  4 +-
 .../__snapshots__/services.test.tsx.snap      | 36 +++----
 .../services_table.test.tsx.snap              | 32 +++----
 .../components/services/service_view.tsx      |  4 +-
 .../components/services/services_table.tsx    |  2 +-
 test/constants.ts                             | 16 ++--
 13 files changed, 133 insertions(+), 127 deletions(-)

diff --git a/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
index 8b6b73688..a52ccd95d 100644
--- a/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
+++ b/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
@@ -627,8 +627,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Rate"
-                                    title="Rate"
+                                    data-text="Request Rate"
+                                    title="Request Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -638,7 +638,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Rate
+                                    Request Rate
                                   </span>
                                 </span>
                               </label>
@@ -1880,8 +1880,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Rate"
-                                  title="Rate"
+                                  data-text="Request Rate"
+                                  title="Request Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -1891,7 +1891,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Rate
+                                  Request Rate
                                 </span>
                               </span>
                             </label>
@@ -3072,8 +3072,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Rate"
-                                    title="Rate"
+                                    data-text="Request Rate"
+                                    title="Request Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -3083,7 +3083,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Rate
+                                    Request Rate
                                   </span>
                                 </span>
                               </label>
@@ -4239,8 +4239,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Rate"
-                                  title="Rate"
+                                  data-text="Request Rate"
+                                  title="Request Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -4250,7 +4250,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Rate
+                                  Request Rate
                                 </span>
                               </span>
                             </label>
@@ -5499,8 +5499,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Rate"
-                                    title="Rate"
+                                    data-text="Request Rate"
+                                    title="Request Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -5510,7 +5510,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Rate
+                                    Request Rate
                                   </span>
                                 </span>
                               </label>
@@ -6666,8 +6666,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Rate"
-                                  title="Rate"
+                                  data-text="Request Rate"
+                                  title="Request Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -6677,7 +6677,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Rate
+                                  Request Rate
                                 </span>
                               </span>
                             </label>
@@ -7841,8 +7841,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Rate"
-                                    title="Rate"
+                                    data-text="Request Rate"
+                                    title="Request Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -7852,7 +7852,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Rate
+                                    Request Rate
                                   </span>
                                 </span>
                               </label>
@@ -8945,8 +8945,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Rate"
-                                  title="Rate"
+                                  data-text="Request Rate"
+                                  title="Request Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -8956,7 +8956,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Rate
+                                  Request Rate
                                 </span>
                               </span>
                             </label>
@@ -10123,8 +10123,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Rate"
-                                    title="Rate"
+                                    data-text="Request Rate"
+                                    title="Request Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -10134,7 +10134,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Rate
+                                    Request Rate
                                   </span>
                                 </span>
                               </label>
@@ -11256,8 +11256,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Rate"
-                                  title="Rate"
+                                  data-text="Request Rate"
+                                  title="Request Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -11267,7 +11267,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Rate
+                                  Request Rate
                                 </span>
                               </span>
                             </label>
@@ -12480,8 +12480,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Rate"
-                                    title="Rate"
+                                    data-text="Request Rate"
+                                    title="Request Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -12491,7 +12491,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Rate
+                                    Request Rate
                                   </span>
                                 </span>
                               </label>
@@ -13647,8 +13647,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Rate"
-                                  title="Rate"
+                                  data-text="Request Rate"
+                                  title="Request Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -13658,7 +13658,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Rate
+                                  Request Rate
                                 </span>
                               </span>
                             </label>
@@ -14839,8 +14839,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Rate"
-                                    title="Rate"
+                                    data-text="Request Rate"
+                                    title="Request Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -14850,7 +14850,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Rate
+                                    Request Rate
                                   </span>
                                 </span>
                               </label>
@@ -16006,8 +16006,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Rate"
-                                  title="Rate"
+                                  data-text="Request Rate"
+                                  title="Request Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -16017,7 +16017,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Rate
+                                  Request Rate
                                 </span>
                               </span>
                             </label>
@@ -17236,8 +17236,8 @@ Object {
                                 >
                                   <span
                                     class="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Rate"
-                                    title="Rate"
+                                    data-text="Request Rate"
+                                    title="Request Rate"
                                   >
                                     <input
                                       class="euiScreenReaderOnly"
@@ -17247,7 +17247,7 @@ Object {
                                       type="radio"
                                       value=""
                                     />
-                                    Rate
+                                    Request Rate
                                   </span>
                                 </span>
                               </label>
@@ -18485,8 +18485,8 @@ Object {
                               >
                                 <span
                                   class="euiButton__text euiButtonGroupButton__textShift"
-                                  data-text="Rate"
-                                  title="Rate"
+                                  data-text="Request Rate"
+                                  title="Request Rate"
                                 >
                                   <input
                                     class="euiScreenReaderOnly"
@@ -18496,7 +18496,7 @@ Object {
                                     type="radio"
                                     value=""
                                   />
-                                  Rate
+                                  Request Rate
                                 </span>
                               </span>
                             </label>
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 388bcaf8c..b8bc8d640 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
@@ -694,7 +694,7 @@ exports[`Service Config component renders empty service config 1`] = `
                             },
                             Object {
                               "id": "throughput",
-                              "label": "Rate",
+                              "label": "Request Rate",
                             },
                           ]
                         }
@@ -879,7 +879,7 @@ exports[`Service Config component renders empty service config 1`] = `
                               isIconOnly={false}
                               isSelected={false}
                               key="2"
-                              label="Rate"
+                              label="Request Rate"
                               name="random_html_id"
                               onChange={[Function]}
                               size="s"
@@ -897,9 +897,9 @@ exports[`Service Config component renders empty service config 1`] = `
                                 textProps={
                                   Object {
                                     "className": "euiButtonGroupButton__textShift",
-                                    "data-text": "Rate",
+                                    "data-text": "Request Rate",
                                     "ref": [Function],
-                                    "title": "Rate",
+                                    "title": "Request Rate",
                                   }
                                 }
                               >
@@ -920,9 +920,9 @@ exports[`Service Config component renders empty service config 1`] = `
                                     textProps={
                                       Object {
                                         "className": "euiButton__text euiButtonGroupButton__textShift",
-                                        "data-text": "Rate",
+                                        "data-text": "Request Rate",
                                         "ref": [Function],
-                                        "title": "Rate",
+                                        "title": "Request Rate",
                                       }
                                     }
                                   >
@@ -931,8 +931,8 @@ exports[`Service Config component renders empty service config 1`] = `
                                     >
                                       <span
                                         className="euiButton__text euiButtonGroupButton__textShift"
-                                        data-text="Rate"
-                                        title="Rate"
+                                        data-text="Request Rate"
+                                        title="Request Rate"
                                       >
                                         <input
                                           checked={false}
@@ -944,7 +944,7 @@ exports[`Service Config component renders empty service config 1`] = `
                                           onChange={[Function]}
                                           type="radio"
                                         />
-                                        Rate
+                                        Request Rate
                                       </span>
                                     </span>
                                   </EuiButtonContent>
@@ -1892,7 +1892,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                             },
                             Object {
                               "id": "throughput",
-                              "label": "Rate",
+                              "label": "Request Rate",
                             },
                           ]
                         }
@@ -2077,7 +2077,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                               isIconOnly={false}
                               isSelected={false}
                               key="2"
-                              label="Rate"
+                              label="Request Rate"
                               name="random_html_id"
                               onChange={[Function]}
                               size="s"
@@ -2095,9 +2095,9 @@ exports[`Service Config component renders with one service selected 1`] = `
                                 textProps={
                                   Object {
                                     "className": "euiButtonGroupButton__textShift",
-                                    "data-text": "Rate",
+                                    "data-text": "Request Rate",
                                     "ref": [Function],
-                                    "title": "Rate",
+                                    "title": "Request Rate",
                                   }
                                 }
                               >
@@ -2118,9 +2118,9 @@ exports[`Service Config component renders with one service selected 1`] = `
                                     textProps={
                                       Object {
                                         "className": "euiButton__text euiButtonGroupButton__textShift",
-                                        "data-text": "Rate",
+                                        "data-text": "Request Rate",
                                         "ref": [Function],
-                                        "title": "Rate",
+                                        "title": "Request Rate",
                                       }
                                     }
                                   >
@@ -2129,8 +2129,8 @@ exports[`Service Config component renders with one service selected 1`] = `
                                     >
                                       <span
                                         className="euiButton__text euiButtonGroupButton__textShift"
-                                        data-text="Rate"
-                                        title="Rate"
+                                        data-text="Request Rate"
+                                        title="Request Rate"
                                       >
                                         <input
                                           checked={false}
@@ -2142,7 +2142,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                                           onChange={[Function]}
                                           type="radio"
                                         />
-                                        Rate
+                                        Request Rate
                                       </span>
                                     </span>
                                   </EuiButtonContent>
diff --git a/public/components/trace_analytics/components/common/helper_functions.tsx b/public/components/trace_analytics/components/common/helper_functions.tsx
index f93222fb2..d224a0ae6 100644
--- a/public/components/trace_analytics/components/common/helper_functions.tsx
+++ b/public/components/trace_analytics/components/common/helper_functions.tsx
@@ -51,14 +51,18 @@ export function NoMatchMessage(props: { size: SpacerSize }) {
   );
 }
 
-export function MissingConfigurationMessage(props: {mode: TraceAnalyticsMode}) {
+export function MissingConfigurationMessage(props: { mode: TraceAnalyticsMode }) {
   return (
     <>
       <EuiEmptyPrompt
         title={<h2>Trace Analytics not set up</h2>}
         body={
           <EuiText>
-            {`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.`}
+            {`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={
@@ -165,13 +169,13 @@ export function getServiceMapGraph(
     }
 
     let hover = service;
-    hover += `\n\nAverage latency: ${
+    hover += `\n\nAverage duration: ${
       map[service].latency! >= 0 ? map[service].latency + 'ms' : 'N/A'
     }`;
     hover += `\nError rate: ${
       map[service].error_rate! >= 0 ? map[service].error_rate + '%' : 'N/A'
     }`;
-    hover += `\nThroughput: ${map[service].throughput! >= 0 ? map[service].throughput : 'N/A'}`;
+    hover += `\nRequest rate: ${map[service].throughput! >= 0 ? map[service].throughput : 'N/A'}`;
     if (map[service].throughputPerMinute != null)
       hover += ` (${map[service].throughputPerMinute} per minute)`;
 
@@ -381,7 +385,7 @@ export const filtersToDsl = (
 
       let filterQuery = {};
       let field = filter.field;
-      if (field === 'latency'){
+      if (field === 'latency') {
         if (mode === 'data_prepper') {
           field = 'traceGroupFields.durationInNanos';
         } else if (mode === 'jaeger') {
@@ -391,7 +395,7 @@ export const filtersToDsl = (
         if (mode === 'data_prepper') {
           field = 'traceGroupFields.statusCode';
         } else if (mode === 'jaeger') {
-          field = 'tag.error'
+          field = 'tag.error';
         }
       }
       let value;
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap
index 638208496..0d8ec16df 100644
--- a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`Service map component renders service map 1`] = `
           },
           Object {
             "id": "throughput",
-            "label": "Rate",
+            "label": "Request Rate",
           },
         ]
       }
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map_scale.test.tsx.snap b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map_scale.test.tsx.snap
index f89aac7e8..30ed8d0d4 100644
--- a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map_scale.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map_scale.test.tsx.snap
@@ -113,7 +113,7 @@ exports[`Service map scale component renders service map scale plot 1`] = `
             ],
             "title": Object {
               "standoff": 15,
-              "text": "Latency (ms)",
+              "text": "Average duration (ms)",
             },
             "zeroline": false,
           },
@@ -225,7 +225,7 @@ exports[`Service map scale component renders service map scale plot 1`] = `
               ],
               "title": Object {
                 "standoff": 15,
-                "text": "Latency (ms)",
+                "text": "Average duration (ms)",
               },
               "zeroline": false,
             },
diff --git a/public/components/trace_analytics/components/common/plots/service_map.tsx b/public/components/trace_analytics/components/common/plots/service_map.tsx
index 6f59c1af1..0f711eb2a 100644
--- a/public/components/trace_analytics/components/common/plots/service_map.tsx
+++ b/public/components/trace_analytics/components/common/plots/service_map.tsx
@@ -79,7 +79,7 @@ export function ServiceMap({
     },
     {
       id: 'throughput',
-      label: 'Rate',
+      label: 'Request Rate',
     },
   ];
 
diff --git a/public/components/trace_analytics/components/common/plots/service_map_scale.tsx b/public/components/trace_analytics/components/common/plots/service_map_scale.tsx
index e9c900bcc..f75d5f907 100644
--- a/public/components/trace_analytics/components/common/plots/service_map_scale.tsx
+++ b/public/components/trace_analytics/components/common/plots/service_map_scale.tsx
@@ -4,9 +4,9 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
-import { BarOrientation } from '../../../../../../common/constants/shared';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
+import { BarOrientation } from '../../../../../../common/constants/shared';
 import { Plt } from '../../../../visualizations/plotly/plot';
 import unmatchedNode from '../../../images/unmatched_node.png';
 import { getServiceMapScaleColor } from '../helper_functions';
@@ -21,9 +21,11 @@ export function ServiceMapScale(props: {
   const getScaleData = () => {
     const ticks = props.ticks;
     const delta = ticks[1] - ticks[0];
-    const title = { latency: 'Latency (ms)', error_rate: 'Error rate', throughput: 'Throughput' }[
-      props.idSelected
-    ];
+    const title = {
+      latency: 'Average duration (ms)',
+      error_rate: 'Error rate',
+      throughput: 'Request rate',
+    }[props.idSelected];
     const percentInterval = 1 / Math.max(ticks.length - 1, 1);
     const percents = Array.from({ length: ticks.length - 1 }, (v, i) => percentInterval * i);
     const color = percents
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 04b93f609..c2ab99780 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
@@ -156,7 +156,7 @@ exports[`Service view component renders service view 1`] = `
                 <EuiText
                   className="overview-title"
                 >
-                  Average latency (ms)
+                  Average duration (ms)
                 </EuiText>
                 <EuiText
                   className="overview-content"
@@ -186,7 +186,7 @@ exports[`Service view component renders service view 1`] = `
                 <EuiText
                   className="overview-title"
                 >
-                  Throughput
+                  Request rate
                 </EuiText>
                 <EuiText
                   className="overview-content"
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 5d934f2f1..1d276098b 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
@@ -1525,7 +1525,7 @@ exports[`Services component renders empty services page 1`] = `
                 },
                 Object {
                   "id": "throughput",
-                  "label": "Rate",
+                  "label": "Request Rate",
                 },
               ]
             }
@@ -1710,7 +1710,7 @@ exports[`Services component renders empty services page 1`] = `
                   isIconOnly={false}
                   isSelected={false}
                   key="2"
-                  label="Rate"
+                  label="Request Rate"
                   name="random_html_id"
                   onChange={[Function]}
                   size="s"
@@ -1728,9 +1728,9 @@ exports[`Services component renders empty services page 1`] = `
                     textProps={
                       Object {
                         "className": "euiButtonGroupButton__textShift",
-                        "data-text": "Rate",
+                        "data-text": "Request Rate",
                         "ref": [Function],
-                        "title": "Rate",
+                        "title": "Request Rate",
                       }
                     }
                   >
@@ -1751,9 +1751,9 @@ exports[`Services component renders empty services page 1`] = `
                         textProps={
                           Object {
                             "className": "euiButton__text euiButtonGroupButton__textShift",
-                            "data-text": "Rate",
+                            "data-text": "Request Rate",
                             "ref": [Function],
-                            "title": "Rate",
+                            "title": "Request Rate",
                           }
                         }
                       >
@@ -1762,8 +1762,8 @@ exports[`Services component renders empty services page 1`] = `
                         >
                           <span
                             className="euiButton__text euiButtonGroupButton__textShift"
-                            data-text="Rate"
-                            title="Rate"
+                            data-text="Request Rate"
+                            title="Request Rate"
                           >
                             <input
                               checked={false}
@@ -1775,7 +1775,7 @@ exports[`Services component renders empty services page 1`] = `
                               onChange={[Function]}
                               type="radio"
                             />
-                            Rate
+                            Request Rate
                           </span>
                         </span>
                       </EuiButtonContent>
@@ -5269,7 +5269,7 @@ exports[`Services component renders services page 1`] = `
                 },
                 Object {
                   "id": "throughput",
-                  "label": "Rate",
+                  "label": "Request Rate",
                 },
               ]
             }
@@ -5454,7 +5454,7 @@ exports[`Services component renders services page 1`] = `
                   isIconOnly={false}
                   isSelected={false}
                   key="2"
-                  label="Rate"
+                  label="Request Rate"
                   name="random_html_id"
                   onChange={[Function]}
                   size="s"
@@ -5472,9 +5472,9 @@ exports[`Services component renders services page 1`] = `
                     textProps={
                       Object {
                         "className": "euiButtonGroupButton__textShift",
-                        "data-text": "Rate",
+                        "data-text": "Request Rate",
                         "ref": [Function],
-                        "title": "Rate",
+                        "title": "Request Rate",
                       }
                     }
                   >
@@ -5495,9 +5495,9 @@ exports[`Services component renders services page 1`] = `
                         textProps={
                           Object {
                             "className": "euiButton__text euiButtonGroupButton__textShift",
-                            "data-text": "Rate",
+                            "data-text": "Request Rate",
                             "ref": [Function],
-                            "title": "Rate",
+                            "title": "Request Rate",
                           }
                         }
                       >
@@ -5506,8 +5506,8 @@ exports[`Services component renders services page 1`] = `
                         >
                           <span
                             className="euiButton__text euiButtonGroupButton__textShift"
-                            data-text="Rate"
-                            title="Rate"
+                            data-text="Request Rate"
+                            title="Request Rate"
                           >
                             <input
                               checked={false}
@@ -5519,7 +5519,7 @@ exports[`Services component renders services page 1`] = `
                               onChange={[Function]}
                               type="radio"
                             />
-                            Rate
+                            Request Rate
                           </span>
                         </span>
                       </EuiButtonContent>
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 f12e3dcc8..21bbad336 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
@@ -401,7 +401,7 @@ exports[`Services table component renders jaeger services table 1`] = `
             Object {
               "align": "right",
               "field": "throughput",
-              "name": "Rate",
+              "name": "Request rate",
               "render": [Function],
               "sortable": true,
               "truncateText": true,
@@ -476,7 +476,7 @@ exports[`Services table component renders jaeger services table 1`] = `
               Object {
                 "align": "right",
                 "field": "throughput",
-                "name": "Rate",
+                "name": "Request rate",
                 "render": [Function],
                 "sortable": true,
                 "truncateText": true,
@@ -587,7 +587,7 @@ exports[`Services table component renders jaeger services table 1`] = `
                                   "isSortAscending": undefined,
                                   "isSorted": false,
                                   "key": "_data_s_throughput_3",
-                                  "name": "Rate",
+                                  "name": "Request rate",
                                   "onSort": [Function],
                                 },
                                 Object {
@@ -983,15 +983,15 @@ exports[`Services table component renders jaeger services table 1`] = `
                                       values={
                                         Object {
                                           "description": undefined,
-                                          "innerText": "Rate",
+                                          "innerText": "Request rate",
                                         }
                                       }
                                     >
                                       <span
                                         className="euiTableCellContent__text"
-                                        title="Rate"
+                                        title="Request rate"
                                       >
-                                        Rate
+                                        Request rate
                                       </span>
                                     </EuiI18n>
                                   </EuiInnerText>
@@ -1197,7 +1197,7 @@ exports[`Services table component renders jaeger services table 1`] = `
                             key="_data_column_throughput_0_3"
                             mobileOptions={
                               Object {
-                                "header": "Rate",
+                                "header": "Request rate",
                                 "render": undefined,
                               }
                             }
@@ -1216,7 +1216,7 @@ exports[`Services table component renders jaeger services table 1`] = `
                               <div
                                 className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                               >
-                                Rate
+                                Request rate
                               </div>
                               <div
                                 className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
@@ -1815,7 +1815,7 @@ exports[`Services table component renders services table 1`] = `
             Object {
               "align": "right",
               "field": "throughput",
-              "name": "Rate",
+              "name": "Request rate",
               "render": [Function],
               "sortable": true,
               "truncateText": true,
@@ -1912,7 +1912,7 @@ exports[`Services table component renders services table 1`] = `
               Object {
                 "align": "right",
                 "field": "throughput",
-                "name": "Rate",
+                "name": "Request rate",
                 "render": [Function],
                 "sortable": true,
                 "truncateText": true,
@@ -2045,7 +2045,7 @@ exports[`Services table component renders services table 1`] = `
                                   "isSortAscending": undefined,
                                   "isSorted": false,
                                   "key": "_data_s_throughput_3",
-                                  "name": "Rate",
+                                  "name": "Request rate",
                                   "onSort": [Function],
                                 },
                                 Object {
@@ -2446,15 +2446,15 @@ exports[`Services table component renders services table 1`] = `
                                       values={
                                         Object {
                                           "description": undefined,
-                                          "innerText": "Rate",
+                                          "innerText": "Request rate",
                                         }
                                       }
                                     >
                                       <span
                                         className="euiTableCellContent__text"
-                                        title="Rate"
+                                        title="Request rate"
                                       >
-                                        Rate
+                                        Request rate
                                       </span>
                                     </EuiI18n>
                                   </EuiInnerText>
@@ -2777,7 +2777,7 @@ exports[`Services table component renders services table 1`] = `
                             key="_data_column_throughput_0_3"
                             mobileOptions={
                               Object {
-                                "header": "Rate",
+                                "header": "Request rate",
                                 "render": undefined,
                               }
                             }
@@ -2796,7 +2796,7 @@ exports[`Services table component renders services table 1`] = `
                               <div
                                 className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
                               >
-                                Rate
+                                Request rate
                               </div>
                               <div
                                 className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
index 2faa77885..e81869d11 100644
--- a/public/components/trace_analytics/components/services/service_view.tsx
+++ b/public/components/trace_analytics/components/services/service_view.tsx
@@ -156,7 +156,7 @@ export function ServiceView(props: ServiceViewProps) {
           <EuiFlexItem>
             <EuiFlexGroup direction="column">
               <EuiFlexItem grow={false}>
-                <EuiText className="overview-title">Average latency (ms)</EuiText>
+                <EuiText className="overview-title">Average duration (ms)</EuiText>
                 <EuiText size="s" className="overview-content">
                   {fields.average_latency !== undefined ? fields.average_latency : '-'}
                 </EuiText>
@@ -170,7 +170,7 @@ export function ServiceView(props: ServiceViewProps) {
                 </EuiText>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiText className="overview-title">Throughput</EuiText>
+                <EuiText className="overview-title">Request rate</EuiText>
                 <EuiText size="s" className="overview-content">
                   {fields.throughput !== undefined ? (
                     <EuiI18nNumber value={fields.throughput} />
diff --git a/public/components/trace_analytics/components/services/services_table.tsx b/public/components/trace_analytics/components/services/services_table.tsx
index 49f0ca7c9..fb405dfe3 100644
--- a/public/components/trace_analytics/components/services/services_table.tsx
+++ b/public/components/trace_analytics/components/services/services_table.tsx
@@ -91,7 +91,7 @@ export function ServicesTable(props: ServicesTableProps) {
         },
         {
           field: 'throughput',
-          name: 'Rate',
+          name: 'Request rate',
           align: 'right',
           sortable: true,
           truncateText: true,
diff --git a/test/constants.ts b/test/constants.ts
index e5c2e03a2..f332a905b 100644
--- a/test/constants.ts
+++ b/test/constants.ts
@@ -205,7 +205,7 @@ export const TEST_SERVICE_MAP_GRAPH = {
         id: 1,
         label: 'order',
         size: 15,
-        title: 'order\n\nAverage latency: 90.1ms\nError rate: 4.17%\nThroughput: 48',
+        title: 'order\n\nAverage duration: 90.1ms\nError rate: 4.17%\nRequest rate: 48',
         borderWidth: 0,
         color: 'rgba(158, 134, 192, 1)',
         font: {
@@ -216,7 +216,7 @@ export const TEST_SERVICE_MAP_GRAPH = {
         id: 2,
         label: 'analytics-service',
         size: 15,
-        title: 'analytics-service\n\nAverage latency: 12.99ms\nError rate: 0%\nThroughput: 37',
+        title: 'analytics-service\n\nAverage duration: 12.99ms\nError rate: 0%\nRequest rate: 37',
         borderWidth: 0,
         color: 'rgba(210, 202, 224, 1)',
         font: {
@@ -227,7 +227,7 @@ export const TEST_SERVICE_MAP_GRAPH = {
         id: 3,
         label: 'database',
         size: 15,
-        title: 'database\n\nAverage latency: 49.54ms\nError rate: 3.77%\nThroughput: 53',
+        title: 'database\n\nAverage duration: 49.54ms\nError rate: 3.77%\nRequest rate: 53',
         borderWidth: 0,
         color: 'rgba(187, 171, 212, 1)',
         font: {
@@ -238,7 +238,7 @@ export const TEST_SERVICE_MAP_GRAPH = {
         id: 4,
         label: 'frontend-client',
         size: 15,
-        title: 'frontend-client\n\nAverage latency: 207.71ms\nError rate: 7.41%\nThroughput: 27',
+        title: 'frontend-client\n\nAverage duration: 207.71ms\nError rate: 7.41%\nRequest rate: 27',
         borderWidth: 0,
         color: 'rgba(78, 42, 122, 1)',
         font: {
@@ -249,7 +249,7 @@ export const TEST_SERVICE_MAP_GRAPH = {
         id: 5,
         label: 'inventory',
         size: 15,
-        title: 'inventory\n\nAverage latency: 183.52ms\nError rate: 3.23%\nThroughput: 31',
+        title: 'inventory\n\nAverage duration: 183.52ms\nError rate: 3.23%\nRequest rate: 31',
         borderWidth: 0,
         color: 'rgba(95, 61, 138, 1)',
         font: {
@@ -260,7 +260,7 @@ export const TEST_SERVICE_MAP_GRAPH = {
         id: 6,
         label: 'authentication',
         size: 15,
-        title: 'authentication\n\nAverage latency: 139.09ms\nError rate: 8.33%\nThroughput: 12',
+        title: 'authentication\n\nAverage duration: 139.09ms\nError rate: 8.33%\nRequest rate: 12',
         borderWidth: 0,
         color: 'rgba(125, 95, 166, 1)',
         font: {
@@ -271,7 +271,7 @@ export const TEST_SERVICE_MAP_GRAPH = {
         id: 7,
         label: 'payment',
         size: 15,
-        title: 'payment\n\nAverage latency: 134.36ms\nError rate: 9.09%\nThroughput: 11',
+        title: 'payment\n\nAverage duration: 134.36ms\nError rate: 9.09%\nRequest rate: 11',
         borderWidth: 0,
         color: 'rgba(129, 99, 169, 1)',
         font: {
@@ -282,7 +282,7 @@ export const TEST_SERVICE_MAP_GRAPH = {
         id: 8,
         label: 'recommendation',
         size: 15,
-        title: 'recommendation\n\nAverage latency: 176.97ms\nError rate: 6.25%\nThroughput: 16',
+        title: 'recommendation\n\nAverage duration: 176.97ms\nError rate: 6.25%\nRequest rate: 16',
         borderWidth: 0,
         color: 'rgba(100, 66, 143, 1)',
         font: {

From 194e46e6cda29e49987db35a6c9a166c4b6da410 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Mon, 28 Aug 2023 16:42:17 -0400
Subject: [PATCH 20/26] update cypress test

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .cypress/integration/5_trace_analytics_services.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.cypress/integration/5_trace_analytics_services.spec.js b/.cypress/integration/5_trace_analytics_services.spec.js
index b2d8fb976..f09b92426 100644
--- a/.cypress/integration/5_trace_analytics_services.spec.js
+++ b/.cypress/integration/5_trace_analytics_services.spec.js
@@ -54,7 +54,7 @@ describe('Testing services table', () => {
     cy.get('.euiTableCellContent__text[title="Name"]').should('exist');
     cy.get('.euiTableCellContent__text[title="Average duration (ms)"]').should('exist');
     cy.get('.euiTableCellContent__text[title="Error rate"]').should('exist');
-    cy.get('.euiTableCellContent__text[title="Rate"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Request rate"]').should('exist');
     cy.get('.euiTableCellContent__text[title="No. of connected services"]').should('exist');
     cy.get('.euiTableCellContent__text[title="Connected services"]').should('exist');
     cy.get('.euiTableCellContent__text[title="Traces"]').should('exist');
@@ -144,7 +144,7 @@ describe('Testing Service map', () => {
   it('Render Service map', () => {
     cy.get('.euiText.euiText--medium .panel-title').contains('Service map');
     cy.get('[data-test-subj="latency"]').should('exist');
-    cy.get('.ytitle').contains('Latency (ms)');
+    cy.get('.ytitle').contains('Average duration (ms)');
     cy.get('[data-text = "Errors"]').click();
     cy.contains('60%');
     cy.get('[data-text = "Duration"]').click();
@@ -287,7 +287,7 @@ describe('Testing switch mode to jaeger', () => {
     cy.contains('Name').should('exist');
     cy.contains('Average duration (ms)').should('exist');
     cy.contains('Error rate').should('exist');
-    cy.contains('Rate').should('exist');
+    cy.contains('Request rate').should('exist');
     cy.contains('Traces').should('exist');
   });
 

From 0294777cd526fd485d2e0f750577ccfe962ed4f8 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 29 Aug 2023 12:21:55 -0400
Subject: [PATCH 21/26] verify cypress tests work with changes

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../4_trace_analytics_dashboard.spec.js       | 25 ++++++++++---------
 .cypress/integration/7_app_analytics.spec.js  |  2 +-
 .cypress/utils/constants.js                   |  2 +-
 .../dashboard/dashboard_content.tsx           | 15 -----------
 4 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/.cypress/integration/4_trace_analytics_dashboard.spec.js b/.cypress/integration/4_trace_analytics_dashboard.spec.js
index 4e0ff3eee..37009a642 100644
--- a/.cypress/integration/4_trace_analytics_dashboard.spec.js
+++ b/.cypress/integration/4_trace_analytics_dashboard.spec.js
@@ -143,20 +143,20 @@ describe('Testing plots', () => {
       },
     });
     setTimeFilter();
+    cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click();
   });
 
   it('Renders service map', () => {
     // plotly scale texts are in attribute "data-unformatted"
-    cy.get('text.ytitle[data-unformatted="Latency (ms)"]').should('exist');
+    cy.get('text.ytitle[data-unformatted="Average duration (ms)"]').should('exist');
     cy.get('text[data-unformatted="200"]').should('exist');
     cy.get('.vis-network').should('exist');
 
-    cy.get('.euiButton__text[title="Error rate"]').click();
+    cy.get('.euiButton__text[title="Errors"]').click();
     cy.get('text.ytitle[data-unformatted="Error rate"]').should('exist');
-    cy.get('text[data-unformatted="10%"]').should('exist');
 
-    cy.get('.euiButton__text[title="Throughput"]').click();
-    cy.get('text.ytitle[data-unformatted="Throughput"]').should('exist');
+    cy.get('.euiButton__text[title="Request Rate"]').click();
+    cy.get('text.ytitle[data-unformatted="Request rate"]').should('exist');
     cy.get('text[data-unformatted="50"]').should('exist');
 
     cy.get('input[type="search"]').eq(1).focus().type('payment{enter}');
@@ -178,6 +178,7 @@ describe('Latency by trace group table', () =>{
       },
     });
     setTimeFilter();
+    cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click();
   });
 
   it('Verify columns in Latency by trace group table along with pagination functionality', () => {
@@ -188,9 +189,9 @@ describe('Latency by trace group table', () =>{
     cy.get('[data-test-subj="tableHeaderCell_24_hour_latency_trend_3"]').should('exist');
     cy.get('[data-test-subj="tableHeaderCell_dashboard_error_rate_4"]').should('exist');
     cy.get('[data-test-subj="tableHeaderCell_dashboard_traces_5"]').should('exist');
-    cy.get('[data-test-subj="tablePaginationPopoverButton"]').click();
+    cy.get('[data-test-subj="tablePaginationPopoverButton"]').eq(1).click();
     cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiContextMenu__icon').eq(0).should('exist').click();
-    cy.get('[data-test-subj="pagination-button-next"]').should('exist').click();
+    cy.get('[data-test-subj="pagination-button-next"]').eq(1).should('exist').click();
     cy.get('button[data-test-subj="dashboard-table-trace-group-name-button"]').contains('mysql').should('exist');
   });
 
@@ -219,7 +220,7 @@ describe('Latency by trace group table', () =>{
     cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click();
     cy.wait(delay);//Fails without
     cy.get('.euiTableCellContent.euiTableCellContent--alignRight.euiTableCellContent--overflowingContent').contains('211.04').should('exist');
-    cy.get('button[data-test-subj="dashboard-table-trace-group-name-button"]').click();
+    cy.get('button[data-test-subj="dashboard-table-trace-group-name-button"]').eq(0).click();
     cy.get('.euiBadge.euiBadge--hollow.euiBadge--iconRight.globalFilterItem').click();
     cy.get('.euiIcon.euiIcon--medium.euiContextMenu__arrow').click();
     cy.get('.euiContextMenuPanelTitle').contains('Edit filter').should('exist');
@@ -344,6 +345,7 @@ describe('Testing switch mode to jaeger', () => {
     setTimeFilter();
     cy.get("[data-test-subj='indexPattern-switch-link']").click();
     cy.get("[data-test-subj='jaeger-mode']").click();
+    cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click();
   });
 
   it('Verifies errors mode columns and data', () => {
@@ -352,15 +354,14 @@ describe('Testing switch mode to jaeger', () => {
     cy.contains('100%').should('exist');
     cy.contains('7').should('exist');
     cy.contains('Service and Operation Name').should('exist');
-    cy.contains('Average latency (ms)').should('exist');
+    cy.contains('Average duration (ms)').should('exist');
     cy.contains('Error rate').should('exist');
     cy.contains('Traces').should('exist');
   });
 
   it('Verifies traces links to traces page', () => {
-    cy.get('.euiLink').contains('7').click();
+    cy.get('[data-test-subj="dashboard-table-traces-button"]').contains('7').click();
 
-    cy.get('h2.euiTitle').contains('Traces').should('exist');
     cy.contains(' (7)').should('exist');
     cy.get("[data-test-subj='filterBadge']").eq(0).contains('process.serviceName: redis')
     cy.get("[data-test-subj='filterBadge']").eq(1).contains('operationName: GetDriver');  
@@ -373,7 +374,7 @@ describe('Testing switch mode to jaeger', () => {
     cy.contains('0%').should('exist');
     cy.contains('8').should('exist');
     cy.contains('Service and Operation Name').should('exist');
-    cy.contains('Average latency (ms)').should('exist');
+    cy.contains('Average duration (ms)').should('exist');
     cy.contains('Error rate').should('exist');
     cy.contains('Traces').should('exist');
   });
diff --git a/.cypress/integration/7_app_analytics.spec.js b/.cypress/integration/7_app_analytics.spec.js
index 1e50d76aa..6afe1bb9f 100644
--- a/.cypress/integration/7_app_analytics.spec.js
+++ b/.cypress/integration/7_app_analytics.spec.js
@@ -224,7 +224,7 @@ describe('Setting availability', () => {
   });
 });
 
-describe('Viewing application', () => {
+describe.only('Viewing application', () => {
   beforeEach(() => {
     moveToApplication(nameOne);
   });
diff --git a/.cypress/utils/constants.js b/.cypress/utils/constants.js
index b3743e83c..af655fbe3 100644
--- a/.cypress/utils/constants.js
+++ b/.cypress/utils/constants.js
@@ -10,7 +10,7 @@ export const COMMAND_TIMEOUT_LONG = 10000;
 export const TRACE_ID = '8832ed6abbb2a83516461960c89af49d';
 export const SPAN_ID = 'a673bc074b438374';
 export const SERVICE_NAME = 'frontend-client';
-export const SERVICE_SPAN_ID = 'e275ac9d21929e9b';
+export const SERVICE_SPAN_ID = '7df5609a6d104736';
 export const AUTH_SERVICE_SPAN_ID = '277a5934acf55dcf';
 
 export const testDataSet = [
diff --git a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
index 9cac1abd4..176643574 100644
--- a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
+++ b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
@@ -289,21 +289,6 @@ export function DashboardContent(props: DashboardProps) {
 
   return (
     <>
-      <SearchBar
-        query={query}
-        filters={filters}
-        appConfigs={appConfigs}
-        setFilters={setFilters}
-        setQuery={setQuery}
-        startTime={startTime}
-        setStartTime={setStartTime}
-        endTime={endTime}
-        setEndTime={setEndTime}
-        refresh={refresh}
-        page={page}
-        mode={mode}
-      />
-      <EuiSpacer size="m" />
       {(mode === 'data_prepper' && dataPrepperIndicesExist) ||
       (mode === 'jaeger' && jaegerIndicesExist) ? (
         <div>

From 542b944d86551ddd72a9b8da5595b449920d30a3 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 29 Aug 2023 12:22:54 -0400
Subject: [PATCH 22/26] remove accidental only

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .cypress/integration/7_app_analytics.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.cypress/integration/7_app_analytics.spec.js b/.cypress/integration/7_app_analytics.spec.js
index 6afe1bb9f..1e50d76aa 100644
--- a/.cypress/integration/7_app_analytics.spec.js
+++ b/.cypress/integration/7_app_analytics.spec.js
@@ -224,7 +224,7 @@ describe('Setting availability', () => {
   });
 });
 
-describe.only('Viewing application', () => {
+describe('Viewing application', () => {
   beforeEach(() => {
     moveToApplication(nameOne);
   });

From e9941e014096043980b05300d0d6f8fbde9dc0f9 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 29 Aug 2023 15:53:19 -0400
Subject: [PATCH 23/26] address PR review comments

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../4_trace_analytics_dashboard.spec.js       |  4 ++--
 .../common/plots/service_map_scale.tsx        |  4 ++--
 .../components/dashboard/top_groups_page.tsx  |  2 +-
 .../components/services/services_content.tsx  |  2 +-
 .../requests/dashboard_request_handler.ts     | 12 +++++------
 .../requests/request_handler.ts               | 20 +++++++++----------
 6 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/.cypress/integration/4_trace_analytics_dashboard.spec.js b/.cypress/integration/4_trace_analytics_dashboard.spec.js
index 37009a642..be31f2183 100644
--- a/.cypress/integration/4_trace_analytics_dashboard.spec.js
+++ b/.cypress/integration/4_trace_analytics_dashboard.spec.js
@@ -153,10 +153,10 @@ describe('Testing plots', () => {
     cy.get('.vis-network').should('exist');
 
     cy.get('.euiButton__text[title="Errors"]').click();
-    cy.get('text.ytitle[data-unformatted="Error rate"]').should('exist');
+    cy.get('text.ytitle[data-unformatted="Error rate (%)"]').should('exist');
 
     cy.get('.euiButton__text[title="Request Rate"]').click();
-    cy.get('text.ytitle[data-unformatted="Request rate"]').should('exist');
+    cy.get('text.ytitle[data-unformatted="Request rate (spans)"]').should('exist');
     cy.get('text[data-unformatted="50"]').should('exist');
 
     cy.get('input[type="search"]').eq(1).focus().type('payment{enter}');
diff --git a/public/components/trace_analytics/components/common/plots/service_map_scale.tsx b/public/components/trace_analytics/components/common/plots/service_map_scale.tsx
index f75d5f907..61bba2841 100644
--- a/public/components/trace_analytics/components/common/plots/service_map_scale.tsx
+++ b/public/components/trace_analytics/components/common/plots/service_map_scale.tsx
@@ -23,8 +23,8 @@ export function ServiceMapScale(props: {
     const delta = ticks[1] - ticks[0];
     const title = {
       latency: 'Average duration (ms)',
-      error_rate: 'Error rate',
-      throughput: 'Request rate',
+      error_rate: 'Error rate (%)',
+      throughput: 'Request rate (spans)',
     }[props.idSelected];
     const percentInterval = 1 / Math.max(ticks.length - 1, 1);
     const percents = Array.from({ length: ticks.length - 1 }, (v, i) => percentInterval * i);
diff --git a/public/components/trace_analytics/components/dashboard/top_groups_page.tsx b/public/components/trace_analytics/components/dashboard/top_groups_page.tsx
index 1741a12b0..da3ff8bbd 100644
--- a/public/components/trace_analytics/components/dashboard/top_groups_page.tsx
+++ b/public/components/trace_analytics/components/dashboard/top_groups_page.tsx
@@ -34,7 +34,7 @@ export function TopGroupsPage(props: {
     },
     {
       id: 'throughput',
-      label: 'Rate',
+      label: 'Request rate',
       'data-test-subj': 'throughput-toggle'
     },
   ];
diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx
index 370520d86..0552c567e 100644
--- a/public/components/trace_analytics/components/services/services_content.tsx
+++ b/public/components/trace_analytics/components/services/services_content.tsx
@@ -46,7 +46,7 @@ export function ServicesContent(props: ServicesProps) {
   } = props;
   const [tableItems, setTableItems] = useState([]);
 
-  const [trigger, setTrigger] = useState<'open' | 'closed' | undefined>('closed');
+  const [trigger, setTrigger] = useState<'open' | 'closed'>('closed');
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
   const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
     'latency' | 'error_rate' | 'throughput'
diff --git a/public/components/trace_analytics/requests/dashboard_request_handler.ts b/public/components/trace_analytics/requests/dashboard_request_handler.ts
index 253fab1b3..d9316bca0 100644
--- a/public/components/trace_analytics/requests/dashboard_request_handler.ts
+++ b/public/components/trace_analytics/requests/dashboard_request_handler.ts
@@ -50,7 +50,7 @@ export const handleDashboardRequest = async (
     .catch((error) => console.error(error));
   if (setPercentileMap) setPercentileMap(latencyVariances);
 
-  const latencyTrends = await handleDslRequest(http, latencyTrendDSL, getLatencyTrendQuery(), mode, true, setShowTimeoutToast)
+  const latencyTrends = await handleDslRequest(http, latencyTrendDSL, getLatencyTrendQuery(), mode, setShowTimeoutToast)
     .then((response) => {
       const map: any = {};
       response.aggregations.trace_group_name.buckets.map((bucket) => {
@@ -105,7 +105,7 @@ export const handleDashboardRequest = async (
     })
     .catch((error) => console.error(error));
 
-  await handleDslRequest(http, DSL, getDashboardQuery(), mode, true, setShowTimeoutToast)
+  await handleDslRequest(http, DSL, getDashboardQuery(), mode, setShowTimeoutToast)
     .then((response) => {
       return Promise.all(
         response.aggregations.trace_group_name.buckets.map((bucket) => {
@@ -138,7 +138,7 @@ export const handleJaegerDashboardRequest = async (
   setShowTimeoutToast,
   setPercentileMap?
 ) => {
-  const latencyTrends = await handleDslRequest(http, latencyTrendDSL, getJaegerLatencyTrendQuery(), mode, true, setShowTimeoutToast)
+  const latencyTrends = await handleDslRequest(http, latencyTrendDSL, getJaegerLatencyTrendQuery(), mode, setShowTimeoutToast)
     .then((response) => {
       const map: any = {};
       response.aggregations.trace_group_name.buckets.map((bucket) => {
@@ -195,7 +195,7 @@ export const handleJaegerDashboardRequest = async (
       console.error(error);
     });
 
-  await handleDslRequest(http, DSL, getJaegerDashboardQuery(), mode, true, setShowTimeoutToast)
+  await handleDslRequest(http, DSL, getJaegerDashboardQuery(), mode, setShowTimeoutToast)
     .then((response) => {
       return Promise.all(
         response.aggregations.trace_group_name.buckets.map((bucket) => {
@@ -249,7 +249,7 @@ export const handleJaegerErrorDashboardRequest = async (
   setShowTimeoutToast,
   setPercentileMap?
 ) => {
-  const errorTrends = await handleDslRequest(http, latencyTrendDSL, getJaegerErrorTrendQuery(), mode, true, setShowTimeoutToast)
+  const errorTrends = await handleDslRequest(http, latencyTrendDSL, getJaegerErrorTrendQuery(), mode, setShowTimeoutToast)
     .then((response) => {
       const map: any = {};
       response.aggregations.trace_group_name.buckets.map((bucket) => {
@@ -304,7 +304,7 @@ export const handleJaegerErrorDashboardRequest = async (
     })
     .catch((error) => console.error(error));
 
-  await handleDslRequest(http, DSL, getJaegerErrorDashboardQuery(), mode, true, setShowTimeoutToast)
+  await handleDslRequest(http, DSL, getJaegerErrorDashboardQuery(), mode, setShowTimeoutToast)
     .then((response) => {
       return Promise.all(
         response.aggregations.trace_group_name.buckets.map((bucket) => {
diff --git a/public/components/trace_analytics/requests/request_handler.ts b/public/components/trace_analytics/requests/request_handler.ts
index e5ba11707..bb687183d 100644
--- a/public/components/trace_analytics/requests/request_handler.ts
+++ b/public/components/trace_analytics/requests/request_handler.ts
@@ -18,7 +18,6 @@ export async function handleDslRequest(
   DSL: any,
   bodyQuery: any,
   mode: TraceAnalyticsMode,
-  timeout?: boolean,
   setShowTimeoutToast?: () => void
 ) {
   if (DSL?.query) {
@@ -33,8 +32,8 @@ export async function handleDslRequest(
   if (!bodyQuery.index) {
     body = { ...bodyQuery, index: mode === 'jaeger' ? JAEGER_INDEX_NAME : DATA_PREPPER_INDEX_NAME };
   }
-  if (timeout) {
-    const id = setTimeout(() => setShowTimeoutToast!(), 25000); // 25 seconds
+  if (setShowTimeoutToast) {
+    const id = setTimeout(() => setShowTimeoutToast(), 25000); // 25 seconds
 
     try {
       return await http.post(TRACE_ANALYTICS_DSL_ROUTE, {
@@ -45,14 +44,15 @@ export async function handleDslRequest(
     } finally {
       clearTimeout(id);
     }
-  }
+  } else {
 
-  try {
-    return await http.post(TRACE_ANALYTICS_DSL_ROUTE, {
-      body: JSON.stringify(body),
-    });
-  } catch (error_1) {
-    console.error(error_1);
+    try {
+      return await http.post(TRACE_ANALYTICS_DSL_ROUTE, {
+        body: JSON.stringify(body),
+      });
+    } catch (error_1) {
+      console.error(error_1);
+    }
   }
 }
 

From 3b3feea00a9fa36bad58eb6b7c6cbb4d91988a98 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 29 Aug 2023 16:21:32 -0400
Subject: [PATCH 24/26] make missing configuration more clear

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../components/common/helper_functions.tsx     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/public/components/trace_analytics/components/common/helper_functions.tsx b/public/components/trace_analytics/components/common/helper_functions.tsx
index d224a0ae6..3e996b0aa 100644
--- a/public/components/trace_analytics/components/common/helper_functions.tsx
+++ b/public/components/trace_analytics/components/common/helper_functions.tsx
@@ -22,6 +22,10 @@ import { serviceMapColorPalette } from './color_palette';
 import { FilterType } from './filters/filters';
 import { ServiceObject } from './plots/service_map';
 
+const missingJaegerTracesConfigurationMessage = `The indices required for trace analytics (${JAEGER_INDEX_NAME} and ${JAEGER_SERVICE_INDEX_NAME}) do not exist or you do not have permission to access them.`;
+
+const missingDataPrepperTracesConfigurationMessage = `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.`;
+
 export function PanelTitle({ title, totalItems }: { title: string; totalItems?: number }) {
   return (
     <EuiText size="m">
@@ -52,19 +56,15 @@ export function NoMatchMessage(props: { size: SpacerSize }) {
 }
 
 export function MissingConfigurationMessage(props: { mode: TraceAnalyticsMode }) {
+  const missingConfigurationBody =
+    props.mode === 'jaeger'
+      ? missingJaegerTracesConfigurationMessage
+      : missingDataPrepperTracesConfigurationMessage;
   return (
     <>
       <EuiEmptyPrompt
         title={<h2>Trace Analytics not set up</h2>}
-        body={
-          <EuiText>
-            {`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>
-        }
+        body={<EuiText>{missingConfigurationBody}</EuiText>}
         actions={
           <EuiButton
             color="primary"

From d5233aa123978e1ba1cd7cab608777ea51c24575 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 29 Aug 2023 16:44:02 -0400
Subject: [PATCH 25/26] update snapshots

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../filter_edit_popover.test.tsx.snap         |    2 +
 .../__snapshots__/dashboard.test.tsx.snap     | 2572 +----------------
 2 files changed, 50 insertions(+), 2524 deletions(-)

diff --git a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap
index 7fde9a70a..62c088073 100644
--- a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap
@@ -129,6 +129,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                       aria-expanded={false}
                       aria-haspopup="listbox"
                       className="euiComboBox"
+                      onFocus={[Function]}
                       onKeyDown={[Function]}
                       role="combobox"
                     >
@@ -388,6 +389,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                       aria-expanded={false}
                       aria-haspopup="listbox"
                       className="euiComboBox euiComboBox-isDisabled"
+                      onFocus={[Function]}
                       onKeyDown={[Function]}
                       role="combobox"
                     >
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 3f8ff4561..4fc8791bb 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
@@ -525,839 +525,6 @@ exports[`Dashboard component renders dashboard 1`] = `
     setStartTime={[MockFunction]}
     startTime="now-5m"
   >
-    <SearchBar
-      appConfigs={Array []}
-      endTime="now"
-      filters={Array []}
-      mode="data_prepper"
-      page="dashboard"
-      query=""
-      refresh={[Function]}
-      setEndTime={[MockFunction]}
-      setFilters={
-        [MockFunction] {
-          "calls": Array [
-            Array [
-              Array [],
-            ],
-          ],
-          "results": Array [
-            Object {
-              "type": "return",
-              "value": undefined,
-            },
-          ],
-        }
-      }
-      setQuery={[MockFunction]}
-      setStartTime={[MockFunction]}
-      startTime="now-5m"
-    >
-      <EuiFlexGroup
-        gutterSize="s"
-      >
-        <div
-          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-        >
-          <EuiFlexItem>
-            <div
-              className="euiFlexItem"
-            >
-              <EuiFieldSearch
-                compressed={false}
-                data-test-subj="search-bar-input-box"
-                fullWidth={true}
-                incremental={false}
-                isClearable={false}
-                isLoading={false}
-                onChange={[Function]}
-                onSearch={[Function]}
-                placeholder="Trace ID, trace group name, service name"
-                value=""
-              >
-                <EuiFormControlLayout
-                  compressed={false}
-                  fullWidth={true}
-                  icon="search"
-                  isLoading={false}
-                >
-                  <div
-                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
-                  >
-                    <div
-                      className="euiFormControlLayout__childrenWrapper"
-                    >
-                      <EuiValidatableControl>
-                        <input
-                          className="euiFieldSearch euiFieldSearch--fullWidth"
-                          data-test-subj="search-bar-input-box"
-                          onChange={[Function]}
-                          onKeyUp={[Function]}
-                          placeholder="Trace ID, trace group name, service name"
-                          type="search"
-                          value=""
-                        />
-                      </EuiValidatableControl>
-                      <EuiFormControlLayoutIcons
-                        compressed={false}
-                        icon="search"
-                        isLoading={false}
-                      >
-                        <div
-                          className="euiFormControlLayoutIcons"
-                        >
-                          <EuiFormControlLayoutCustomIcon
-                            size="m"
-                            type="search"
-                          >
-                            <span
-                              className="euiFormControlLayoutCustomIcon"
-                            >
-                              <EuiIcon
-                                aria-hidden="true"
-                                className="euiFormControlLayoutCustomIcon__icon"
-                                size="m"
-                                type="search"
-                              >
-                                <EuiIconSearch
-                                  aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                  focusable="false"
-                                  role="img"
-                                  style={null}
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                    focusable="false"
-                                    height={16}
-                                    role="img"
-                                    style={null}
-                                    viewBox="0 0 16 16"
-                                    width={16}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
-                                    />
-                                  </svg>
-                                </EuiIconSearch>
-                              </EuiIcon>
-                            </span>
-                          </EuiFormControlLayoutCustomIcon>
-                        </div>
-                      </EuiFormControlLayoutIcons>
-                    </div>
-                  </div>
-                </EuiFormControlLayout>
-              </EuiFieldSearch>
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-            style={
-              Object {
-                "maxWidth": "40vw",
-              }
-            }
-          >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
-              style={
-                Object {
-                  "maxWidth": "40vw",
-                }
-              }
-            >
-              <EuiSuperDatePicker
-                commonlyUsedRanges={
-                  Array [
-                    Object {
-                      "end": "now/d",
-                      "label": "Today",
-                      "start": "now/d",
-                    },
-                    Object {
-                      "end": "now/w",
-                      "label": "This week",
-                      "start": "now/w",
-                    },
-                    Object {
-                      "end": "now/M",
-                      "label": "This month",
-                      "start": "now/M",
-                    },
-                    Object {
-                      "end": "now/y",
-                      "label": "This year",
-                      "start": "now/y",
-                    },
-                    Object {
-                      "end": "now-1d/d",
-                      "label": "Yesterday",
-                      "start": "now-1d/d",
-                    },
-                    Object {
-                      "end": "now",
-                      "label": "Week to date",
-                      "start": "now/w",
-                    },
-                    Object {
-                      "end": "now",
-                      "label": "Month to date",
-                      "start": "now/M",
-                    },
-                    Object {
-                      "end": "now",
-                      "label": "Year to date",
-                      "start": "now/y",
-                    },
-                  ]
-                }
-                dateFormat=""
-                end="now"
-                isAutoRefreshOnly={false}
-                isDisabled={false}
-                isPaused={true}
-                onTimeChange={[Function]}
-                recentlyUsedRanges={Array []}
-                refreshInterval={0}
-                showUpdateButton={false}
-                start="now-5m"
-                timeFormat="HH:mm"
-              >
-                <EuiFlexGroup
-                  className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
-                  gutterSize="s"
-                  responsive={false}
-                >
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
-                  >
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
-                      >
-                        <EuiFormControlLayout
-                          className="euiSuperDatePicker"
-                          isDisabled={false}
-                          prepend={
-                            <EuiQuickSelectPopover
-                              applyTime={[Function]}
-                              commonlyUsedRanges={
-                                Array [
-                                  Object {
-                                    "end": "now/d",
-                                    "label": "Today",
-                                    "start": "now/d",
-                                  },
-                                  Object {
-                                    "end": "now/w",
-                                    "label": "This week",
-                                    "start": "now/w",
-                                  },
-                                  Object {
-                                    "end": "now/M",
-                                    "label": "This month",
-                                    "start": "now/M",
-                                  },
-                                  Object {
-                                    "end": "now/y",
-                                    "label": "This year",
-                                    "start": "now/y",
-                                  },
-                                  Object {
-                                    "end": "now-1d/d",
-                                    "label": "Yesterday",
-                                    "start": "now-1d/d",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Week to date",
-                                    "start": "now/w",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Month to date",
-                                    "start": "now/M",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Year to date",
-                                    "start": "now/y",
-                                  },
-                                ]
-                              }
-                              dateFormat=""
-                              end="now"
-                              isAutoRefreshOnly={false}
-                              isDisabled={false}
-                              isPaused={true}
-                              recentlyUsedRanges={Array []}
-                              refreshInterval={0}
-                              start="now-5m"
-                            />
-                          }
-                        >
-                          <div
-                            className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
-                          >
-                            <EuiQuickSelectPopover
-                              applyTime={[Function]}
-                              className="euiFormControlLayout__prepend"
-                              commonlyUsedRanges={
-                                Array [
-                                  Object {
-                                    "end": "now/d",
-                                    "label": "Today",
-                                    "start": "now/d",
-                                  },
-                                  Object {
-                                    "end": "now/w",
-                                    "label": "This week",
-                                    "start": "now/w",
-                                  },
-                                  Object {
-                                    "end": "now/M",
-                                    "label": "This month",
-                                    "start": "now/M",
-                                  },
-                                  Object {
-                                    "end": "now/y",
-                                    "label": "This year",
-                                    "start": "now/y",
-                                  },
-                                  Object {
-                                    "end": "now-1d/d",
-                                    "label": "Yesterday",
-                                    "start": "now-1d/d",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Week to date",
-                                    "start": "now/w",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Month to date",
-                                    "start": "now/M",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Year to date",
-                                    "start": "now/y",
-                                  },
-                                ]
-                              }
-                              dateFormat=""
-                              end="now"
-                              isAutoRefreshOnly={false}
-                              isDisabled={false}
-                              isPaused={true}
-                              key="0/.0"
-                              recentlyUsedRanges={Array []}
-                              refreshInterval={0}
-                              start="now-5m"
-                            >
-                              <EuiPopover
-                                anchorClassName="euiQuickSelectPopover__anchor"
-                                anchorPosition="downLeft"
-                                button={
-                                  <EuiButtonEmpty
-                                    aria-label="Date quick select"
-                                    className="euiFormControlLayout__prepend"
-                                    data-test-subj="superDatePickerToggleQuickMenuButton"
-                                    iconSide="right"
-                                    iconType="arrowDown"
-                                    isDisabled={false}
-                                    onClick={[Function]}
-                                    size="xs"
-                                    textProps={
-                                      Object {
-                                        "className": "euiQuickSelectPopover__buttonText",
-                                      }
-                                    }
-                                  >
-                                    <EuiIcon
-                                      type="calendar"
-                                    />
-                                  </EuiButtonEmpty>
-                                }
-                                closePopover={[Function]}
-                                display="inlineBlock"
-                                hasArrow={true}
-                                isOpen={false}
-                                ownFocus={true}
-                                panelPaddingSize="m"
-                              >
-                                <div
-                                  className="euiPopover euiPopover--anchorDownLeft"
-                                >
-                                  <div
-                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
-                                  >
-                                    <EuiButtonEmpty
-                                      aria-label="Date quick select"
-                                      className="euiFormControlLayout__prepend"
-                                      data-test-subj="superDatePickerToggleQuickMenuButton"
-                                      iconSide="right"
-                                      iconType="arrowDown"
-                                      isDisabled={false}
-                                      onClick={[Function]}
-                                      size="xs"
-                                      textProps={
-                                        Object {
-                                          "className": "euiQuickSelectPopover__buttonText",
-                                        }
-                                      }
-                                    >
-                                      <button
-                                        aria-label="Date quick select"
-                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
-                                        data-test-subj="superDatePickerToggleQuickMenuButton"
-                                        disabled={false}
-                                        onClick={[Function]}
-                                        type="button"
-                                      >
-                                        <EuiButtonContent
-                                          className="euiButtonEmpty__content"
-                                          iconSide="right"
-                                          iconSize="s"
-                                          iconType="arrowDown"
-                                          textProps={
-                                            Object {
-                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                                          >
-                                            <EuiIcon
-                                              className="euiButtonContent__icon"
-                                              color="inherit"
-                                              size="s"
-                                              type="arrowDown"
-                                            >
-                                              <EuiIconArrowDown
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
-                                                focusable="false"
-                                                role="img"
-                                                style={null}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
-                                                  focusable="false"
-                                                  height={16}
-                                                  role="img"
-                                                  style={null}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                    fillRule="non-zero"
-                                                  />
-                                                </svg>
-                                              </EuiIconArrowDown>
-                                            </EuiIcon>
-                                            <span
-                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
-                                            >
-                                              <EuiIcon
-                                                type="calendar"
-                                              >
-                                                <EuiIconCalendar
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
-                                                      fillRule="evenodd"
-                                                    />
-                                                  </svg>
-                                                </EuiIconCalendar>
-                                              </EuiIcon>
-                                            </span>
-                                          </span>
-                                        </EuiButtonContent>
-                                      </button>
-                                    </EuiButtonEmpty>
-                                  </div>
-                                </div>
-                              </EuiPopover>
-                            </EuiQuickSelectPopover>
-                            <div
-                              className="euiFormControlLayout__childrenWrapper"
-                            >
-                              <EuiDatePickerRange
-                                className="euiDatePickerRange--inGroup"
-                                endDateControl={<div />}
-                                iconType={false}
-                                isCustom={true}
-                                startDateControl={<div />}
-                              >
-                                <div
-                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
-                                >
-                                  <button
-                                    className="euiSuperDatePicker__prettyFormat"
-                                    data-test-subj="superDatePickerShowDatesButton"
-                                    disabled={false}
-                                    onClick={[Function]}
-                                  >
-                                    Last 5 minutes
-                                    <span
-                                      className="euiSuperDatePicker__prettyFormatLink"
-                                    >
-                                      <EuiI18n
-                                        default="Show dates"
-                                        token="euiSuperDatePicker.showDatesButtonLabel"
-                                      >
-                                        Show dates
-                                      </EuiI18n>
-                                    </span>
-                                  </button>
-                                </div>
-                              </EuiDatePickerRange>
-                              <EuiFormControlLayoutIcons />
-                            </div>
-                          </div>
-                        </EuiFormControlLayout>
-                      </div>
-                    </EuiFlexItem>
-                  </div>
-                </EuiFlexGroup>
-              </EuiSuperDatePicker>
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-          >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
-            >
-              <EuiButton
-                data-click-metric-element="trace_analytics.refresh_button"
-                data-test-subj="superDatePickerApplyTimeButton"
-                iconType="refresh"
-                onClick={[Function]}
-              >
-                <EuiButtonDisplay
-                  baseClassName="euiButton"
-                  data-click-metric-element="trace_analytics.refresh_button"
-                  data-test-subj="superDatePickerApplyTimeButton"
-                  disabled={false}
-                  element="button"
-                  iconType="refresh"
-                  isDisabled={false}
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <button
-                    className="euiButton euiButton--primary"
-                    data-click-metric-element="trace_analytics.refresh_button"
-                    data-test-subj="superDatePickerApplyTimeButton"
-                    disabled={false}
-                    onClick={[Function]}
-                    style={
-                      Object {
-                        "minWidth": undefined,
-                      }
-                    }
-                    type="button"
-                  >
-                    <EuiButtonContent
-                      className="euiButton__content"
-                      iconSide="left"
-                      iconType="refresh"
-                      textProps={
-                        Object {
-                          "className": "euiButton__text",
-                        }
-                      }
-                    >
-                      <span
-                        className="euiButtonContent euiButton__content"
-                      >
-                        <EuiIcon
-                          className="euiButtonContent__icon"
-                          color="inherit"
-                          size="m"
-                          type="refresh"
-                        >
-                          <EuiIconRefresh
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
-                          >
-                            <svg
-                              aria-hidden={true}
-                              className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                              focusable="false"
-                              height={16}
-                              role="img"
-                              style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M11.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
-                              />
-                            </svg>
-                          </EuiIconRefresh>
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
-                        >
-                          Refresh
-                        </span>
-                      </span>
-                    </EuiButtonContent>
-                  </button>
-                </EuiButtonDisplay>
-              </EuiButton>
-            </div>
-          </EuiFlexItem>
-        </div>
-      </EuiFlexGroup>
-      <EuiSpacer
-        size="s"
-      >
-        <div
-          className="euiSpacer euiSpacer--s"
-        />
-      </EuiSpacer>
-      <Filters
-        appConfigs={Array []}
-        filters={Array []}
-        mode="data_prepper"
-        page="dashboard"
-        setFilters={
-          [MockFunction] {
-            "calls": Array [
-              Array [
-                Array [],
-              ],
-            ],
-            "results": Array [
-              Object {
-                "type": "return",
-                "value": undefined,
-              },
-            ],
-          }
-        }
-      >
-        <EuiFlexGroup
-          alignItems="center"
-          gutterSize="xs"
-          responsive={false}
-          style={
-            Object {
-              "minHeight": 32,
-            }
-          }
-        >
-          <div
-            className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-            style={
-              Object {
-                "minHeight": 32,
-              }
-            }
-          >
-            <EuiFlexItem
-              grow={false}
-            >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
-              >
-                <GlobalFilterButton>
-                  <EuiPopover
-                    anchorPosition="rightUp"
-                    button={
-                      <EuiButtonIcon
-                        aria-label="Change all filters"
-                        iconType="filter"
-                        onClick={[Function]}
-                        title="Change all filters"
-                      />
-                    }
-                    closePopover={[Function]}
-                    data-test-subj="global-filter-button"
-                    display="inlineBlock"
-                    hasArrow={true}
-                    isOpen={false}
-                    ownFocus={true}
-                    panelPaddingSize="none"
-                    withTitle={true}
-                  >
-                    <div
-                      className="euiPopover euiPopover--anchorRightUp"
-                      data-test-subj="global-filter-button"
-                      withTitle={true}
-                    >
-                      <div
-                        className="euiPopover__anchor"
-                      >
-                        <EuiButtonIcon
-                          aria-label="Change all filters"
-                          iconType="filter"
-                          onClick={[Function]}
-                          title="Change all filters"
-                        >
-                          <button
-                            aria-label="Change all filters"
-                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                            disabled={false}
-                            onClick={[Function]}
-                            title="Change all filters"
-                            type="button"
-                          >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              color="inherit"
-                              size="m"
-                              type="filter"
-                            >
-                              <EuiIconFilter
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
-                                  focusable="false"
-                                  height={16}
-                                  role="img"
-                                  style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M7.999 15.999a8 8 0 110-16 8 8 0 010 16zM8 15A7 7 0 108 1a7 7 0 000 14zM3.5 5h9a.5.5 0 110 1h-9a.5.5 0 010-1zm2 3h5a.5.5 0 110 1h-5a.5.5 0 010-1zm2 3h1a.5.5 0 110 1h-1a.5.5 0 110-1z"
-                                    fillRule="evenodd"
-                                  />
-                                </svg>
-                              </EuiIconFilter>
-                            </EuiIcon>
-                          </button>
-                        </EuiButtonIcon>
-                      </div>
-                    </div>
-                  </EuiPopover>
-                </GlobalFilterButton>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
-            >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
-              >
-                <AddFilterButton>
-                  <EuiPopover
-                    anchorPosition="downLeft"
-                    button={
-                      <EuiButtonEmpty
-                        onClick={[Function]}
-                        size="xs"
-                      >
-                        + Add filter
-                      </EuiButtonEmpty>
-                    }
-                    closePopover={[Function]}
-                    data-test-subj="addfilter"
-                    display="inlineBlock"
-                    hasArrow={true}
-                    isOpen={false}
-                    ownFocus={true}
-                    panelPaddingSize="m"
-                    withTitle={true}
-                  >
-                    <div
-                      className="euiPopover euiPopover--anchorDownLeft"
-                      data-test-subj="addfilter"
-                      withTitle={true}
-                    >
-                      <div
-                        className="euiPopover__anchor"
-                      >
-                        <EuiButtonEmpty
-                          onClick={[Function]}
-                          size="xs"
-                        >
-                          <button
-                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
-                            disabled={false}
-                            onClick={[Function]}
-                            type="button"
-                          >
-                            <EuiButtonContent
-                              className="euiButtonEmpty__content"
-                              iconSide="left"
-                              iconSize="s"
-                              textProps={
-                                Object {
-                                  "className": "euiButtonEmpty__text",
-                                }
-                              }
-                            >
-                              <span
-                                className="euiButtonContent euiButtonEmpty__content"
-                              >
-                                <span
-                                  className="euiButtonEmpty__text"
-                                >
-                                  + Add filter
-                                </span>
-                              </span>
-                            </EuiButtonContent>
-                          </button>
-                        </EuiButtonEmpty>
-                      </div>
-                    </div>
-                  </EuiPopover>
-                </AddFilterButton>
-              </div>
-            </EuiFlexItem>
-          </div>
-        </EuiFlexGroup>
-      </Filters>
-    </SearchBar>
-    <EuiSpacer
-      size="m"
-    >
-      <div
-        className="euiSpacer euiSpacer--m"
-      />
-    </EuiSpacer>
     <div>
       <DashboardTable
         addFilter={[Function]}
@@ -2427,854 +1594,44 @@ exports[`Dashboard component renders empty dashboard 1`] = `
       Array [
         Object {
           "id": "jaeger",
-          "title": "Jaeger",
-        },
-        Object {
-          "id": "data_prepper",
-          "title": "Data Prepper",
-        },
-      ]
-    }
-    page="dashboard"
-    parentBreadcrumbs={
-      Array [
-        Object {
-          "href": "test#/",
-          "text": "test",
-        },
-      ]
-    }
-    query=""
-    setEndTime={[MockFunction]}
-    setFilters={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            Array [],
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
-    setQuery={[MockFunction]}
-    setStartTime={[MockFunction]}
-    startTime="now-5m"
-  >
-    <SearchBar
-      appConfigs={Array []}
-      endTime="now"
-      filters={Array []}
-      mode="data_prepper"
-      page="dashboard"
-      query=""
-      refresh={[Function]}
-      setEndTime={[MockFunction]}
-      setFilters={
-        [MockFunction] {
-          "calls": Array [
-            Array [
-              Array [],
-            ],
-          ],
-          "results": Array [
-            Object {
-              "type": "return",
-              "value": undefined,
-            },
-          ],
-        }
-      }
-      setQuery={[MockFunction]}
-      setStartTime={[MockFunction]}
-      startTime="now-5m"
-    >
-      <EuiFlexGroup
-        gutterSize="s"
-      >
-        <div
-          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-        >
-          <EuiFlexItem>
-            <div
-              className="euiFlexItem"
-            >
-              <EuiFieldSearch
-                compressed={false}
-                data-test-subj="search-bar-input-box"
-                fullWidth={true}
-                incremental={false}
-                isClearable={false}
-                isLoading={false}
-                onChange={[Function]}
-                onSearch={[Function]}
-                placeholder="Trace ID, trace group name, service name"
-                value=""
-              >
-                <EuiFormControlLayout
-                  compressed={false}
-                  fullWidth={true}
-                  icon="search"
-                  isLoading={false}
-                >
-                  <div
-                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
-                  >
-                    <div
-                      className="euiFormControlLayout__childrenWrapper"
-                    >
-                      <EuiValidatableControl>
-                        <input
-                          className="euiFieldSearch euiFieldSearch--fullWidth"
-                          data-test-subj="search-bar-input-box"
-                          onChange={[Function]}
-                          onKeyUp={[Function]}
-                          placeholder="Trace ID, trace group name, service name"
-                          type="search"
-                          value=""
-                        />
-                      </EuiValidatableControl>
-                      <EuiFormControlLayoutIcons
-                        compressed={false}
-                        icon="search"
-                        isLoading={false}
-                      >
-                        <div
-                          className="euiFormControlLayoutIcons"
-                        >
-                          <EuiFormControlLayoutCustomIcon
-                            size="m"
-                            type="search"
-                          >
-                            <span
-                              className="euiFormControlLayoutCustomIcon"
-                            >
-                              <EuiIcon
-                                aria-hidden="true"
-                                className="euiFormControlLayoutCustomIcon__icon"
-                                size="m"
-                                type="search"
-                              >
-                                <EuiIconEmpty
-                                  aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                  focusable="false"
-                                  role="img"
-                                  style={null}
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                    focusable="false"
-                                    height={16}
-                                    role="img"
-                                    style={null}
-                                    viewBox="0 0 16 16"
-                                    width={16}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  />
-                                </EuiIconEmpty>
-                              </EuiIcon>
-                            </span>
-                          </EuiFormControlLayoutCustomIcon>
-                        </div>
-                      </EuiFormControlLayoutIcons>
-                    </div>
-                  </div>
-                </EuiFormControlLayout>
-              </EuiFieldSearch>
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-            style={
-              Object {
-                "maxWidth": "40vw",
-              }
-            }
-          >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
-              style={
-                Object {
-                  "maxWidth": "40vw",
-                }
-              }
-            >
-              <EuiSuperDatePicker
-                commonlyUsedRanges={
-                  Array [
-                    Object {
-                      "end": "now/d",
-                      "label": "Today",
-                      "start": "now/d",
-                    },
-                    Object {
-                      "end": "now/w",
-                      "label": "This week",
-                      "start": "now/w",
-                    },
-                    Object {
-                      "end": "now/M",
-                      "label": "This month",
-                      "start": "now/M",
-                    },
-                    Object {
-                      "end": "now/y",
-                      "label": "This year",
-                      "start": "now/y",
-                    },
-                    Object {
-                      "end": "now-1d/d",
-                      "label": "Yesterday",
-                      "start": "now-1d/d",
-                    },
-                    Object {
-                      "end": "now",
-                      "label": "Week to date",
-                      "start": "now/w",
-                    },
-                    Object {
-                      "end": "now",
-                      "label": "Month to date",
-                      "start": "now/M",
-                    },
-                    Object {
-                      "end": "now",
-                      "label": "Year to date",
-                      "start": "now/y",
-                    },
-                  ]
-                }
-                dateFormat=""
-                end="now"
-                isAutoRefreshOnly={false}
-                isDisabled={false}
-                isPaused={true}
-                onTimeChange={[Function]}
-                recentlyUsedRanges={Array []}
-                refreshInterval={0}
-                showUpdateButton={false}
-                start="now-5m"
-                timeFormat="HH:mm"
-              >
-                <EuiFlexGroup
-                  className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
-                  gutterSize="s"
-                  responsive={false}
-                >
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
-                  >
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
-                      >
-                        <EuiFormControlLayout
-                          className="euiSuperDatePicker"
-                          isDisabled={false}
-                          prepend={
-                            <EuiQuickSelectPopover
-                              applyTime={[Function]}
-                              commonlyUsedRanges={
-                                Array [
-                                  Object {
-                                    "end": "now/d",
-                                    "label": "Today",
-                                    "start": "now/d",
-                                  },
-                                  Object {
-                                    "end": "now/w",
-                                    "label": "This week",
-                                    "start": "now/w",
-                                  },
-                                  Object {
-                                    "end": "now/M",
-                                    "label": "This month",
-                                    "start": "now/M",
-                                  },
-                                  Object {
-                                    "end": "now/y",
-                                    "label": "This year",
-                                    "start": "now/y",
-                                  },
-                                  Object {
-                                    "end": "now-1d/d",
-                                    "label": "Yesterday",
-                                    "start": "now-1d/d",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Week to date",
-                                    "start": "now/w",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Month to date",
-                                    "start": "now/M",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Year to date",
-                                    "start": "now/y",
-                                  },
-                                ]
-                              }
-                              dateFormat=""
-                              end="now"
-                              isAutoRefreshOnly={false}
-                              isDisabled={false}
-                              isPaused={true}
-                              recentlyUsedRanges={Array []}
-                              refreshInterval={0}
-                              start="now-5m"
-                            />
-                          }
-                        >
-                          <div
-                            className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
-                          >
-                            <EuiQuickSelectPopover
-                              applyTime={[Function]}
-                              className="euiFormControlLayout__prepend"
-                              commonlyUsedRanges={
-                                Array [
-                                  Object {
-                                    "end": "now/d",
-                                    "label": "Today",
-                                    "start": "now/d",
-                                  },
-                                  Object {
-                                    "end": "now/w",
-                                    "label": "This week",
-                                    "start": "now/w",
-                                  },
-                                  Object {
-                                    "end": "now/M",
-                                    "label": "This month",
-                                    "start": "now/M",
-                                  },
-                                  Object {
-                                    "end": "now/y",
-                                    "label": "This year",
-                                    "start": "now/y",
-                                  },
-                                  Object {
-                                    "end": "now-1d/d",
-                                    "label": "Yesterday",
-                                    "start": "now-1d/d",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Week to date",
-                                    "start": "now/w",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Month to date",
-                                    "start": "now/M",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Year to date",
-                                    "start": "now/y",
-                                  },
-                                ]
-                              }
-                              dateFormat=""
-                              end="now"
-                              isAutoRefreshOnly={false}
-                              isDisabled={false}
-                              isPaused={true}
-                              key="0/.0"
-                              recentlyUsedRanges={Array []}
-                              refreshInterval={0}
-                              start="now-5m"
-                            >
-                              <EuiPopover
-                                anchorClassName="euiQuickSelectPopover__anchor"
-                                anchorPosition="downLeft"
-                                button={
-                                  <EuiButtonEmpty
-                                    aria-label="Date quick select"
-                                    className="euiFormControlLayout__prepend"
-                                    data-test-subj="superDatePickerToggleQuickMenuButton"
-                                    iconSide="right"
-                                    iconType="arrowDown"
-                                    isDisabled={false}
-                                    onClick={[Function]}
-                                    size="xs"
-                                    textProps={
-                                      Object {
-                                        "className": "euiQuickSelectPopover__buttonText",
-                                      }
-                                    }
-                                  >
-                                    <EuiIcon
-                                      type="calendar"
-                                    />
-                                  </EuiButtonEmpty>
-                                }
-                                closePopover={[Function]}
-                                display="inlineBlock"
-                                hasArrow={true}
-                                isOpen={false}
-                                ownFocus={true}
-                                panelPaddingSize="m"
-                              >
-                                <div
-                                  className="euiPopover euiPopover--anchorDownLeft"
-                                >
-                                  <div
-                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
-                                  >
-                                    <EuiButtonEmpty
-                                      aria-label="Date quick select"
-                                      className="euiFormControlLayout__prepend"
-                                      data-test-subj="superDatePickerToggleQuickMenuButton"
-                                      iconSide="right"
-                                      iconType="arrowDown"
-                                      isDisabled={false}
-                                      onClick={[Function]}
-                                      size="xs"
-                                      textProps={
-                                        Object {
-                                          "className": "euiQuickSelectPopover__buttonText",
-                                        }
-                                      }
-                                    >
-                                      <button
-                                        aria-label="Date quick select"
-                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
-                                        data-test-subj="superDatePickerToggleQuickMenuButton"
-                                        disabled={false}
-                                        onClick={[Function]}
-                                        type="button"
-                                      >
-                                        <EuiButtonContent
-                                          className="euiButtonEmpty__content"
-                                          iconSide="right"
-                                          iconSize="s"
-                                          iconType="arrowDown"
-                                          textProps={
-                                            Object {
-                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                                          >
-                                            <EuiIcon
-                                              className="euiButtonContent__icon"
-                                              color="inherit"
-                                              size="s"
-                                              type="arrowDown"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                                focusable="false"
-                                                role="img"
-                                                style={null}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                                  focusable="false"
-                                                  height={16}
-                                                  role="img"
-                                                  style={null}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                            <span
-                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
-                                            >
-                                              <EuiIcon
-                                                type="calendar"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </span>
-                                        </EuiButtonContent>
-                                      </button>
-                                    </EuiButtonEmpty>
-                                  </div>
-                                </div>
-                              </EuiPopover>
-                            </EuiQuickSelectPopover>
-                            <div
-                              className="euiFormControlLayout__childrenWrapper"
-                            >
-                              <EuiDatePickerRange
-                                className="euiDatePickerRange--inGroup"
-                                endDateControl={<div />}
-                                iconType={false}
-                                isCustom={true}
-                                startDateControl={<div />}
-                              >
-                                <div
-                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
-                                >
-                                  <button
-                                    className="euiSuperDatePicker__prettyFormat"
-                                    data-test-subj="superDatePickerShowDatesButton"
-                                    disabled={false}
-                                    onClick={[Function]}
-                                  >
-                                    Last 5 minutes
-                                    <span
-                                      className="euiSuperDatePicker__prettyFormatLink"
-                                    >
-                                      <EuiI18n
-                                        default="Show dates"
-                                        token="euiSuperDatePicker.showDatesButtonLabel"
-                                      >
-                                        Show dates
-                                      </EuiI18n>
-                                    </span>
-                                  </button>
-                                </div>
-                              </EuiDatePickerRange>
-                              <EuiFormControlLayoutIcons />
-                            </div>
-                          </div>
-                        </EuiFormControlLayout>
-                      </div>
-                    </EuiFlexItem>
-                  </div>
-                </EuiFlexGroup>
-              </EuiSuperDatePicker>
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-          >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
-            >
-              <EuiButton
-                data-click-metric-element="trace_analytics.refresh_button"
-                data-test-subj="superDatePickerApplyTimeButton"
-                iconType="refresh"
-                onClick={[Function]}
-              >
-                <EuiButtonDisplay
-                  baseClassName="euiButton"
-                  data-click-metric-element="trace_analytics.refresh_button"
-                  data-test-subj="superDatePickerApplyTimeButton"
-                  disabled={false}
-                  element="button"
-                  iconType="refresh"
-                  isDisabled={false}
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <button
-                    className="euiButton euiButton--primary"
-                    data-click-metric-element="trace_analytics.refresh_button"
-                    data-test-subj="superDatePickerApplyTimeButton"
-                    disabled={false}
-                    onClick={[Function]}
-                    style={
-                      Object {
-                        "minWidth": undefined,
-                      }
-                    }
-                    type="button"
-                  >
-                    <EuiButtonContent
-                      className="euiButton__content"
-                      iconSide="left"
-                      iconType="refresh"
-                      textProps={
-                        Object {
-                          "className": "euiButton__text",
-                        }
-                      }
-                    >
-                      <span
-                        className="euiButtonContent euiButton__content"
-                      >
-                        <EuiIcon
-                          className="euiButtonContent__icon"
-                          color="inherit"
-                          size="m"
-                          type="refresh"
-                        >
-                          <EuiIconEmpty
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
-                          >
-                            <svg
-                              aria-hidden={true}
-                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                              focusable="false"
-                              height={16}
-                              role="img"
-                              style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
-                            />
-                          </EuiIconEmpty>
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
-                        >
-                          Refresh
-                        </span>
-                      </span>
-                    </EuiButtonContent>
-                  </button>
-                </EuiButtonDisplay>
-              </EuiButton>
-            </div>
-          </EuiFlexItem>
-        </div>
-      </EuiFlexGroup>
-      <EuiSpacer
-        size="s"
-      >
-        <div
-          className="euiSpacer euiSpacer--s"
-        />
-      </EuiSpacer>
-      <Filters
-        appConfigs={Array []}
-        filters={Array []}
-        mode="data_prepper"
-        page="dashboard"
-        setFilters={
-          [MockFunction] {
-            "calls": Array [
-              Array [
-                Array [],
-              ],
-            ],
-            "results": Array [
-              Object {
-                "type": "return",
-                "value": undefined,
-              },
-            ],
-          }
-        }
-      >
-        <EuiFlexGroup
-          alignItems="center"
-          gutterSize="xs"
-          responsive={false}
-          style={
-            Object {
-              "minHeight": 32,
-            }
-          }
-        >
-          <div
-            className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-            style={
-              Object {
-                "minHeight": 32,
-              }
-            }
-          >
-            <EuiFlexItem
-              grow={false}
-            >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
-              >
-                <GlobalFilterButton>
-                  <EuiPopover
-                    anchorPosition="rightUp"
-                    button={
-                      <EuiButtonIcon
-                        aria-label="Change all filters"
-                        iconType="filter"
-                        onClick={[Function]}
-                        title="Change all filters"
-                      />
-                    }
-                    closePopover={[Function]}
-                    data-test-subj="global-filter-button"
-                    display="inlineBlock"
-                    hasArrow={true}
-                    isOpen={false}
-                    ownFocus={true}
-                    panelPaddingSize="none"
-                    withTitle={true}
-                  >
-                    <div
-                      className="euiPopover euiPopover--anchorRightUp"
-                      data-test-subj="global-filter-button"
-                      withTitle={true}
-                    >
-                      <div
-                        className="euiPopover__anchor"
-                      >
-                        <EuiButtonIcon
-                          aria-label="Change all filters"
-                          iconType="filter"
-                          onClick={[Function]}
-                          title="Change all filters"
-                        >
-                          <button
-                            aria-label="Change all filters"
-                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                            disabled={false}
-                            onClick={[Function]}
-                            title="Change all filters"
-                            type="button"
-                          >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              color="inherit"
-                              size="m"
-                              type="filter"
-                            >
-                              <EuiIconEmpty
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                  focusable="false"
-                                  height={16}
-                                  role="img"
-                                  style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                />
-                              </EuiIconEmpty>
-                            </EuiIcon>
-                          </button>
-                        </EuiButtonIcon>
-                      </div>
-                    </div>
-                  </EuiPopover>
-                </GlobalFilterButton>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
-            >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
-              >
-                <AddFilterButton>
-                  <EuiPopover
-                    anchorPosition="downLeft"
-                    button={
-                      <EuiButtonEmpty
-                        onClick={[Function]}
-                        size="xs"
-                      >
-                        + Add filter
-                      </EuiButtonEmpty>
-                    }
-                    closePopover={[Function]}
-                    data-test-subj="addfilter"
-                    display="inlineBlock"
-                    hasArrow={true}
-                    isOpen={false}
-                    ownFocus={true}
-                    panelPaddingSize="m"
-                    withTitle={true}
-                  >
-                    <div
-                      className="euiPopover euiPopover--anchorDownLeft"
-                      data-test-subj="addfilter"
-                      withTitle={true}
-                    >
-                      <div
-                        className="euiPopover__anchor"
-                      >
-                        <EuiButtonEmpty
-                          onClick={[Function]}
-                          size="xs"
-                        >
-                          <button
-                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
-                            disabled={false}
-                            onClick={[Function]}
-                            type="button"
-                          >
-                            <EuiButtonContent
-                              className="euiButtonEmpty__content"
-                              iconSide="left"
-                              iconSize="s"
-                              textProps={
-                                Object {
-                                  "className": "euiButtonEmpty__text",
-                                }
-                              }
-                            >
-                              <span
-                                className="euiButtonContent euiButtonEmpty__content"
-                              >
-                                <span
-                                  className="euiButtonEmpty__text"
-                                >
-                                  + Add filter
-                                </span>
-                              </span>
-                            </EuiButtonContent>
-                          </button>
-                        </EuiButtonEmpty>
-                      </div>
-                    </div>
-                  </EuiPopover>
-                </AddFilterButton>
-              </div>
-            </EuiFlexItem>
-          </div>
-        </EuiFlexGroup>
-      </Filters>
-    </SearchBar>
-    <EuiSpacer
-      size="m"
-    >
-      <div
-        className="euiSpacer euiSpacer--m"
-      />
-    </EuiSpacer>
+          "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"
+  >
     <div>
       <DashboardTable
         addFilter={[Function]}
@@ -4389,839 +2746,6 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
     setStartTime={[MockFunction]}
     startTime="now-5m"
   >
-    <SearchBar
-      appConfigs={Array []}
-      endTime="now"
-      filters={Array []}
-      mode="jaeger"
-      page="dashboard"
-      query=""
-      refresh={[Function]}
-      setEndTime={[MockFunction]}
-      setFilters={
-        [MockFunction] {
-          "calls": Array [
-            Array [
-              Array [],
-            ],
-          ],
-          "results": Array [
-            Object {
-              "type": "return",
-              "value": undefined,
-            },
-          ],
-        }
-      }
-      setQuery={[MockFunction]}
-      setStartTime={[MockFunction]}
-      startTime="now-5m"
-    >
-      <EuiFlexGroup
-        gutterSize="s"
-      >
-        <div
-          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-        >
-          <EuiFlexItem>
-            <div
-              className="euiFlexItem"
-            >
-              <EuiFieldSearch
-                compressed={false}
-                data-test-subj="search-bar-input-box"
-                fullWidth={true}
-                incremental={false}
-                isClearable={false}
-                isLoading={false}
-                onChange={[Function]}
-                onSearch={[Function]}
-                placeholder="Trace ID, trace group name, service name"
-                value=""
-              >
-                <EuiFormControlLayout
-                  compressed={false}
-                  fullWidth={true}
-                  icon="search"
-                  isLoading={false}
-                >
-                  <div
-                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
-                  >
-                    <div
-                      className="euiFormControlLayout__childrenWrapper"
-                    >
-                      <EuiValidatableControl>
-                        <input
-                          className="euiFieldSearch euiFieldSearch--fullWidth"
-                          data-test-subj="search-bar-input-box"
-                          onChange={[Function]}
-                          onKeyUp={[Function]}
-                          placeholder="Trace ID, trace group name, service name"
-                          type="search"
-                          value=""
-                        />
-                      </EuiValidatableControl>
-                      <EuiFormControlLayoutIcons
-                        compressed={false}
-                        icon="search"
-                        isLoading={false}
-                      >
-                        <div
-                          className="euiFormControlLayoutIcons"
-                        >
-                          <EuiFormControlLayoutCustomIcon
-                            size="m"
-                            type="search"
-                          >
-                            <span
-                              className="euiFormControlLayoutCustomIcon"
-                            >
-                              <EuiIcon
-                                aria-hidden="true"
-                                className="euiFormControlLayoutCustomIcon__icon"
-                                size="m"
-                                type="search"
-                              >
-                                <EuiIconSearch
-                                  aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                  focusable="false"
-                                  role="img"
-                                  style={null}
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                    focusable="false"
-                                    height={16}
-                                    role="img"
-                                    style={null}
-                                    viewBox="0 0 16 16"
-                                    width={16}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
-                                    />
-                                  </svg>
-                                </EuiIconSearch>
-                              </EuiIcon>
-                            </span>
-                          </EuiFormControlLayoutCustomIcon>
-                        </div>
-                      </EuiFormControlLayoutIcons>
-                    </div>
-                  </div>
-                </EuiFormControlLayout>
-              </EuiFieldSearch>
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-            style={
-              Object {
-                "maxWidth": "40vw",
-              }
-            }
-          >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
-              style={
-                Object {
-                  "maxWidth": "40vw",
-                }
-              }
-            >
-              <EuiSuperDatePicker
-                commonlyUsedRanges={
-                  Array [
-                    Object {
-                      "end": "now/d",
-                      "label": "Today",
-                      "start": "now/d",
-                    },
-                    Object {
-                      "end": "now/w",
-                      "label": "This week",
-                      "start": "now/w",
-                    },
-                    Object {
-                      "end": "now/M",
-                      "label": "This month",
-                      "start": "now/M",
-                    },
-                    Object {
-                      "end": "now/y",
-                      "label": "This year",
-                      "start": "now/y",
-                    },
-                    Object {
-                      "end": "now-1d/d",
-                      "label": "Yesterday",
-                      "start": "now-1d/d",
-                    },
-                    Object {
-                      "end": "now",
-                      "label": "Week to date",
-                      "start": "now/w",
-                    },
-                    Object {
-                      "end": "now",
-                      "label": "Month to date",
-                      "start": "now/M",
-                    },
-                    Object {
-                      "end": "now",
-                      "label": "Year to date",
-                      "start": "now/y",
-                    },
-                  ]
-                }
-                dateFormat=""
-                end="now"
-                isAutoRefreshOnly={false}
-                isDisabled={false}
-                isPaused={true}
-                onTimeChange={[Function]}
-                recentlyUsedRanges={Array []}
-                refreshInterval={0}
-                showUpdateButton={false}
-                start="now-5m"
-                timeFormat="HH:mm"
-              >
-                <EuiFlexGroup
-                  className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
-                  gutterSize="s"
-                  responsive={false}
-                >
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
-                  >
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
-                      >
-                        <EuiFormControlLayout
-                          className="euiSuperDatePicker"
-                          isDisabled={false}
-                          prepend={
-                            <EuiQuickSelectPopover
-                              applyTime={[Function]}
-                              commonlyUsedRanges={
-                                Array [
-                                  Object {
-                                    "end": "now/d",
-                                    "label": "Today",
-                                    "start": "now/d",
-                                  },
-                                  Object {
-                                    "end": "now/w",
-                                    "label": "This week",
-                                    "start": "now/w",
-                                  },
-                                  Object {
-                                    "end": "now/M",
-                                    "label": "This month",
-                                    "start": "now/M",
-                                  },
-                                  Object {
-                                    "end": "now/y",
-                                    "label": "This year",
-                                    "start": "now/y",
-                                  },
-                                  Object {
-                                    "end": "now-1d/d",
-                                    "label": "Yesterday",
-                                    "start": "now-1d/d",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Week to date",
-                                    "start": "now/w",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Month to date",
-                                    "start": "now/M",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Year to date",
-                                    "start": "now/y",
-                                  },
-                                ]
-                              }
-                              dateFormat=""
-                              end="now"
-                              isAutoRefreshOnly={false}
-                              isDisabled={false}
-                              isPaused={true}
-                              recentlyUsedRanges={Array []}
-                              refreshInterval={0}
-                              start="now-5m"
-                            />
-                          }
-                        >
-                          <div
-                            className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
-                          >
-                            <EuiQuickSelectPopover
-                              applyTime={[Function]}
-                              className="euiFormControlLayout__prepend"
-                              commonlyUsedRanges={
-                                Array [
-                                  Object {
-                                    "end": "now/d",
-                                    "label": "Today",
-                                    "start": "now/d",
-                                  },
-                                  Object {
-                                    "end": "now/w",
-                                    "label": "This week",
-                                    "start": "now/w",
-                                  },
-                                  Object {
-                                    "end": "now/M",
-                                    "label": "This month",
-                                    "start": "now/M",
-                                  },
-                                  Object {
-                                    "end": "now/y",
-                                    "label": "This year",
-                                    "start": "now/y",
-                                  },
-                                  Object {
-                                    "end": "now-1d/d",
-                                    "label": "Yesterday",
-                                    "start": "now-1d/d",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Week to date",
-                                    "start": "now/w",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Month to date",
-                                    "start": "now/M",
-                                  },
-                                  Object {
-                                    "end": "now",
-                                    "label": "Year to date",
-                                    "start": "now/y",
-                                  },
-                                ]
-                              }
-                              dateFormat=""
-                              end="now"
-                              isAutoRefreshOnly={false}
-                              isDisabled={false}
-                              isPaused={true}
-                              key="0/.0"
-                              recentlyUsedRanges={Array []}
-                              refreshInterval={0}
-                              start="now-5m"
-                            >
-                              <EuiPopover
-                                anchorClassName="euiQuickSelectPopover__anchor"
-                                anchorPosition="downLeft"
-                                button={
-                                  <EuiButtonEmpty
-                                    aria-label="Date quick select"
-                                    className="euiFormControlLayout__prepend"
-                                    data-test-subj="superDatePickerToggleQuickMenuButton"
-                                    iconSide="right"
-                                    iconType="arrowDown"
-                                    isDisabled={false}
-                                    onClick={[Function]}
-                                    size="xs"
-                                    textProps={
-                                      Object {
-                                        "className": "euiQuickSelectPopover__buttonText",
-                                      }
-                                    }
-                                  >
-                                    <EuiIcon
-                                      type="calendar"
-                                    />
-                                  </EuiButtonEmpty>
-                                }
-                                closePopover={[Function]}
-                                display="inlineBlock"
-                                hasArrow={true}
-                                isOpen={false}
-                                ownFocus={true}
-                                panelPaddingSize="m"
-                              >
-                                <div
-                                  className="euiPopover euiPopover--anchorDownLeft"
-                                >
-                                  <div
-                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
-                                  >
-                                    <EuiButtonEmpty
-                                      aria-label="Date quick select"
-                                      className="euiFormControlLayout__prepend"
-                                      data-test-subj="superDatePickerToggleQuickMenuButton"
-                                      iconSide="right"
-                                      iconType="arrowDown"
-                                      isDisabled={false}
-                                      onClick={[Function]}
-                                      size="xs"
-                                      textProps={
-                                        Object {
-                                          "className": "euiQuickSelectPopover__buttonText",
-                                        }
-                                      }
-                                    >
-                                      <button
-                                        aria-label="Date quick select"
-                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
-                                        data-test-subj="superDatePickerToggleQuickMenuButton"
-                                        disabled={false}
-                                        onClick={[Function]}
-                                        type="button"
-                                      >
-                                        <EuiButtonContent
-                                          className="euiButtonEmpty__content"
-                                          iconSide="right"
-                                          iconSize="s"
-                                          iconType="arrowDown"
-                                          textProps={
-                                            Object {
-                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                                          >
-                                            <EuiIcon
-                                              className="euiButtonContent__icon"
-                                              color="inherit"
-                                              size="s"
-                                              type="arrowDown"
-                                            >
-                                              <EuiIconArrowDown
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
-                                                focusable="false"
-                                                role="img"
-                                                style={null}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
-                                                  focusable="false"
-                                                  height={16}
-                                                  role="img"
-                                                  style={null}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                    fillRule="non-zero"
-                                                  />
-                                                </svg>
-                                              </EuiIconArrowDown>
-                                            </EuiIcon>
-                                            <span
-                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
-                                            >
-                                              <EuiIcon
-                                                type="calendar"
-                                              >
-                                                <EuiIconCalendar
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
-                                                      fillRule="evenodd"
-                                                    />
-                                                  </svg>
-                                                </EuiIconCalendar>
-                                              </EuiIcon>
-                                            </span>
-                                          </span>
-                                        </EuiButtonContent>
-                                      </button>
-                                    </EuiButtonEmpty>
-                                  </div>
-                                </div>
-                              </EuiPopover>
-                            </EuiQuickSelectPopover>
-                            <div
-                              className="euiFormControlLayout__childrenWrapper"
-                            >
-                              <EuiDatePickerRange
-                                className="euiDatePickerRange--inGroup"
-                                endDateControl={<div />}
-                                iconType={false}
-                                isCustom={true}
-                                startDateControl={<div />}
-                              >
-                                <div
-                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
-                                >
-                                  <button
-                                    className="euiSuperDatePicker__prettyFormat"
-                                    data-test-subj="superDatePickerShowDatesButton"
-                                    disabled={false}
-                                    onClick={[Function]}
-                                  >
-                                    Last 5 minutes
-                                    <span
-                                      className="euiSuperDatePicker__prettyFormatLink"
-                                    >
-                                      <EuiI18n
-                                        default="Show dates"
-                                        token="euiSuperDatePicker.showDatesButtonLabel"
-                                      >
-                                        Show dates
-                                      </EuiI18n>
-                                    </span>
-                                  </button>
-                                </div>
-                              </EuiDatePickerRange>
-                              <EuiFormControlLayoutIcons />
-                            </div>
-                          </div>
-                        </EuiFormControlLayout>
-                      </div>
-                    </EuiFlexItem>
-                  </div>
-                </EuiFlexGroup>
-              </EuiSuperDatePicker>
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-          >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
-            >
-              <EuiButton
-                data-click-metric-element="trace_analytics.refresh_button"
-                data-test-subj="superDatePickerApplyTimeButton"
-                iconType="refresh"
-                onClick={[Function]}
-              >
-                <EuiButtonDisplay
-                  baseClassName="euiButton"
-                  data-click-metric-element="trace_analytics.refresh_button"
-                  data-test-subj="superDatePickerApplyTimeButton"
-                  disabled={false}
-                  element="button"
-                  iconType="refresh"
-                  isDisabled={false}
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <button
-                    className="euiButton euiButton--primary"
-                    data-click-metric-element="trace_analytics.refresh_button"
-                    data-test-subj="superDatePickerApplyTimeButton"
-                    disabled={false}
-                    onClick={[Function]}
-                    style={
-                      Object {
-                        "minWidth": undefined,
-                      }
-                    }
-                    type="button"
-                  >
-                    <EuiButtonContent
-                      className="euiButton__content"
-                      iconSide="left"
-                      iconType="refresh"
-                      textProps={
-                        Object {
-                          "className": "euiButton__text",
-                        }
-                      }
-                    >
-                      <span
-                        className="euiButtonContent euiButton__content"
-                      >
-                        <EuiIcon
-                          className="euiButtonContent__icon"
-                          color="inherit"
-                          size="m"
-                          type="refresh"
-                        >
-                          <EuiIconRefresh
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
-                          >
-                            <svg
-                              aria-hidden={true}
-                              className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                              focusable="false"
-                              height={16}
-                              role="img"
-                              style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M11.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
-                              />
-                            </svg>
-                          </EuiIconRefresh>
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
-                        >
-                          Refresh
-                        </span>
-                      </span>
-                    </EuiButtonContent>
-                  </button>
-                </EuiButtonDisplay>
-              </EuiButton>
-            </div>
-          </EuiFlexItem>
-        </div>
-      </EuiFlexGroup>
-      <EuiSpacer
-        size="s"
-      >
-        <div
-          className="euiSpacer euiSpacer--s"
-        />
-      </EuiSpacer>
-      <Filters
-        appConfigs={Array []}
-        filters={Array []}
-        mode="jaeger"
-        page="dashboard"
-        setFilters={
-          [MockFunction] {
-            "calls": Array [
-              Array [
-                Array [],
-              ],
-            ],
-            "results": Array [
-              Object {
-                "type": "return",
-                "value": undefined,
-              },
-            ],
-          }
-        }
-      >
-        <EuiFlexGroup
-          alignItems="center"
-          gutterSize="xs"
-          responsive={false}
-          style={
-            Object {
-              "minHeight": 32,
-            }
-          }
-        >
-          <div
-            className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-            style={
-              Object {
-                "minHeight": 32,
-              }
-            }
-          >
-            <EuiFlexItem
-              grow={false}
-            >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
-              >
-                <GlobalFilterButton>
-                  <EuiPopover
-                    anchorPosition="rightUp"
-                    button={
-                      <EuiButtonIcon
-                        aria-label="Change all filters"
-                        iconType="filter"
-                        onClick={[Function]}
-                        title="Change all filters"
-                      />
-                    }
-                    closePopover={[Function]}
-                    data-test-subj="global-filter-button"
-                    display="inlineBlock"
-                    hasArrow={true}
-                    isOpen={false}
-                    ownFocus={true}
-                    panelPaddingSize="none"
-                    withTitle={true}
-                  >
-                    <div
-                      className="euiPopover euiPopover--anchorRightUp"
-                      data-test-subj="global-filter-button"
-                      withTitle={true}
-                    >
-                      <div
-                        className="euiPopover__anchor"
-                      >
-                        <EuiButtonIcon
-                          aria-label="Change all filters"
-                          iconType="filter"
-                          onClick={[Function]}
-                          title="Change all filters"
-                        >
-                          <button
-                            aria-label="Change all filters"
-                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                            disabled={false}
-                            onClick={[Function]}
-                            title="Change all filters"
-                            type="button"
-                          >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              color="inherit"
-                              size="m"
-                              type="filter"
-                            >
-                              <EuiIconFilter
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
-                                  focusable="false"
-                                  height={16}
-                                  role="img"
-                                  style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M7.999 15.999a8 8 0 110-16 8 8 0 010 16zM8 15A7 7 0 108 1a7 7 0 000 14zM3.5 5h9a.5.5 0 110 1h-9a.5.5 0 010-1zm2 3h5a.5.5 0 110 1h-5a.5.5 0 010-1zm2 3h1a.5.5 0 110 1h-1a.5.5 0 110-1z"
-                                    fillRule="evenodd"
-                                  />
-                                </svg>
-                              </EuiIconFilter>
-                            </EuiIcon>
-                          </button>
-                        </EuiButtonIcon>
-                      </div>
-                    </div>
-                  </EuiPopover>
-                </GlobalFilterButton>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
-            >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
-              >
-                <AddFilterButton>
-                  <EuiPopover
-                    anchorPosition="downLeft"
-                    button={
-                      <EuiButtonEmpty
-                        onClick={[Function]}
-                        size="xs"
-                      >
-                        + Add filter
-                      </EuiButtonEmpty>
-                    }
-                    closePopover={[Function]}
-                    data-test-subj="addfilter"
-                    display="inlineBlock"
-                    hasArrow={true}
-                    isOpen={false}
-                    ownFocus={true}
-                    panelPaddingSize="m"
-                    withTitle={true}
-                  >
-                    <div
-                      className="euiPopover euiPopover--anchorDownLeft"
-                      data-test-subj="addfilter"
-                      withTitle={true}
-                    >
-                      <div
-                        className="euiPopover__anchor"
-                      >
-                        <EuiButtonEmpty
-                          onClick={[Function]}
-                          size="xs"
-                        >
-                          <button
-                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
-                            disabled={false}
-                            onClick={[Function]}
-                            type="button"
-                          >
-                            <EuiButtonContent
-                              className="euiButtonEmpty__content"
-                              iconSide="left"
-                              iconSize="s"
-                              textProps={
-                                Object {
-                                  "className": "euiButtonEmpty__text",
-                                }
-                              }
-                            >
-                              <span
-                                className="euiButtonContent euiButtonEmpty__content"
-                              >
-                                <span
-                                  className="euiButtonEmpty__text"
-                                >
-                                  + Add filter
-                                </span>
-                              </span>
-                            </EuiButtonContent>
-                          </button>
-                        </EuiButtonEmpty>
-                      </div>
-                    </div>
-                  </EuiPopover>
-                </AddFilterButton>
-              </div>
-            </EuiFlexItem>
-          </div>
-        </EuiFlexGroup>
-      </Filters>
-    </SearchBar>
-    <EuiSpacer
-      size="m"
-    >
-      <div
-        className="euiSpacer euiSpacer--m"
-      />
-    </EuiSpacer>
     <div>
       <TopGroupsPage
         addFilter={[Function]}
@@ -5276,7 +2800,7 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
               Object {
                 "data-test-subj": "throughput-toggle",
                 "id": "throughput",
-                "label": "Rate",
+                "label": "Request rate",
               },
             ]
           }
@@ -5337,7 +2861,7 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                         Object {
                           "data-test-subj": "throughput-toggle",
                           "id": "throughput",
-                          "label": "Rate",
+                          "label": "Request rate",
                         },
                       ]
                     }
@@ -5446,7 +2970,7 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                           isIconOnly={false}
                           isSelected={false}
                           key="1"
-                          label="Rate"
+                          label="Request rate"
                           name="random_html_id"
                           onChange={[Function]}
                           size="s"
@@ -5465,9 +2989,9 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                             textProps={
                               Object {
                                 "className": "euiButtonGroupButton__textShift",
-                                "data-text": "Rate",
+                                "data-text": "Request rate",
                                 "ref": [Function],
-                                "title": "Rate",
+                                "title": "Request rate",
                               }
                             }
                           >
@@ -5489,9 +3013,9 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                                 textProps={
                                   Object {
                                     "className": "euiButton__text euiButtonGroupButton__textShift",
-                                    "data-text": "Rate",
+                                    "data-text": "Request rate",
                                     "ref": [Function],
-                                    "title": "Rate",
+                                    "title": "Request rate",
                                   }
                                 }
                               >
@@ -5500,8 +3024,8 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                                 >
                                   <span
                                     className="euiButton__text euiButtonGroupButton__textShift"
-                                    data-text="Rate"
-                                    title="Rate"
+                                    data-text="Request rate"
+                                    title="Request rate"
                                   >
                                     <input
                                       checked={false}
@@ -5513,7 +3037,7 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
                                       onChange={[Function]}
                                       type="radio"
                                     />
-                                    Rate
+                                    Request rate
                                   </span>
                                 </span>
                               </EuiButtonContent>

From dd255a0b5f17ab979cacbe37eee93091b80c2d35 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 30 Aug 2023 12:21:23 -0400
Subject: [PATCH 26/26] update snapshot

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../__tests__/__snapshots__/filter_edit_popover.test.tsx.snap   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap
index 62c088073..7fde9a70a 100644
--- a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap
@@ -129,7 +129,6 @@ exports[`Filter popover component renders filter popover 1`] = `
                       aria-expanded={false}
                       aria-haspopup="listbox"
                       className="euiComboBox"
-                      onFocus={[Function]}
                       onKeyDown={[Function]}
                       role="combobox"
                     >
@@ -389,7 +388,6 @@ exports[`Filter popover component renders filter popover 1`] = `
                       aria-expanded={false}
                       aria-haspopup="listbox"
                       className="euiComboBox euiComboBox-isDisabled"
-                      onFocus={[Function]}
                       onKeyDown={[Function]}
                       role="combobox"
                     >