Services to Traces - Flyout redirection (#2392) (#2393)

* fix redirection services to traces



* Add cypress test



* remove flakyness



---------



(cherry picked from commit ab679de)

Signed-off-by: Adam Tackett <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Adam Tackett <[email protected]>

Author: 3 people

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

@@ -381,6 +381,51 @@ describe('Testing traces Spans table and verify columns functionality', () => {
   });
 });
 
+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 @@ import {
   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';
@@ -80,6 +83,7 @@ export function ServiceView(props: ServiceViewProps) {
   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 @@ export function ServiceView(props: ServiceViewProps) {
       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(() => {