[APM] Cannot click through to details of an error on the waterfall pa…

…ge if the error is missing `transaction.id` (#66386)

* removing transaction from link when it isnt defined

* refacroting test

* refacroting test

x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/AgentMarker.test.tsx → x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx

@@ -6,8 +6,8 @@
 
 import { shallow } from 'enzyme';
 import React from 'react';
-import { AgentMarker } from '../AgentMarker';
-import { AgentMark } from '../../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
+import { AgentMarker } from './AgentMarker';
+import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
 
 describe('AgentMarker', () => {
   const mark = {

x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { ErrorMarker } from './ErrorMarker';
+import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
+import { render, fireEvent } from '@testing-library/react';
+import { act } from '@testing-library/react-hooks';
+import { expectTextsInDocument } from '../../../../../utils/testHelpers';
+
+describe('ErrorMarker', () => {
+  const mark = {
+    id: 'agent',
+    offset: 10000,
+    type: 'errorMark',
+    verticalLine: true,
+    error: {
+      trace: { id: '123' },
+      transaction: { id: '456' },
+      error: { grouping_key: '123' },
+      service: { name: 'bar' }
+    },
+    serviceColor: '#fff'
+  } as ErrorMark;
+
+  function openPopover(errorMark: ErrorMark) {
+    const component = render(<ErrorMarker mark={errorMark} />);
+    act(() => {
+      fireEvent.click(component.getByTestId('popover'));
+    });
+    expectTextsInDocument(component, ['10,000 μs']);
+    return component;
+  }
+  function getKueryDecoded(url: string) {
+    return decodeURIComponent(url.substring(url.indexOf('kuery='), url.length));
+  }
+  it('renders link with trace and transaction', () => {
+    const component = openPopover(mark);
+    const errorLink = component.getByTestId('errorLink') as HTMLAnchorElement;
+    expect(getKueryDecoded(errorLink.hash)).toEqual(
+      'kuery=trace.id : "123" and transaction.id : "456"'
+    );
+  });
+  it('renders link with trace', () => {
+    const { transaction, ...withoutTransaction } = mark.error;
+    const newMark = {
+      ...mark,
+      error: withoutTransaction
+    } as ErrorMark;
+    const component = openPopover(newMark);
+    const errorLink = component.getByTestId('errorLink') as HTMLAnchorElement;
+    expect(getKueryDecoded(errorLink.hash)).toEqual('kuery=trace.id : "123"');
+  });
+  it('renders link with transaction', () => {
+    const { trace, ...withoutTrace } = mark.error;
+    const newMark = {
+      ...mark,
+      error: withoutTrace
+    } as ErrorMark;
+    const component = openPopover(newMark);
+    const errorLink = component.getByTestId('errorLink') as HTMLAnchorElement;
+    expect(getKueryDecoded(errorLink.hash)).toEqual(
+      'kuery=transaction.id : "456"'
+    );
+  });
+  it('renders link without trance and transaction', () => {
+    const { trace, transaction, ...withoutTraceAndTransaction } = mark.error;
+    const newMark = {
+      ...mark,
+      error: withoutTraceAndTransaction
+    } as ErrorMark;
+    const component = openPopover(newMark);
+    const errorLink = component.getByTestId('errorLink') as HTMLAnchorElement;
+    expect(getKueryDecoded(errorLink.hash)).toEqual('kuery=');
+  });
+});

x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx

@@ -50,6 +50,7 @@ export const ErrorMarker: React.FC<Props> = ({ mark }) => {
 
   const button = (
     <Button
+      data-test-subj="popover"
       clickable
       color={theme.euiColorDanger}
       shape={Shape.square}
@@ -60,10 +61,14 @@ export const ErrorMarker: React.FC<Props> = ({ mark }) => {
   const { error } = mark;
 
   const { rangeTo, rangeFrom } = urlParams;
+
   const query = {
-    kuery: encodeURIComponent(
-      `${TRACE_ID} : "${error.trace?.id}" and ${TRANSACTION_ID} : "${error.transaction?.id}"`
-    ),
+    kuery: [
+      ...(error.trace?.id ? [`${TRACE_ID} : "${error.trace?.id}"`] : []),
+      ...(error.transaction?.id
+        ? [`${TRANSACTION_ID} : "${error.transaction?.id}"`]
+        : [])
+    ].join(' and '),
     rangeFrom,
     rangeTo
   };
@@ -90,6 +95,7 @@ export const ErrorMarker: React.FC<Props> = ({ mark }) => {
         />
         <EuiText size="s">
           <ErrorLink
+            data-test-subj="errorLink"
             serviceName={error.service.name}
             errorGroupId={error.error.grouping_key}
             query={query}

x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/Marker.test.tsx → x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.test.tsx

@@ -6,9 +6,9 @@
 
 import { shallow } from 'enzyme';
 import React from 'react';
-import { Marker } from '../';
-import { AgentMark } from '../../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
-import { ErrorMark } from '../../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
+import { Marker } from './';
+import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
+import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
 
 describe('Marker', () => {
   it('renders agent marker', () => {