Use timelineId to tell when investigate in timeline is in a table

kqualters-elastic · Feb 2, 2022 · 30f2ce4 · 30f2ce4
1 parent 51e52f7
commit 30f2ce4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/...ic/detections/components/alerts_table/timeline_actions/investigate_in_timeline_action.tsx b/...ic/detections/components/alerts_table/timeline_actions/investigate_in_timeline_action.tsx
@@ -22,6 +22,7 @@ interface InvestigateInTimelineActionProps {
   alertIds?: string[];
   buttonType?: 'text' | 'icon';
   onInvestigateInTimelineAlertClick?: () => void;
+  timelineId?: string;
 }
 
 const InvestigateInTimelineActionComponent: React.FC<InvestigateInTimelineActionProps> = ({
@@ -30,11 +31,13 @@ const InvestigateInTimelineActionComponent: React.FC<InvestigateInTimelineAction
   ecsRowData,
   buttonType,
   onInvestigateInTimelineAlertClick,
+  timelineId,
 }) => {
   const { investigateInTimelineAlertClick } = useInvestigateInTimeline({
     ecsRowData,
     alertIds,
     onInvestigateInTimelineAlertClick,
+    timelineId,
   });
 
   return (

diff --git a/...ublic/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx b/...ublic/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx
@@ -27,12 +27,14 @@ interface UseInvestigateInTimelineActionProps {
   nonEcsRowData?: TimelineNonEcsData[];
   alertIds?: string[] | null | undefined;
   onInvestigateInTimelineAlertClick?: () => void;
+  timelineId?: string;
 }
 
 export const useInvestigateInTimeline = ({
   ecsRowData,
   alertIds,
   onInvestigateInTimelineAlertClick,
+  timelineId,
 }: UseInvestigateInTimelineActionProps) => {
   const {
     data: { search: searchStrategyClient, query },
@@ -78,7 +80,7 @@ export const useInvestigateInTimeline = ({
   const showInvestigateInTimelineAction = alertIds != null;
   const { isLoading: isFetchingAlertEcs, alertsEcsData } = useFetchEcsAlertsData({
     alertIds,
-    skip: alertIds == null,
+    skip: alertIds == null || timelineId !== undefined,
   });
 
   const investigateInTimelineAlertClick = useCallback(async () => {

diff --git a/...olution/public/detections/containers/detection_engine/alerts/use_fetch_ecs_alerts_data.ts b/...olution/public/detections/containers/detection_engine/alerts/use_fetch_ecs_alerts_data.ts
@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import { isEmpty } from 'lodash';
 
@@ -25,10 +25,11 @@ export const useFetchEcsAlertsData = ({
 }): { isLoading: boolean | null; alertsEcsData: Ecs[] | null } => {
   const [isLoading, setIsLoading] = useState<boolean | null>(null);
   const [alertsEcsData, setAlertEcsData] = useState<Ecs[] | null>(null);
+  const abortCtrl = useRef(new AbortController());
 
   useEffect(() => {
     let isSubscribed = true;
-    const abortCtrl = new AbortController();
+    const controller = abortCtrl.current;
 
     const fetchAlert = async () => {
       try {
@@ -72,7 +73,7 @@ export const useFetchEcsAlertsData = ({
 
     return (): void => {
       isSubscribed = false;
-      abortCtrl.abort();
+      controller.abort();
     };
   }, [alertIds, onError, skip]);