Fix to sessionview search (#128680)

* Fix for process event pagination in session view

* Added useMemo to getChildren call. Also fixed some issues around search when verbose mode is OFF

* Added useMemo to getChildren call. Also fixed some issues around search when verbose mode is OFF

Co-authored-by: mitodrummer <karlgodard@elastic.co>

x-pack/plugins/session_view/public/components/process_tree/hooks.ts

@@ -83,7 +83,7 @@ export class ProcessImpl implements Process {
           child.getDetails().process;
 
         // search matches or processes with alerts will never be filtered out
-        if (child.searchMatched || child.hasAlerts()) {
+        if (child.autoExpand || child.searchMatched || child.hasAlerts()) {
           return true;
         }
 
@@ -94,11 +94,6 @@ export class ProcessImpl implements Process {
           return false;
         }
 
-        // If the process has no children and has not exec'd (fork only), we hide it.
-        if (child.children.length === 0 && !child.hasExec()) {
-          return false;
-        }
-
         return true;
       });
     }

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

@@ -145,14 +145,16 @@ export const ProcessTree = ({
       if (processEl) {
         processEl.prepend(selectionAreaEl);
 
-        const cTop = scrollerRef.current.scrollTop;
-        const cBottom = cTop + scrollerRef.current.clientHeight;
+        const { height: elHeight, y: elTop } = processEl.getBoundingClientRect();
+        const { y: viewPortElTop, height: viewPortElHeight } =
+          scrollerRef.current.getBoundingClientRect();
 
-        const eTop = processEl.offsetTop;
-        const eBottom = eTop + processEl.clientHeight;
-        const isVisible = eTop >= cTop && eBottom <= cBottom;
+        const viewPortElBottom = viewPortElTop + viewPortElHeight;
+        const elBottom = elTop + elHeight;
+        const isVisible = elBottom >= viewPortElTop && elTop <= viewPortElBottom;
 
-        if (!isVisible) {
+        // jest will die when calling scrollIntoView (perhaps not part of the DOM it executes under)
+        if (!isVisible && processEl.scrollIntoView) {
           processEl.scrollIntoView({ block: 'center' });
         }
       }
@@ -209,6 +211,7 @@ export const ProcessTree = ({
             onShowAlertDetails={onShowAlertDetails}
             timeStampOn={timeStampOn}
             verboseModeOn={verboseModeOn}
+            searchResults={searchResults}
           />
         )}
         <div

x-pack/plugins/session_view/public/components/process_tree_node/buttons.tsx

@@ -5,9 +5,8 @@
  * 2.0.
  */
 import React from 'react';
-import { EuiButton, EuiIcon, EuiToolTip } from '@elastic/eui';
+import { EuiButton, EuiIcon } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { Process } from '../../../common/types/process_tree';
 import { useButtonStyles } from './use_button_styles';
 
 export const ChildrenProcessesButton = ({
@@ -32,58 +31,6 @@ export const ChildrenProcessesButton = ({
   );
 };
 
-export const SessionLeaderButton = ({
-  process,
-  onClick,
-  showGroupLeadersOnly,
-  childCount,
-}: {
-  process: Process;
-  onClick: () => void;
-  showGroupLeadersOnly: boolean;
-  childCount: number;
-}) => {
-  const groupLeaderCount = process.getChildren(false).length;
-  const sameGroupCount = childCount - groupLeaderCount;
-  const { button, buttonArrow, expandedIcon } = useButtonStyles({
-    isExpanded: !showGroupLeadersOnly,
-  });
-
-  if (sameGroupCount > 0) {
-    return (
-      <EuiToolTip
-        key="samePgidTooltip"
-        position="top"
-        content={
-          <p>
-            <FormattedMessage
-              id="xpack.sessionView.groupLeaderTooltip"
-              defaultMessage="Hide or show other processes in the same 'process group' (pgid) as the session leader. This typically includes forks from bash builtins, auto completions and other shell startup activity."
-            />
-          </p>
-        }
-      >
-        <EuiButton
-          key="group-leaders-only-button"
-          css={button}
-          onClick={onClick}
-          data-test-subj="sessionView:processTreeNodeChildProcessesButton"
-        >
-          <FormattedMessage
-            id="xpack.sessionView.plusCountMore"
-            defaultMessage="+{count} more"
-            values={{
-              count: sameGroupCount,
-            }}
-          />
-          <EuiIcon css={buttonArrow} size="s" type={expandedIcon} />
-        </EuiButton>
-      </EuiToolTip>
-    );
-  }
-  return null;
-};
-
 export const AlertButton = ({
   isExpanded,
   onToggle,

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

@@ -42,6 +42,7 @@ export interface ProcessDeps {
   selectedProcessId?: string;
   timeStampOn?: boolean;
   verboseModeOn?: boolean;
+  searchResults?: Process[];
   scrollerRef: RefObject<HTMLDivElement>;
   onChangeJumpToEventVisibility: (isVisible: boolean, isAbove: boolean) => void;
   onShowAlertDetails: (alertUuid: string) => void;
@@ -60,6 +61,7 @@ export function ProcessTreeNode({
   selectedProcessId,
   timeStampOn = true,
   verboseModeOn = true,
+  searchResults,
   scrollerRef,
   onChangeJumpToEventVisibility,
   onShowAlertDetails,
@@ -171,6 +173,18 @@ export function ProcessTreeNode({
     }
   }, [hasExec, process.parent]);
 
+  const children = useMemo(() => {
+    if (searchResults) {
+      // noop
+      // Only used to break cache on this memo when search changes. We need this ref
+      // to avoid complaints from the useEffect dependency eslint rule.
+      // This fixes an issue when verbose mode is OFF and there are matching results on
+      // hidden processes.
+    }
+
+    return process.getChildren(verboseModeOn);
+  }, [process, verboseModeOn, searchResults]);
+
   if (!processDetails?.process) {
     return null;
   }
@@ -187,9 +201,7 @@ export function ProcessTreeNode({
     start,
   } = processDetails.process;
 
-  const children = process.getChildren(verboseModeOn);
-  const childCount = process.getChildren(true).length;
-  const shouldRenderChildren = childrenExpanded && children && children.length > 0;
+  const shouldRenderChildren = childrenExpanded && children?.length > 0;
   const childrenTreeDepth = depth + 1;
 
   const showUserEscalation = user.id !== parent.user.id;
@@ -261,7 +273,7 @@ export function ProcessTreeNode({
               <span css={buttonStyles.userChangedButtonUsername}>{user.name}</span>
             </EuiButton>
           )}
-          {!isSessionLeader && childCount > 0 && (
+          {!isSessionLeader && children.length > 0 && (
             <ChildrenProcessesButton isExpanded={childrenExpanded} onToggle={onChildrenToggle} />
           )}
           {alerts.length > 0 && (
@@ -298,6 +310,7 @@ export function ProcessTreeNode({
                 selectedProcessId={selectedProcessId}
                 timeStampOn={timeStampOn}
                 verboseModeOn={verboseModeOn}
+                searchResults={searchResults}
                 scrollerRef={scrollerRef}
                 onChangeJumpToEventVisibility={onChangeJumpToEventVisibility}
                 onShowAlertDetails={onShowAlertDetails}