[Actionable Observability] - add alertDetailAppSection to the APM Rul…

…e Details page (#143298)

## Summary

It fixes #145572 and #143183 by
- Adding an abstraction layer for the Timeseries chart and using it
without APM's context and hooks
- Create and link `AlertDetailAppSection` new component to all APM rule
types
- Provide the new Alert Details page under Observability using APM
charts

<img width="1205" alt="Screenshot 2022-11-08 at 17 22 17"
src="https://user-images.githubusercontent.com/6838659/200619684-0f9eaf5b-4618-4dd3-8539-f4bc13107c2e.png">

### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)


## For the reviewers
- Enable the feature flag
`xpack.observability.unsafe.alertDetails.apm.enabled: true` in
`kibana.yml`.
- Create an APM rule that fires alerts
- Click on `View alert details` from the Alert table

x-pack/plugins/apm/public/components/alerting/rule_types/register_apm_rule_types.ts

@@ -33,7 +33,8 @@ export function registerApmRuleTypes(
       return {
         reason: fields[ALERT_REASON]!,
         link: getAlertUrlErrorCount(
-          String(fields[SERVICE_NAME][0]!),
+          // TODO:fix SERVICE_NAME when we move it to initializeIndex
+          String(fields[SERVICE_NAME]![0]),
           fields[SERVICE_ENVIRONMENT] && String(fields[SERVICE_ENVIRONMENT][0])
         ),
       };
@@ -46,6 +47,12 @@ export function registerApmRuleTypes(
     validate: () => ({
       errors: [],
     }),
+    alertDetailsAppSection: lazy(
+      () =>
+        import(
+          '../ui_components/alert_details_app_section/alert_details_app_section'
+        )
+    ),
     requiresAppContext: false,
     defaultActionMessage: i18n.translate(
       'xpack.apm.alertTypes.errorCount.defaultActionMessage',
@@ -73,9 +80,10 @@ export function registerApmRuleTypes(
       return {
         reason: fields[ALERT_REASON]!,
         link: getAlertUrlTransaction(
-          String(fields[SERVICE_NAME][0]!),
+          // TODO:fix SERVICE_NAME when we move it to initializeIndex
+          String(fields[SERVICE_NAME]![0]),
           fields[SERVICE_ENVIRONMENT] && String(fields[SERVICE_ENVIRONMENT][0]),
-          String(fields[TRANSACTION_TYPE][0]!)
+          String(fields[TRANSACTION_TYPE]![0])
         ),
       };
     },
@@ -89,6 +97,12 @@ export function registerApmRuleTypes(
     validate: () => ({
       errors: [],
     }),
+    alertDetailsAppSection: lazy(
+      () =>
+        import(
+          '../ui_components/alert_details_app_section/alert_details_app_section'
+        )
+    ),
     requiresAppContext: false,
     defaultActionMessage: i18n.translate(
       'xpack.apm.alertTypes.transactionDuration.defaultActionMessage',
@@ -116,9 +130,10 @@ export function registerApmRuleTypes(
     format: ({ fields, formatters: { asPercent } }) => ({
       reason: fields[ALERT_REASON]!,
       link: getAlertUrlTransaction(
-        String(fields[SERVICE_NAME][0]!),
+        // TODO:fix SERVICE_NAME when we move it to initializeIndex
+        String(fields[SERVICE_NAME]![0]),
         fields[SERVICE_ENVIRONMENT] && String(fields[SERVICE_ENVIRONMENT][0]),
-        String(fields[TRANSACTION_TYPE][0]!)
+        String(fields[TRANSACTION_TYPE]![0])
       ),
     }),
     iconClass: 'bell',
@@ -131,6 +146,12 @@ export function registerApmRuleTypes(
     validate: () => ({
       errors: [],
     }),
+    alertDetailsAppSection: lazy(
+      () =>
+        import(
+          '../ui_components/alert_details_app_section/alert_details_app_section'
+        )
+    ),
     requiresAppContext: false,
     defaultActionMessage: i18n.translate(
       'xpack.apm.alertTypes.transactionErrorRate.defaultActionMessage',
@@ -155,9 +176,10 @@ export function registerApmRuleTypes(
     format: ({ fields }) => ({
       reason: fields[ALERT_REASON]!,
       link: getAlertUrlTransaction(
-        String(fields[SERVICE_NAME][0]!),
+        // TODO:fix SERVICE_NAME when we move it to initializeIndex
+        String(fields[SERVICE_NAME]![0]),
         fields[SERVICE_ENVIRONMENT] && String(fields[SERVICE_ENVIRONMENT][0]),
-        String(fields[TRANSACTION_TYPE][0]!)
+        String(fields[TRANSACTION_TYPE]![0])
       ),
     }),
     iconClass: 'bell',
@@ -170,6 +192,12 @@ export function registerApmRuleTypes(
     validate: () => ({
       errors: [],
     }),
+    alertDetailsAppSection: lazy(
+      () =>
+        import(
+          '../ui_components/alert_details_app_section/alert_details_app_section'
+        )
+    ),
     requiresAppContext: false,
     defaultActionMessage: i18n.translate(
       'xpack.apm.alertTypes.transactionDurationAnomaly.defaultActionMessage',