add isFullScreen capability

x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/use_session_view.tsx

@@ -191,9 +191,10 @@ export const useSessionView = ({
       ? sessionView.getSessionView({
           sessionEntityId: sessionViewId,
           loadAlertDetails: openDetailsPanel,
+          isFullScreen: fullScreen,
         })
       : null;
-  }, [openDetailsPanel, sessionView, sessionViewId]);
+  }, [openDetailsPanel, sessionView, sessionViewId, fullScreen]);
 
   const navigation = useMemo(() => {
     return (

x-pack/plugins/session_view/public/components/session_view/index.tsx

@@ -38,6 +38,7 @@ export const SessionView = ({
   height,
   jumpToEvent,
   loadAlertDetails,
+  isFullScreen = false,
 }: SessionViewDeps) => {
   const [isDetailOpen, setIsDetailOpen] = useState(false);
   const [selectedProcess, setSelectedProcess] = useState<Process | null>(null);
@@ -50,7 +51,7 @@ export const SessionView = ({
   const [fetchAlertStatus, setFetchAlertStatus] = useState<string[]>([]);
   const [updatedAlertsStatus, setUpdatedAlertsStatus] = useState<AlertStatusEventEntityIdMap>({});
 
-  const styles = useStyles({ height });
+  const styles = useStyles({ height, isFullScreen });
 
   const onProcessSelected = useCallback((process: Process | null) => {
     setSelectedProcess(process);

x-pack/plugins/session_view/public/components/session_view/styles.ts

@@ -12,21 +12,22 @@ import { euiLightVars as theme } from '@kbn/ui-theme';
 
 interface StylesDeps {
   height: string | undefined;
+  isFullScreen?: boolean;
 }
 
-export const useStyles = ({ height = '500px' }: StylesDeps) => {
+export const useStyles = ({ height = '500px', isFullScreen }: StylesDeps) => {
   const { euiTheme } = useEuiTheme();
 
   const cached = useMemo(() => {
     const { border } = euiTheme;
 
     const processTree: CSSObject = {
-      height: `${height}`,
+      height: `${isFullScreen ? 'calc(100vh - 118px)' : height}`,
       position: 'relative',
     };
 
     const detailPanel: CSSObject = {
-      height: `${height}px`,
+      height: `${isFullScreen ? 'calc(100vh - 118px)' : height}`,
       borderRightWidth: '0px',
     };
 
@@ -67,7 +68,7 @@ export const useStyles = ({ height = '500px' }: StylesDeps) => {
       sessionViewerComponent,
       toolBar,
     };
-  }, [height, euiTheme]);
+  }, [height, isFullScreen, euiTheme]);
 
   return cached;
 };

x-pack/plugins/session_view/public/components/session_view_detail_panel/helpers.ts

@@ -15,7 +15,7 @@ const getDetailPanelProcessLeader = (leader: ProcessFields) => ({
   entryMetaType: leader.entry_meta?.type ?? '',
   userName: leader.user?.name,
   groupName: leader.group?.name ?? '',
-  entryMetaSourceIp: leader.entry_meta?.source.ip ?? '',
+  entryMetaSourceIp: leader.entry_meta?.source?.ip ?? '',
 });
 
 export const getDetailPanelProcess = (process: Process) => {

x-pack/plugins/session_view/public/types.ts

@@ -14,6 +14,7 @@ export interface SessionViewDeps {
   // the root node of the process tree to render. e.g process.entry.entity_id or process.session_leader.entity_id
   sessionEntityId: string;
   height?: string;
+  isFullScreen?: boolean;
   // if provided, the session view will jump to and select the provided event if it belongs to the session leader
   // session view will fetch a page worth of events starting from jumpToEvent as well as a page backwards.
   jumpToEvent?: ProcessEvent;