[Security Solution][Alert details] do not open the SessionView detailed panel on first load (#210121)

PhilippeOberti · web-flow · commit ee61373643e6 · 2025-02-11T08:56:23.000+01:00
## Summary We [recently improved](#200270) the SessionView experience when visualized within the alert details expandable flyout. One downside was that the SessionView detailed panel was opening in the flyout preview section on first load. This was intended at the time, to mimic the behavior of the SessionView rendered in place of the alerts table. This behavior is not desired in the flyout though. This PR is making a very small code change, to ensure that the detailed panel is NOT rendered on first load, but will be when users click on a row in the SessionView tree (which is a behavior that exists today). #### Previous behavior https://github.com/user-attachments/assets/ac6c0493-5d57-4dd1-bd43-bec6b025e768 #### New behavior https://github.com/user-attachments/assets/4ce48f4d-f04d-46f8-a6b1-693fe8983d20 The amount of code change was kept to a minimum. I basically added one prop to the `onSelectedProcess` callback that will differentiate user actions from automated actions. The value is `false` by default, to not change any existing logic, except on the user click event happening in the tree. #### Logic not changed when displayed in place of the alerts table https://github.com/user-attachments/assets/b54ec319-baf5-4318-a45f-405178f92888 ## How to test - turn on the `securitySolution:enableVisualizationsInFlyout` Advanced Settings ![Screenshot 2024-12-16 at 5 05 05 PM](https://github.com/user-attachments/assets/e5a937fa-7eaf-46b3-be11-d56224daf821) - generate alerts with data for session view (`yarn test:generate -n http://elastic:changeme@localhost:9200 -k http://elastic:changeme@localhost:5601`)
diff --git a/x-pack/solutions/security/plugins/session_view/public/components/process_tree/index.tsx b/x-pack/solutions/security/plugins/session_view/public/components/process_tree/index.tsx
@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { ProcessTreeNode } from '../process_tree_node';
 import { BackToInvestigatedAlert } from '../back_to_investigated_alert';
@@ -52,7 +52,7 @@ export interface ProcessTreeDeps {
 
   // currently selected process
   selectedProcess?: Process | null;
-  onProcessSelected: (process: Process | null) => void;
+  onProcessSelected: (process: Process | null, isManualSelection?: boolean) => void;
   setSearchResults?: (results: Process[]) => void;
 
   // a map for alerts with updated status and process.entity_id
diff --git a/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/index.tsx b/x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/index.tsx
@@ -6,15 +6,15 @@
  */
 
 import React, {
-  useState,
-  useEffect,
   MouseEvent,
+  ReactElement,
+  RefObject,
   useCallback,
+  useEffect,
   useMemo,
-  RefObject,
-  ReactElement,
+  useState,
 } from 'react';
-import { EuiButton, EuiIcon, EuiToolTip, formatDate, EuiButtonIcon } from '@elastic/eui';
+import { EuiButton, EuiButtonIcon, EuiIcon, EuiToolTip, formatDate } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { chain } from 'lodash';
@@ -43,7 +43,7 @@ export interface ProcessDeps {
   process: Process;
   isSessionLeader?: boolean;
   depth?: number;
-  onProcessSelected?: (process: Process) => void;
+  onProcessSelected?: (process: Process, isManualSelection?: boolean) => void;
   jumpToEntityId?: string;
   investigatedAlertId?: string;
   selectedProcess?: Process | null;
@@ -57,6 +57,7 @@ export interface ProcessDeps {
   loadNextButton?: ReactElement | null;
   loadPreviousButton?: ReactElement | null;
   handleCollapseProcessTree?: () => void;
+
   trackEvent(name: SessionViewTelemetryKey): void;
 }
 
@@ -187,7 +188,9 @@ export function ProcessTreeNode({
         return;
       }
 
-      onProcessSelected?.(process);
+      // we pass true here to let the parent SessionView component that the process was selected
+      // by a user clicking on a row in the tree
+      onProcessSelected?.(process, true);
 
       if (isSessionLeader && scrollerRef.current) {
         scrollerRef.current.scrollTop = 0;
diff --git a/x-pack/solutions/security/plugins/session_view/public/components/session_view/index.tsx b/x-pack/solutions/security/plugins/session_view/public/components/session_view/index.tsx
@@ -5,16 +5,16 @@
  * 2.0.
  */
 import { v4 as uuidv4 } from 'uuid';
-import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  EuiEmptyPrompt,
   EuiButton,
+  EuiButtonIcon,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
   EuiFlexItem,
-  EuiResizableContainer,
-  EuiPanel,
   EuiHorizontalRule,
-  EuiFlexGroup,
-  EuiButtonIcon,
+  EuiPanel,
+  EuiResizableContainer,
   EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -24,17 +24,17 @@ import { SectionLoading } from '../../shared_imports';
 import { ProcessTree } from '../process_tree';
 import type { AlertStatusEventEntityIdMap, Process, ProcessEvent } from '../../../common';
 import type { DisplayOptionsState } from '../session_view_display_options';
+import { SessionViewDisplayOptions } from '../session_view_display_options';
 import type { SessionViewDeps, SessionViewIndices, SessionViewTelemetryKey } from '../../types';
 import { SessionViewDetailPanel } from '../session_view_detail_panel';
 import { SessionViewSearchBar } from '../session_view_search_bar';
-import { SessionViewDisplayOptions } from '../session_view_display_options';
 import { TTYPlayer } from '../tty_player';
 import { useStyles } from './styles';
 import {
   useFetchAlertStatus,
-  useFetchSessionViewProcessEvents,
-  useFetchSessionViewAlerts,
   useFetchGetTotalIOBytes,
+  useFetchSessionViewAlerts,
+  useFetchSessionViewProcessEvents,
 } from './hooks';
 import { LOCAL_STORAGE_DISPLAY_OPTIONS_KEY } from '../../../common/constants';
 import {
@@ -45,7 +45,7 @@ import {
   ELASTIC_DEFEND_DATA_SOURCE,
   ENDPOINT_INDEX,
 } from '../../methods';
-import { REFRESH_SESSION, TOGGLE_TTY_PLAYER, DETAIL_PANEL } from './translations';
+import { DETAIL_PANEL, REFRESH_SESSION, TOGGLE_TTY_PLAYER } from './translations';
 
 /**
  * The main wrapper component for the session view.
@@ -119,12 +119,13 @@ export const SessionView = ({
   }, [displayOptions?.verboseMode, searchResults, searchQuery]);
 
   const onProcessSelected = useCallback(
-    (process: Process | null) => {
+    (process: Process | null, isManualSelection = false) => {
       setSelectedProcess(process);
 
       // used when SessionView is displayed in the expandable flyout
       // This refreshes the detailed panel rendered in the flyout preview panel
-      if (openDetailsInExpandableFlyout) {
+      // the isManualSelection prevents the detailed panel to render on first load of the SessionView component
+      if (openDetailsInExpandableFlyout && isManualSelection) {
         openDetailsInExpandableFlyout(process);
       }
     },
