[Backport 2.17] Update trace analytics landing page to traces and header bug fix

public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap

@@ -83,7 +83,7 @@ exports[`Service view component renders service view 1`] = `
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer
-        size="xl"
+        size="m"
       />
       <EuiPanel>
         <PanelTitle

public/components/trace_analytics/components/services/service_view.tsx

@@ -39,6 +39,7 @@
 import { setNavBreadCrumbs } from '../../../../../common/utils/set_nav_bread_crumbs';
 import { dataSourceFilterFn } from '../../../../../common/utils/shared';
 import { coreRefs } from '../../../../framework/core_refs';
+import { HeaderControlledComponentsWrapper } from '../../../../plugin_helpers/plugin_headerControl';
 import { TraceAnalyticsComponentDeps } from '../../home';
 import {
   handleServiceMapRequest,
@@ -64,7 +65,7 @@
 
 export function ServiceView(props: ServiceViewProps) {
   const { mode, page, setCurrentSelectedService } = props;
   const [fields, setFields] = useState<any>({});
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
   const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
     'latency' | 'error_rate' | 'throughput'
@@ -107,7 +108,7 @@
           props.parentBreadcrumb,
           {
             text: 'Trace analytics',
-            href: '#/services',
+            href: '#/traces',
           },
         ],
         [
@@ -207,6 +208,12 @@
     },
   ];
 
+  const serviceHeader = (
+    <EuiText size="s">
+      <h1 className="overview-content">{props.serviceName}</h1>
+    </EuiText>
+  );
+
   const renderTitle = (
     serviceName: string,
     startTime: SearchBarProps['startTime'],
@@ -221,11 +228,7 @@
         {_page === 'serviceFlyout' ? (
           <EuiFlyoutHeader hasBorder>
             <EuiFlexGroup justifyContent="spaceBetween">
-              <EuiFlexItem>
-                <EuiText size="s">
-                  <h2 className="overview-content">{serviceName}</h2>
-                </EuiText>
-              </EuiFlexItem>
+              <EuiFlexItem>{serviceHeader}</EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiPopover
                   panelPaddingSize="none"
@@ -239,13 +242,13 @@
             </EuiFlexGroup>
             {renderDatePicker(startTime, setStartTime, endTime, setEndTime)}
           </EuiFlyoutHeader>
+        ) : coreRefs?.chrome?.navGroup.getNavGroupEnabled() ? (
+          <HeaderControlledComponentsWrapper
+            components={[renderDatePicker(startTime, setStartTime, endTime, setEndTime)]}
+          />
         ) : (
           <EuiFlexGroup alignItems="center" gutterSize="s">
-            <EuiFlexItem>
-              <EuiText size="s">
-                <h1 className="overview-content">{serviceName}</h1>
-              </EuiText>
-            </EuiFlexItem>
+            <EuiFlexItem>{serviceHeader}</EuiFlexItem>
             <EuiFlexItem grow={false}>
               {renderDatePicker(startTime, setStartTime, endTime, setEndTime)}
             </EuiFlexItem>
@@ -388,12 +391,12 @@
 
   const [currentSpan, setCurrentSpan] = useState('');
   const storedFilters = sessionStorage.getItem('TraceAnalyticsSpanFilters');
   const [spanFilters, setSpanFilters] = useState<Array<{ field: string; value: any }>>(
     storedFilters ? JSON.parse(storedFilters) : []
   );
   const [DSL, setDSL] = useState<any>({});
 
   const setSpanFiltersWithStorage = (newFilters: Array<{ field: string; value: any }>) => {
     setSpanFilters(newFilters);
     sessionStorage.setItem('TraceAnalyticsSpanFilters', JSON.stringify(newFilters));
   };
@@ -431,7 +434,7 @@
     setDSL(spanDSL);
   }, [props.startTime, props.endTime, props.serviceName, spanFilters]);
 
   const addSpanFilter = (field: string, value: any) => {
     const newFilters = [...spanFilters];
     const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
     if (index === -1) {
@@ -489,7 +492,7 @@
           results are filtered by {activeFilters.map((filter) => filter.field).join(', ')}
         </EuiText>
       )}
-      <EuiSpacer size="xl" />
+      <EuiSpacer size="m" />
       {overview}
 
       {mode === 'data_prepper' || mode === 'custom_data_prepper' ? (

public/components/trace_analytics/components/traces/trace_view.tsx

@@ -69,7 +69,7 @@
   };
   const DataSourceMenu = props.dataSourceManagement?.ui?.getDataSourceMenu<DataSourceViewConfig>();
 
   const renderOverview = (fields: any) => {
     return (
       <EuiPanel>
         <PanelTitle title="Overview" />
@@ -157,7 +157,7 @@
   const [serviceBreakdownData, setServiceBreakdownData] = useState([]);
   const [payloadData, setPayloadData] = useState('');
   const [colorMap, setColorMap] = useState({});
   const [ganttData, setGanttData] = useState<{ gantt: any[]; table: any[]; ganttMaxX: number }>({
     gantt: [],
     table: [],
     ganttMaxX: 0,
@@ -206,8 +206,8 @@
 
   useEffect(() => {
     if (!Object.keys(serviceMap).length || !ganttData.table.length) return;
     const services: any = {};
     ganttData.table.forEach((service: any) => {
       if (!services[service.service_name]) {
         services[service.service_name] = {
           latency: 0,
@@ -242,7 +242,7 @@
         props.parentBreadcrumb,
         {
           text: 'Trace analytics',
-          href: '#/services',
+          href: '#/traces',
         },
       ],
       [

public/components/trace_analytics/home.tsx

@@ -118,9 +118,11 @@ export const Home = (props: HomeProps) => {
 
   const [dataSourceMDSId, setDataSourceMDSId] = useState([{ id: '', label: '' }]);
   const [currentSelectedService, setCurrentSelectedService] = useState('');
-  let defaultRoute = props.defaultRoute ?? '/services';
-  const currentHash = window.location.hash.split('#')[1] || '';
 
+  // Navigate a valid routes when suffixed with '/traces' and '/services'
+  // Route defaults to traces page
+  let defaultRoute = props.defaultRoute ?? '/traces';
+  const currentHash = window.location.hash.split('#')[1] || '';
   if (currentHash.startsWith('/traces') || currentHash.startsWith('/services')) {
     defaultRoute = currentHash;
   }
@@ -203,7 +205,7 @@ export const Home = (props: HomeProps) => {
       ? [
           {
             text: 'Trace analytics',
-            href: '#/services',
+            href: '#/traces',
           },
         ]
       : []),
@@ -218,7 +220,7 @@ export const Home = (props: HomeProps) => {
       ? [
           {
             text: 'Trace analytics',
-            href: '#/services',
+            href: '#/traces',
           },
         ]
       : []),

public/components/trace_analytics/trace_side_nav.tsx

@@ -16,12 +16,12 @@ import React from 'react';
 
 export function TraceSideBar(props: { children: React.ReactNode }) {
   function setIsSelected(items: Array<EuiSideNavItemType<React.ReactNode>>, hash: string): boolean {
-    if (hash === '#/traces') {
-      items[0].items[1].isSelected = true;
+    if (hash === '#/traces' || hash === '#/') {
+      items[0].items[0].isSelected = true;
       return true;
     }
-    if (hash === '#/services' || hash === '#/') {
-      items[0].items[0].isSelected = true;
+    if (hash === '#/services') {
+      items[0].items[1].isSelected = true;
       return true;
     }
   }
@@ -30,17 +30,17 @@ export function TraceSideBar(props: { children: React.ReactNode }) {
     {
       name: 'Trace analytics',
       id: 1,
-      href: '#/services',
+      href: '#/traces',
       items: [
         {
-          name: 'Services',
+          name: 'Traces',
           id: 1.1,
-          href: '#/services',
+          href: '#/traces',
         },
         {
-          name: 'Traces',
+          name: 'Services',
           id: 1.2,
-          href: '#/traces',
+          href: '#/services',
         },
       ],
     },