[SLO] [APM] Alert details visualization - add View in APM buttons (#183415)

## Summary

Relates to https://github.com/elastic/kibana/issues/178521

Adds the `View in APM` button to the APM alert details visualizations.
These visualizations appear in the SLO's APM SLI's burn rate alert
details page and the APM's latency threshold alert details page.


![image](0aaef288-4c3c-473c-b1f9-9c21e80c9fda)

### Testing

1. Generate some APM data. The easiest way to do so is to via
`synthtrace`, for example `node scripts/synthtrace continous_rollups.ts
--live`
2. Navigate to the SLO page. Create an APM failed transaction rate SLI
with * for environment,
3. Wait for an alert to fire
4. Navigate to the alert details page for the alert to view the charts.
5. Click the View in APM url to navigate to APM. It should navigate to
the service overview page for the specified service with environment
`ALL` and transaction type `request` selected.
6. Edit the original SLO to add a specific environment
7. Wait for an alert to fire then navigate back to the alert details
page. Click on the View in APM buttons
8. The button should navigate tot he APM service overview page for the
specified service, with the correct environment selected.
9. Edit the original SLO, this time select a specific transaction type.
The `continous_rollups` synthtrace configuration contains a `custom`
transaction type so consider using that.
10. Wait for an alert to fire then navigate back to the alert details
page. Click on the View in APM buttons
11. The button should navigate tot he APM service overview page for the
specified service, with the correct transaction type selected.
12. Edit the original SLO to add a specific transaction name
13. Wait for an alert to fire then navigate back to the alert details
page. Click on the View in APM buttons.
14. The button should navigate tot he APM transaction overview page for
the specified transaction.

x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/alert_details_app_section/failed_transaction_chart.tsx

@@ -35,6 +35,7 @@ import { yLabelFormat } from './helpers';
 import { usePreferredDataSourceAndBucketSize } from '../../../../hooks/use_preferred_data_source_and_bucket_size';
 import { ApmDocumentType } from '../../../../../common/document_type';
 import { TransactionTypeSelect } from './transaction_type_select';
+import { ViewInAPMButton } from './view_in_apm_button';
 
 type ErrorRate =
   APIReturnType<'GET /internal/apm/services/{serviceName}/transactions/charts/error_rate'>;
@@ -196,6 +197,21 @@ function FailedTransactionChart({
               />
             </EuiFlexItem>
           )}
+          <EuiFlexItem>
+            <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+              <EuiFlexItem grow={false}>
+                <ViewInAPMButton
+                  serviceName={serviceName}
+                  environment={environment}
+                  from={start}
+                  to={end}
+                  kuery={kuery}
+                  transactionName={transactionName}
+                  transactionType={transactionType}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
         </EuiFlexGroup>
 
         <TimeseriesChart

x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/alert_details_app_section/latency_chart.tsx

@@ -40,6 +40,7 @@ import { ApmDocumentType } from '../../../../../common/document_type';
 import { usePreferredDataSourceAndBucketSize } from '../../../../hooks/use_preferred_data_source_and_bucket_size';
 import { DEFAULT_DATE_FORMAT } from './constants';
 import { TransactionTypeSelect } from './transaction_type_select';
+import { ViewInAPMButton } from './view_in_apm_button';
 
 function LatencyChart({
   alert,
@@ -228,6 +229,21 @@ function LatencyChart({
               />
             </EuiFlexItem>
           )}
+          <EuiFlexItem>
+            <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+              <EuiFlexItem grow={false}>
+                <ViewInAPMButton
+                  serviceName={serviceName}
+                  environment={environment}
+                  from={start}
+                  to={end}
+                  kuery={kuery}
+                  transactionName={transactionName}
+                  transactionType={transactionType}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
         </EuiFlexGroup>
         <TimeseriesChart
           id="latencyChart"

x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/alert_details_app_section/throughput_chart.tsx

@@ -25,6 +25,7 @@ import { usePreferredDataSourceAndBucketSize } from '../../../../hooks/use_prefe
 import { ApmDocumentType } from '../../../../../common/document_type';
 import { asExactTransactionRate } from '../../../../../common/utils/formatters';
 import { TransactionTypeSelect } from './transaction_type_select';
+import { ViewInAPMButton } from './view_in_apm_button';
 
 const INITIAL_STATE = {
   currentPeriod: [],
@@ -162,6 +163,21 @@ function ThroughputChart({
               />
             </EuiFlexItem>
           )}
+          <EuiFlexItem>
+            <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+              <EuiFlexItem grow={false}>
+                <ViewInAPMButton
+                  serviceName={serviceName}
+                  environment={environment}
+                  from={start}
+                  to={end}
+                  kuery={kuery}
+                  transactionName={transactionName}
+                  transactionType={transactionType}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
         </EuiFlexGroup>
 
         <TimeseriesChart

x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/alert_details_app_section/view_in_apm_button.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+/* Error Rate */
+
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiButtonEmpty } from '@elastic/eui';
+import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
+import { APM_APP_LOCATOR_ID } from '../../../../locator/service_detail_locator';
+
+export function ViewInAPMButton({
+  serviceName,
+  environment,
+  transactionName,
+  transactionType,
+  from,
+  to,
+  kuery,
+}: {
+  serviceName: string;
+  environment: string;
+  transactionName?: string;
+  transactionType?: string;
+  from: string;
+  to: string;
+  kuery?: string;
+}) {
+  const { share } = useApmPluginContext();
+  const serviceNavigator = share.url.locators.get(APM_APP_LOCATOR_ID);
+
+  if (!serviceNavigator) {
+    return null;
+  }
+
+  return (
+    <EuiButtonEmpty
+      data-test-subj="apmAlertDetailsPageViewInApp"
+      onClick={() =>
+        serviceNavigator.navigate({
+          serviceName,
+          serviceOverviewTab: transactionName ? 'transactions' : undefined,
+          query: {
+            environment,
+            rangeFrom: from,
+            rangeTo: to,
+            kuery,
+            transactionName,
+            transactionType,
+          },
+        })
+      }
+      iconType="sortRight"
+      color="text"
+    >
+      <FormattedMessage id="xpack.apm.alertDetails.viewInApm" defaultMessage="View in APM" />
+    </EuiButtonEmpty>
+  );
+}

x-pack/plugins/observability_solution/apm/public/locator/helpers.ts

@@ -33,7 +33,10 @@ export const APMLocatorPayloadValidator = t.union([
       }),
     }),
     t.type({
-      query: environmentRt,
+      query: t.intersection([
+        environmentRt,
+        t.partial({ kuery: t.string, rangeFrom: t.string, rangeTo: t.string }),
+      ]),
     }),
   ]),
 ]);