[Alert details page] Using alert summary widget as the history chart (#…

…181824)

Resolves #181475

## Summary

This PR uses the alert summary widget as a history chart, here is how
they look side by side:


![image](https://github.com/elastic/kibana/assets/12370520/99907ee0-236e-473c-a605-0c265f5d53ca)

Now every rule's alert details page should have the history chart, and
the specific implementation for the following rules has been removed:
- APM Latency
- Log threshold
- Custom threshold
- SLO burn rate

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

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

@@ -12,13 +12,10 @@ import {
   ALERT_END,
   ALERT_EVALUATION_THRESHOLD,
   ALERT_EVALUATION_VALUE,
-  ALERT_INSTANCE_ID,
   ALERT_RULE_TYPE_ID,
-  ALERT_RULE_UUID,
   ALERT_START,
 } from '@kbn/rule-data-utils';
-import moment from 'moment';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { getPaddedAlertTimeRange } from '@kbn/observability-get-padded-alert-time-range-util';
 import { EuiCallOut } from '@elastic/eui';
@@ -34,7 +31,6 @@ import { TimeRangeMetadataContextProvider } from '../../../../context/time_range
 import { getComparisonChartTheme } from '../../../shared/time_comparison/get_comparison_chart_theme';
 import FailedTransactionChart from './failed_transaction_chart';
 import { getAggsTypeFromRule } from './helpers';
-import { LatencyAlertsHistoryChart } from './latency_alerts_history_chart';
 import LatencyChart from './latency_chart';
 import ThroughputChart from './throughput_chart';
 import { AlertDetailsAppSectionProps } from './types';
@@ -125,12 +121,6 @@ export function AlertDetailsAppSection({
   const latencyAggregationType = getAggsTypeFromRule(params.aggregationType);
   const timeRange = getPaddedAlertTimeRange(alert.fields[ALERT_START]!, alert.fields[ALERT_END]);
   const comparisonChartTheme = getComparisonChartTheme();
-  const historicalRange = useMemo(() => {
-    return {
-      start: moment().subtract(30, 'days').toISOString(),
-      end: moment().toISOString(),
-    };
-  }, []);
 
   const { from, to } = timeRange;
   if (!from || !to) {
@@ -206,20 +196,6 @@ export function AlertDetailsAppSection({
               />
             </EuiFlexGroup>
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <LatencyAlertsHistoryChart
-              ruleId={alert.fields[ALERT_RULE_UUID]}
-              alertInstanceId={alert.fields[ALERT_INSTANCE_ID]}
-              serviceName={serviceName}
-              start={historicalRange.start}
-              end={historicalRange.end}
-              transactionType={transactionType}
-              transactionName={transactionName}
-              latencyAggregationType={latencyAggregationType}
-              environment={environment}
-              timeZone={timeZone}
-            />
-          </EuiFlexItem>
         </ChartPointerEventContextProvider>
       </TimeRangeMetadataContextProvider>
     </EuiFlexGroup>