[RCA] Events timeline improvements (elastic#197127)

Closes elastic#197192

- Alert event is shown as per "alert start" time
- Events are filtered by the alert group/source information (For now,
only filtering by `service.name` for the demo. We need to change the
logic to use `OR` when applying filter for group-by fields)
- Fixed rule condition chart on investigation page when "rate"
aggregation is used

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Shahzad <[email protected]>

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