Services to Traces - Flyout redirection

.cypress/integration/trace_analytics_test/trace_analytics_services.spec.js

@@ -136,16 +136,16 @@
   });
 
   it('Renders spans data grid, flyout, filters', () => {
     cy.get("[data-test-subj='spanId-link']")
       .contains(SERVICE_SPAN_ID)
       .trigger('mouseover', { force: true });
     cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true });
     cy.contains('Span detail').should('exist');
     cy.contains('Span attributes').should('exist');
     cy.get('.euiTextColor').contains('Span ID').trigger('mouseover');
     cy.get('.euiButtonIcon[aria-label="span-flyout-filter-icon"').click({ force: true });
     cy.get('.euiBadge__text').contains('spanId: ').should('exist');
     cy.get('[data-test-subj="euiFlyoutCloseButton"]').click({ force: true });
     cy.contains('Spans (1)').should('exist');
   });
 });
@@ -265,7 +265,7 @@
   it('Toggle columns and verify the columns hidden text verify rows', () => {
     cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist');
     expandServiceView(1);
     cy.get('[data-test-subj = "dataGridColumnSelectorButton"]').click({ force: true });
     cy.get('.panel-title-count').contains('8').should('exist');
     cy.get('.euiSwitch.euiSwitch--compressed.euiSwitch--mini .euiSwitch__button').eq(3).click();
     cy.get('[data-test-subj = "dataGridColumnSelectorButton"]')
@@ -381,6 +381,51 @@
   });
 });
 
+describe('Testing navigation from Services to Traces', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-traces#/services', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+
+    cy.get("[data-test-subj='indexPattern-switch-link']").click();
+    cy.get("[data-test-subj='data_prepper-mode']").click();
+    setTimeFilter();
+  });
+
+  it('Clicks on the "Traces" shortcut to redirect', () => {
+    cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
+    cy.get('.euiLink.euiLink--primary').contains('74').click();
+    cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
+
+    cy.get('[data-test-subj="filterBadge"]')
+      .should('exist')
+      .contains('serviceName: analytics-service');
+
+    cy.get('.euiText').contains('03f9c770db5ee2f1caac0afc36db49ba').should('exist');
+  });
+
+  it('Opens service flyout, clicks Actions, and selects View Traces', () => {
+    cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
+    cy.get('[data-test-subj*="service-flyout-action-btntrace_service"]')
+      .should('exist')
+      .first()
+      .click();
+
+    cy.get('.euiButton').contains('Actions').click();
+
+    cy.get('.euiContextMenuItem').contains('View traces').click();
+    cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
+
+    cy.get('[data-test-subj="filterBadge"]')
+    .should('exist')
+    .contains('serviceName: analytics-service');
+
+    cy.get('.euiText').contains('03f9c770db5ee2f1caac0afc36db49ba').should('exist');
+  });
+});
+
 describe('Testing switch mode to jaeger', () => {
   beforeEach(() => {
     cy.visit('app/observability-traces#/services', {

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

@@ -35,7 +35,10 @@
   DEFAULT_DATA_SOURCE_NAME,
   DEFAULT_DATA_SOURCE_TYPE,
 } from '../../../../../common/constants/data_sources';
-import { observabilityLogsID } from '../../../../../common/constants/shared';
+import {
+  observabilityLogsID,
+  observabilityTracesNewNavID,
+} from '../../../../../common/constants/shared';
 import { TRACE_ANALYTICS_DATE_FORMAT } from '../../../../../common/constants/trace_analytics';
 import { setNavBreadCrumbs } from '../../../../../common/utils/set_nav_bread_crumbs';
 import { coreRefs } from '../../../../framework/core_refs';
@@ -69,7 +72,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'
@@ -80,6 +83,7 @@
   const location = useLocation();
   const [isServiceOverviewLoading, setIsServiceOverviewLoading] = useState(false);
   const [isServicesDataLoading, setIsServicesDataLoading] = useState(false);
+  const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled();
 
   useEffect(() => {
     try {
@@ -165,7 +169,25 @@
       inverted: false,
       disabled: false,
     });
-    location.assign('#/traces');
+
+    const tracesPath = '#/traces';
+    const dataSourceId = props.dataSourceMDSId[0]?.id || '';
+    const urlParts = window.location.href.split('?');
+    const queryParams =
+      urlParts.length > 1 ? new URLSearchParams(urlParts[1]) : new URLSearchParams();
+
+    const modeParam = queryParams.get('mode') || '';
+    const modeQuery = modeParam ? `&mode=${encodeURIComponent(modeParam)}` : '';
+
+    if (newNavigation) {
+      coreRefs.application?.navigateToApp(observabilityTracesNewNavID, {
+        path: `${tracesPath}?datasourceId=${encodeURIComponent(dataSourceId)}${modeQuery}`,
+      });
+    } else {
+      window.location.assign(
+        `${tracesPath}?datasourceId=${encodeURIComponent(dataSourceId)}${modeQuery}`
+      );
+    }
   };
 
   useEffect(() => {
@@ -444,7 +466,7 @@
   const [spanFilters, setSpanFilters] = useState<TraceFilter[]>(
     storedFilters ? JSON.parse(storedFilters) : []
   );
   const [DSL, setDSL] = useState<any>({});
 
   const setSpanFiltersWithStorage = (newFilters: TraceFilter[]) => {
     setSpanFilters(newFilters);
@@ -484,7 +506,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) {