[Security Solution][Resolver] Add no process events found messaging t…

…o resolver (#91561)

x-pack/plugins/security_solution/public/resolver/view/resolver_loading_state.test.tsx

@@ -130,18 +130,18 @@ describe('Resolver: data loading and resolution states', () => {
       });
     });
 
-    it('should display a resolver graph with 0 nodes', async () => {
+    it('should display a message informing the user why no nodes are present', async () => {
       await expect(
         simulator.map(() => ({
           resolverGraphLoading: simulator.testSubject('resolver:graph:loading').length,
           resolverGraphError: simulator.testSubject('resolver:graph:error').length,
-          resolverTree: simulator.testSubject('resolver:graph').length,
+          resolverEmptyMessage: simulator.testSubject('resolver:no-process-events').length,
           resolverGraphNodes: simulator.testSubject('resolver:node').length,
         }))
       ).toYieldEqualTo({
         resolverGraphLoading: 0,
         resolverGraphError: 0,
-        resolverTree: 1,
+        resolverEmptyMessage: 1,
         resolverGraphNodes: 0,
       });
     });

x-pack/plugins/security_solution/public/resolver/view/resolver_no_process_events.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import styled from 'styled-components';
+import { EuiCodeBlock, EuiFlexGroup, EuiTitle, EuiSpacer, EuiText } from '@elastic/eui';
+
+const StyledEuiCodeBlock = styled(EuiCodeBlock)`
+  align-self: flex-start;
+  display: inline-block;
+`;
+
+const StyledEuiFlexGroup = styled(EuiFlexGroup)`
+  max-width: 600px;
+  margin: 60px auto 0;
+`;
+
+export const ResolverNoProcessEvents = () => (
+  <StyledEuiFlexGroup data-test-subj="resolver:no-process-events" direction="column">
+    <EuiTitle>
+      <h4>
+        {i18n.translate('xpack.securitySolution.resolver.noProcessEvents.title', {
+          defaultMessage: 'No Process Events Found',
+        })}
+      </h4>
+    </EuiTitle>
+    <EuiSpacer size="m" />
+    <EuiText size="s">
+      {i18n.translate('xpack.securitySolution.resolver.noProcessEvents.timeRange', {
+        defaultMessage: `
+            The Analyze Event tool creates graphs based on process events.
+            If the analyzed event does not have an associated process in the current time range,
+            or stored in Elasticsearch within any time range, a graph will not be created.
+            You can check for associated processes by expanding your time range.
+          `,
+      })}
+    </EuiText>
+    <EuiSpacer size="m" />
+    <EuiText size="s">
+      {i18n.translate('xpack.securitySolution.resolver.noProcessEvents.eventCategory', {
+        defaultMessage: `You may also add the below to your timeline query to check for process events.
+            If none are listed, a graph cannot be created from events found in that query.`,
+      })}
+    </EuiText>
+    <EuiSpacer size="m" />
+    <StyledEuiCodeBlock language="html" paddingSize="s" isCopyable>
+      {"event.category: 'process'"}
+    </StyledEuiCodeBlock>
+  </StyledEuiFlexGroup>
+);

x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx

@@ -7,7 +7,7 @@
 
 /* eslint-disable react/display-name */
 
-import React, { useContext, useCallback } from 'react';
+import React, { useContext, useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { EuiLoadingSpinner } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -26,6 +26,7 @@ import { ResolverProps, ResolverState } from '../types';
 import { PanelRouter } from './panels';
 import { useColors } from './use_colors';
 import { useSyncSelectedNode } from './use_sync_selected_node';
+import { ResolverNoProcessEvents } from './resolver_no_process_events';
 
 /**
  * The highest level connected Resolver component. Needs a `Provider` in its ancestry to work.
@@ -96,6 +97,10 @@ export const ResolverWithoutProviders = React.memo(
     const activeDescendantId = useSelector(selectors.ariaActiveDescendant);
     const colorMap = useColors();
 
+    const noProcessEventsFound = useMemo(() => processNodePositions.size < 1, [
+      processNodePositions,
+    ]);
+
     return (
       <StyledMapContainer className={className} backgroundColor={colorMap.resolverBackground}>
         {isLoading ? (
@@ -112,6 +117,8 @@ export const ResolverWithoutProviders = React.memo(
               />
             </div>
           </div>
+        ) : noProcessEventsFound ? (
+          <ResolverNoProcessEvents />
         ) : (
           <>
             <GraphContainer