Address detail panel related PR comments (elastic#59)

* Address detail panel related PR comments

* Fix PR comments

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 import { Process, ProcessFields } from '../../../common/types/process_tree';
-import { DetailPanelProcess } from '../../types';
+import { DetailPanelProcess, EuiTabProps } from '../../types';
 
 const getDetailPanelProcessLeader = (leader: ProcessFields) => ({
   ...leader,
@@ -15,15 +15,12 @@ const getDetailPanelProcessLeader = (leader: ProcessFields) => ({
   entryMetaSourceIp: leader.entry_meta?.source.ip || '',
 });
 
-export const getDetailPanelProcess = (process: Process | null) => {
+export const getDetailPanelProcess = (process: Process) => {
   const processData = {} as DetailPanelProcess;
-  if (!process) {
-    return processData;
-  }
 
   processData.id = process.id;
-  processData.start = process.events[0]?.['@timestamp'] || '';
-  processData.end = process.events[process.events.length - 1]?.['@timestamp'] || '';
+  processData.start = process.events[0]['@timestamp'];
+  processData.end = process.events[process.events.length - 1]['@timestamp'];
   const args = new Set<string>();
   processData.executable = [];
 
@@ -54,3 +51,13 @@ export const getDetailPanelProcess = (process: Process | null) => {
 
   return processData;
 };
+
+export const getSelectedTabContent = (tabs: EuiTabProps[], selectedTabId: string) => {
+  const selectedTab = tabs.find((tab) => tab.id === selectedTabId);
+
+  if (selectedTab) {
+    return selectedTab.content;
+  }
+
+  return null;
+};

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

@@ -4,10 +4,11 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useState, ReactNode } from 'react';
+import React, { useState } from 'react';
 import { EuiTabs, EuiTab, EuiNotificationBadge } from '@elastic/eui';
+import { EuiTabProps } from '../../types';
 import { Process, ProcessEventHost } from '../../../common/types/process_tree';
-import { getDetailPanelProcess } from './helpers';
+import { getDetailPanelProcess, getSelectedTabContent } from './helpers';
 import { DetailPanelProcessTab } from '../detail_panel_process_tab';
 import { DetailPanelHostTab } from '../detail_panel_host_tab';
 
@@ -16,25 +17,18 @@ interface SessionViewDetailPanelDeps {
   onProcessSelected?: (process: Process) => void;
 }
 
-interface EuiTabProps {
-  id: string;
-  name: string;
-  content: ReactNode;
-  disabled?: boolean;
-  append?: ReactNode;
-  prepend?: ReactNode;
-}
-
 /**
  * Detail panel in the session view.
  */
 export const SessionViewDetailPanel = ({ selectedProcess }: SessionViewDetailPanelDeps) => {
   const [selectedTabId, setSelectedTabId] = useState('process');
-  const processDetail = getDetailPanelProcess(selectedProcess);
+
   if (!selectedProcess) {
     return <span>Please select a process</span>;
   }
 
+  const processDetail = getDetailPanelProcess(selectedProcess);
+
   let selectedProcessHost = {} as ProcessEventHost;
   if (selectedProcess.events[0]) {
     selectedProcessHost = selectedProcess.events[0].host;
@@ -88,7 +82,7 @@ export const SessionViewDetailPanel = ({ selectedProcess }: SessionViewDetailPan
       <EuiTabs size="l" expand>
         {renderTabs()}
       </EuiTabs>
-      {tabs.find((obj) => obj.id === selectedTabId)?.content}
+      {getSelectedTabContent(tabs, selectedTabId)}
     </>
   );
 };

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

@@ -4,6 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import { ReactNode } from 'react';
 import { CoreStart } from '../../../../src/core/public';
 import { TimelinesUIStart } from '../../timelines/public';
 
@@ -15,6 +16,15 @@ export type SessionViewServices = CoreStart & {
   timelines: TimelinesUIStart;
 };
 
+export interface EuiTabProps {
+  id: string;
+  name: string;
+  content: ReactNode;
+  disabled?: boolean;
+  append?: ReactNode;
+  prepend?: ReactNode;
+}
+
 export interface DetailPanelProcess {
   id: string;
   start: string;