[8.x] [RCA] Events timeline improvements (#197127) (#197240)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[RCA] Events timeline improvements
(#197127)](https://github.com/elastic/kibana/pull/197127)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Bena
Kansara","email":"69037875+benakansara@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-10-22T13:24:14Z","message":"[RCA]
Events timeline improvements (#197127)\n\nCloses
https://github.com/elastic/kibana/issues/197192\r\n\r\n- Alert event is
shown as per \"alert start\" time\r\n- Events are filtered by the alert
group/source information (For now,\r\nonly filtering by `service.name`
for the demo. We need to change the\r\nlogic to use `OR` when applying
filter for group-by fields)\r\n- Fixed rule condition chart on
investigation page when \"rate\"\r\naggregation is
used\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Shahzad
<shahzad31comp@gmail.com>","sha":"6d7fecd8258c60255c3cc1a3d7c86bf1876f62b9","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-management"],"title":"[RCA]
Events timeline
improvements","number":197127,"url":"https://github.com/elastic/kibana/pull/197127","mergeCommit":{"message":"[RCA]
Events timeline improvements (#197127)\n\nCloses
https://github.com/elastic/kibana/issues/197192\r\n\r\n- Alert event is
shown as per \"alert start\" time\r\n- Events are filtered by the alert
group/source information (For now,\r\nonly filtering by `service.name`
for the demo. We need to change the\r\nlogic to use `OR` when applying
filter for group-by fields)\r\n- Fixed rule condition chart on
investigation page when \"rate\"\r\naggregation is
used\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Shahzad
<shahzad31comp@gmail.com>","sha":"6d7fecd8258c60255c3cc1a3d7c86bf1876f62b9"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/197127","number":197127,"mergeCommit":{"message":"[RCA]
Events timeline improvements (#197127)\n\nCloses
https://github.com/elastic/kibana/issues/197192\r\n\r\n- Alert event is
shown as per \"alert start\" time\r\n- Events are filtered by the alert
group/source information (For now,\r\nonly filtering by `service.name`
for the demo. We need to change the\r\nlogic to use `OR` when applying
filter for group-by fields)\r\n- Fixed rule condition chart on
investigation page when \"rate\"\r\naggregation is
used\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Shahzad
<shahzad31comp@gmail.com>","sha":"6d7fecd8258c60255c3cc1a3d7c86bf1876f62b9"}}]}]
BACKPORT-->

Co-authored-by: Bena Kansara <69037875+benakansara@users.noreply.github.com>

x-pack/plugins/observability_solution/investigate_app/public/hooks/query_key_factory.ts

@@ -12,8 +12,8 @@ export const investigationKeys = {
   userProfiles: (profileIds: Set<string>) =>
     [...investigationKeys.all, 'userProfiles', ...profileIds] as const,
   tags: () => [...investigationKeys.all, 'tags'] as const,
-  events: (rangeFrom?: string, rangeTo?: string) =>
-    [...investigationKeys.all, 'events', rangeFrom, rangeTo] as const,
+  events: (rangeFrom?: string, rangeTo?: string, filter?: string) =>
+    [...investigationKeys.all, 'events', rangeFrom, rangeTo, filter] as const,
   stats: () => [...investigationKeys.all, 'stats'] as const,
   lists: () => [...investigationKeys.all, 'list'] as const,
   list: (params: { page: number; perPage: number; search?: string; filter?: string }) =>

x-pack/plugins/observability_solution/investigate_app/public/hooks/use_fetch_events.ts

@@ -23,9 +23,11 @@ export interface Response {
 export function useFetchEvents({
   rangeFrom,
   rangeTo,
+  filter,
 }: {
   rangeFrom?: string;
   rangeTo?: string;
+  filter?: string;
 }): Response {
   const {
     core: {
@@ -35,12 +37,13 @@ export function useFetchEvents({
   } = useKibana();
 
   const { isInitialLoading, isLoading, isError, isSuccess, isRefetching, data } = useQuery({
-    queryKey: investigationKeys.events(rangeFrom, rangeTo),
+    queryKey: investigationKeys.events(rangeFrom, rangeTo, filter),
     queryFn: async ({ signal }) => {
       return await http.get<GetEventsResponse>(`/api/observability/events`, {
         query: {
           rangeFrom,
           rangeTo,
+          filter,
         },
         version: '2023-10-31',
         signal,

x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/events_timeline/events_timeline.tsx

@@ -11,6 +11,9 @@ import { Chart, Axis, AreaSeries, Position, ScaleType, Settings } from '@elastic
 import { useActiveCursor } from '@kbn/charts-plugin/public';
 import { EuiSkeletonText } from '@elastic/eui';
 import { getBrushData } from '@kbn/observability-utils/chart/utils';
+import { Group } from '@kbn/observability-alerting-rule-utils';
+import { ALERT_GROUP } from '@kbn/rule-data-utils';
+import { SERVICE_NAME } from '@kbn/observability-shared-plugin/common';
 import { AnnotationEvent } from './annotation_event';
 import { TIME_LINE_THEME } from './timeline_theme';
 import { useFetchEvents } from '../../../../hooks/use_fetch_events';
@@ -24,10 +27,19 @@ export const EventsTimeLine = () => {
   const baseTheme = dependencies.start.charts.theme.useChartsBaseTheme();
 
   const { globalParams, updateInvestigationParams } = useInvestigation();
+  const { alert } = useInvestigation();
+
+  const filter = useMemo(() => {
+    const group = (alert?.[ALERT_GROUP] as unknown as Group[])?.find(
+      ({ field }) => field === SERVICE_NAME
+    );
+    return group ? `{"${SERVICE_NAME}":"${alert?.[SERVICE_NAME]}"}` : '';
+  }, [alert]);
 
   const { data: events, isLoading } = useFetchEvents({
     rangeFrom: globalParams.timeRange.from,
     rangeTo: globalParams.timeRange.to,
+    filter,
   });
 
   const chartRef = useRef(null);

x-pack/plugins/observability_solution/investigate_app/server/services/get_events.ts

@@ -95,7 +95,7 @@ export async function getAlertEvents(
       id: _source[ALERT_UUID],
       title: `${_source[ALERT_RULE_CATEGORY]} breached`,
       description: _source[ALERT_REASON],
-      timestamp: new Date(_source['@timestamp']).getTime(),
+      timestamp: new Date(_source[ALERT_START] as string).getTime(),
       eventType: 'alert',
       alertStatus: _source[ALERT_STATUS],
     };

x-pack/plugins/observability_solution/investigate_app/tsconfig.json

@@ -68,5 +68,6 @@
     "@kbn/ml-random-sampler-utils",
     "@kbn/charts-plugin",
     "@kbn/observability-utils",
+    "@kbn/observability-alerting-rule-utils",
   ],
 }

x-pack/plugins/observability_solution/observability/public/utils/investigation_item_helper.ts

@@ -24,9 +24,15 @@ const genLensEqForCustomThresholdRule = (criterion: MetricExpression) => {
 
   criterion.metrics.forEach((metric: CustomThresholdExpressionMetric) => {
     const metricFilter = metric.filter ? `kql='${metric.filter}'` : '';
-    metricNameResolver[metric.name] = `${
-      AggMappingForLens[metric.aggType] ? AggMappingForLens[metric.aggType] : metric.aggType
-    }(${metric.field ? metric.field : metricFilter})`;
+    if (metric.aggType === 'rate') {
+      metricNameResolver[metric.name] = `counter_rate(max(${
+        metric.field ? metric.field : metricFilter
+      }))`;
+    } else {
+      metricNameResolver[metric.name] = `${
+        AggMappingForLens[metric.aggType] ? AggMappingForLens[metric.aggType] : metric.aggType
+      }(${metric.field ? metric.field : metricFilter})`;
+    }
   });
 
   let equation = criterion.equation