Fix details panel memoization (elastic#75)

* Memoize details panel tabs * Remove unneeded unit test
kqualters-elastic · Feb 24, 2022 · 659edcd · 659edcd
1 parent 6869143
commit 659edcd
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 62 deletions.
diff --git a/x-pack/plugins/session_view/public/components/session_view/index.tsx b/x-pack/plugins/session_view/public/components/session_view/index.tsx
@@ -137,7 +137,7 @@ export const SessionView = ({ sessionEntityId, height, jumpToEvent }: SessionVie
     EuiResizableButton: ComponentType<EuiResizableButtonProps>,
     EuiResizablePanel: ComponentType<EuiResizablePanelProps>
   ) => {
-    if (isDetailOpen) {
+    if (isDetailOpen && selectedProcess) {
       return (
         <>
           <EuiResizableButton />

diff --git a/x-pack/plugins/session_view/public/components/session_view_detail_panel/index.test.tsx b/x-pack/plugins/session_view/public/components/session_view_detail_panel/index.test.tsx
@@ -20,12 +20,6 @@ describe('SessionView component', () => {
   });
 
   describe('When SessionViewDetailPanel is mounted', () => {
-    it('shows empty message', async () => {
-      renderResult = mockedContext.render(<SessionViewDetailPanel selectedProcess={null} />);
-
-      expect(renderResult.queryByText('Please select a process')).toBeVisible();
-    });
-
     it('shows process detail by default', async () => {
       renderResult = mockedContext.render(
         <SessionViewDetailPanel selectedProcess={sessionViewBasicProcessMock} />

diff --git a/x-pack/plugins/session_view/public/components/session_view_detail_panel/index.tsx b/x-pack/plugins/session_view/public/components/session_view_detail_panel/index.tsx
@@ -4,16 +4,16 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useState } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import { EuiTabs, EuiTab, EuiNotificationBadge } from '@elastic/eui';
 import { EuiTabProps } from '../../types';
-import { Process, ProcessEventHost } from '../../../common/types/process_tree';
+import { Process } from '../../../common/types/process_tree';
 import { getDetailPanelProcess, getSelectedTabContent } from './helpers';
 import { DetailPanelProcessTab } from '../detail_panel_process_tab';
 import { DetailPanelHostTab } from '../detail_panel_host_tab';
 
 interface SessionViewDetailPanelDeps {
-  selectedProcess: Process | null;
+  selectedProcess: Process;
   onProcessSelected?: (process: Process) => void;
 }
 
@@ -22,67 +22,61 @@ interface SessionViewDetailPanelDeps {
  */
 export const SessionViewDetailPanel = ({ selectedProcess }: SessionViewDetailPanelDeps) => {
   const [selectedTabId, setSelectedTabId] = useState('process');
+  const processDetail = useMemo(() => getDetailPanelProcess(selectedProcess), [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;
-  }
-
-  const tabs: EuiTabProps[] = [
-    {
-      id: 'process',
-      name: 'Process',
-      content: <DetailPanelProcessTab processDetail={processDetail} />,
-    },
-    {
-      id: 'host',
-      name: 'Host',
-      content: <DetailPanelHostTab processHost={selectedProcessHost} />,
-    },
-    {
-      id: 'alerts',
-      disabled: true,
-      name: 'Alerts',
-      append: (
-        <EuiNotificationBadge className="eui-alignCenter" size="m">
-          10
-        </EuiNotificationBadge>
-      ),
-      content: null,
-    },
-  ];
+  const tabs: EuiTabProps[] = useMemo(
+    () => [
+      {
+        id: 'process',
+        name: 'Process',
+        content: <DetailPanelProcessTab processDetail={processDetail} />,
+      },
+      {
+        id: 'host',
+        name: 'Host',
+        content: <DetailPanelHostTab processHost={selectedProcess.events[0].host} />,
+      },
+      {
+        id: 'alerts',
+        disabled: true,
+        name: 'Alerts',
+        append: (
+          <EuiNotificationBadge className="eui-alignCenter" size="m">
+            10
+          </EuiNotificationBadge>
+        ),
+        content: null,
+      },
+    ],
+    [processDetail, selectedProcess.events]
+  );
 
-  const onSelectedTabChanged = (id: string) => {
+  const onSelectedTabChanged = useCallback((id: string) => {
     setSelectedTabId(id);
-  };
+  }, []);
 
-  const renderTabs = () => {
-    return tabs.map((tab, index) => (
-      <EuiTab
-        key={index}
-        onClick={() => onSelectedTabChanged(tab.id)}
-        isSelected={tab.id === selectedTabId}
-        disabled={tab.disabled}
-        prepend={tab.prepend}
-        append={tab.append}
-      >
-        {tab.name}
-      </EuiTab>
-    ));
-  };
+  const tabContent = useMemo(
+    () => getSelectedTabContent(tabs, selectedTabId),
+    [tabs, selectedTabId]
+  );
 
   return (
     <>
       <EuiTabs size="l" expand>
-        {renderTabs()}
+        {tabs.map((tab, index) => (
+          <EuiTab
+            key={index}
+            onClick={() => onSelectedTabChanged(tab.id)}
+            isSelected={tab.id === selectedTabId}
+            disabled={tab.disabled}
+            prepend={tab.prepend}
+            append={tab.append}
+          >
+            {tab.name}
+          </EuiTab>
+        ))}
       </EuiTabs>
-      {getSelectedTabContent(tabs, selectedTabId)}
+      {tabContent}
     </>
   );
 };