Add warning message displayed for incompatible jobs in EA page (#143942)

* Add a warning message displayed for incompatible jobs on EA page

x-pack/plugins/security_solution/public/common/components/ml_popover/ml_popover.tsx

@@ -165,7 +165,7 @@ export const MlPopover = React.memo(() => {
                           rel="noopener noreferrer"
                           target="_blank"
                         >
-                          {'Anomaly Detection with Machine Learning'}
+                          {i18n.ANOMALY_DETECTION_DOCS}
                         </a>
                       ),
                     }}

x-pack/plugins/security_solution/public/common/components/ml_popover/translations.ts

@@ -39,5 +39,12 @@ export const MODULE_NOT_COMPATIBLE_TITLE = (incompatibleJobCount: number) =>
   i18n.translate('xpack.securitySolution.components.mlPopup.moduleNotCompatibleTitle', {
     values: { incompatibleJobCount },
     defaultMessage:
-      '{incompatibleJobCount} {incompatibleJobCount, plural, =1 {job} other {jobs}} are currently unavailable',
+      '{incompatibleJobCount} {incompatibleJobCount, plural, =1 {job is} other {jobs are}} currently unavailable',
   });
+
+export const ANOMALY_DETECTION_DOCS = i18n.translate(
+  'xpack.securitySolution.entityAnalytics.anomalies.AnomalyDetectionDocsTitle',
+  {
+    defaultMessage: 'Anomaly Detection with Machine Learning',
+  }
+);

x-pack/plugins/security_solution/public/overview/components/entity_analytics/anomalies/index.test.tsx

@@ -204,4 +204,32 @@ describe('EntityAnalyticsAnomalies', () => {
 
     expect(getByTestId('anomalies-table-column-count').textContent).toEqual('Count'); // 'Count' is always rendered by only displayed on mobile
   });
+
+  it('renders a warning message when jobs are incompatible', () => {
+    const jobCount: AnomaliesCount = {
+      job: {
+        isInstalled: true,
+        datafeedState: 'started',
+        jobState: 'opened',
+        isCompatible: false,
+      } as SecurityJob,
+      name: 'v3_windows_anomalous_script',
+      count: 0,
+      entity: AnomalyEntity.User,
+    };
+
+    mockUseNotableAnomaliesSearch.mockReturnValue({
+      isLoading: false,
+      data: [jobCount],
+      refetch: jest.fn(),
+    });
+
+    const { getByTestId } = render(
+      <TestProviders>
+        <EntityAnalyticsAnomalies />
+      </TestProviders>
+    );
+
+    expect(getByTestId('incompatible_jobs_warnings')).toBeInTheDocument();
+  });
 });

x-pack/plugins/security_solution/public/overview/components/entity_analytics/anomalies/index.tsx

@@ -5,9 +5,17 @@
  * 2.0.
  */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiInMemoryTable, EuiPanel } from '@elastic/eui';
+import {
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiInMemoryTable,
+  EuiPanel,
+  EuiSpacer,
+} from '@elastic/eui';
 
 import { MLJobsAwaitingNodeWarning, ML_PAGES, useMlHref } from '@kbn/ml-plugin/public';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { HeaderSection } from '../../../../common/components/header_section';
 import { useQueryToggle } from '../../../../common/containers/query_toggle';
 import { LastUpdatedAt } from '../../../../common/components/last_updated_at';
@@ -43,7 +51,7 @@ export const ENTITY_ANALYTICS_ANOMALIES_PANEL = 'entity_analytics_anomalies';
 
 export const EntityAnalyticsAnomalies = () => {
   const {
-    services: { ml, http },
+    services: { ml, http, docLinks },
   } = useKibana();
 
   const jobsUrl = useMlHref(ml, http.basePath.get(), {
@@ -112,6 +120,11 @@ export const EntityAnalyticsAnomalies = () => {
     [data]
   );
 
+  const incompatibleJobCount = useMemo(
+    () => data.filter(({ job }) => job && !job.isCompatible).length,
+    [data]
+  );
+
   return (
     <EuiPanel hasBorder data-test-subj={ENTITY_ANALYTICS_ANOMALIES_PANEL}>
       <HeaderSection
@@ -149,6 +162,34 @@ export const EntityAnalyticsAnomalies = () => {
           </EuiFlexItem>
         </EuiFlexGroup>
       </HeaderSection>
+
+      {incompatibleJobCount > 0 && (
+        <>
+          <EuiCallOut
+            title={i18n.MODULE_NOT_COMPATIBLE_TITLE(incompatibleJobCount)}
+            data-test-subj="incompatible_jobs_warnings"
+            color="warning"
+            iconType="alert"
+            size="s"
+          >
+            <p>
+              <FormattedMessage
+                defaultMessage="We could not find any data, see {mlDocs} for more information on Machine Learning job requirements."
+                id="xpack.securitySolution.components.mlPopup.moduleNotCompatibleDescription"
+                values={{
+                  mlDocs: (
+                    <a href={`${docLinks.links.siem.ml}`} rel="noopener noreferrer" target="_blank">
+                      {i18n.ANOMALY_DETECTION_DOCS}
+                    </a>
+                  ),
+                }}
+              />
+            </p>
+          </EuiCallOut>
+
+          <EuiSpacer size="m" />
+        </>
+      )}
       <MLJobsAwaitingNodeWarning jobIds={installedJobsIds} />
       {toggleStatus && (
         <EuiInMemoryTable

x-pack/plugins/security_solution/public/overview/components/entity_analytics/anomalies/translations.ts

@@ -76,3 +76,17 @@ export const JOB_STATUS_FAILED = i18n.translate(
     defaultMessage: 'failed',
   }
 );
+
+export const MODULE_NOT_COMPATIBLE_TITLE = (incompatibleJobCount: number) =>
+  i18n.translate('xpack.securitySolution.entityAnalytics.anomalies.moduleNotCompatibleTitle', {
+    values: { incompatibleJobCount },
+    defaultMessage:
+      '{incompatibleJobCount} {incompatibleJobCount, plural, =1 {job is} other {jobs are}} currently unavailable',
+  });
+
+export const ANOMALY_DETECTION_DOCS = i18n.translate(
+  'xpack.securitySolution.entityAnalytics.anomalies.AnomalyDetectionDocsTitle',
+  {
+    defaultMessage: 'Anomaly Detection with Machine Learning',
+  }
+);