Update detection pages to display jobs friendly names

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/ml_rule_warning_popover.tsx

@@ -76,7 +76,7 @@ const MlRuleWarningPopoverComponent: React.FC<MlRuleWarningPopoverComponentProps
       </div>
       <EuiSpacer size="s" />
       {notRunningJobs.map((job) => (
-        <EuiText>{job.id}</EuiText>
+        <EuiText>{job.customSettings?.security_app_display_name ?? job.id}</EuiText>
       ))}
       <EuiPopoverFooter>
         <SecuritySolutionLinkButton

x-pack/plugins/security_solution/public/detections/components/rules/ml_job_link/ml_job_link.test.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 { render } from '@testing-library/react';
+
+import { MlJobLink } from './ml_job_link';
+import { TestProviders } from '../../../../common/mock';
+
+jest.mock('../../../../common/lib/kibana', () => {
+  const originalModule = jest.requireActual('../../../../common/lib/kibana');
+  return {
+    ...originalModule,
+    useKibana: jest.fn().mockReturnValue({
+      services: { theme: { theme$: {} }, http: { basePath: { get: jest.fn(() => {}) } } },
+    }),
+  };
+});
+
+describe('MlJobLink', () => {
+  it('renders job name when available', () => {
+    const jobName = 'test_job_name';
+    const { getByTestId } = render(<MlJobLink jobId={'test_job_id'} jobName={jobName} />, {
+      wrapper: TestProviders,
+    });
+
+    expect(getByTestId('machineLearningJobLink')).toHaveTextContent(jobName);
+  });
+
+  it('renders job id when job name is unavailable', () => {
+    const jobId = 'test_job_id';
+    const { getByTestId } = render(<MlJobLink jobId={jobId} jobName={undefined} />, {
+      wrapper: TestProviders,
+    });
+
+    expect(getByTestId('machineLearningJobLink')).toHaveTextContent(jobId);
+  });
+});

x-pack/plugins/security_solution/public/detections/components/rules/ml_job_link/ml_job_link.tsx

@@ -18,9 +18,10 @@ const StyledJobEuiLInk = styled(EuiLink)`
 
 interface MlJobLinkProps {
   jobId: string;
+  jobName: string | undefined;
 }
 
-const MlJobLinkComponent: React.FC<MlJobLinkProps> = ({ jobId }) => {
+const MlJobLinkComponent: React.FC<MlJobLinkProps> = ({ jobId, jobName }) => {
   const {
     services: { http, ml },
   } = useKibana();
@@ -33,7 +34,7 @@ const MlJobLinkComponent: React.FC<MlJobLinkProps> = ({ jobId }) => {
 
   return (
     <StyledJobEuiLInk data-test-subj="machineLearningJobLink" href={jobUrl} target="_blank">
-      <span data-test-subj="machineLearningJobId">{jobId}</span>
+      <span data-test-subj="machineLearningJobId">{jobName ?? jobId}</span>
     </StyledJobEuiLInk>
   );
 };

x-pack/plugins/security_solution/public/detections/components/rules/ml_job_select/index.tsx

@@ -50,9 +50,9 @@ const MlJobEuiButton = styled(EuiButton)`
   margin-top: 20px;
 `;
 
-const JobDisplay: React.FC<MlJobValue> = ({ id, description }) => (
+const JobDisplay: React.FC<{ description: string; label: string }> = ({ description, label }) => (
   <JobDisplayContainer>
-    <strong>{id}</strong>
+    <strong>{label}</strong>
     <EuiToolTip content={description}>
       <EuiText size="xs" color="subdued">
         <p>{description}</p>
@@ -68,7 +68,7 @@ interface MlJobSelectProps {
 
 const renderJobOption = (option: MlJobOption) => (
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  <JobDisplay id={option.value!.id} description={option.value!.description} />
+  <JobDisplay description={option.value!.description} label={option.label} />
 );
 
 export const MlJobSelect: React.FC<MlJobSelectProps> = ({ describedByIds = [], field }) => {
@@ -91,7 +91,7 @@ export const MlJobSelect: React.FC<MlJobSelectProps> = ({ describedByIds = [], f
       id: job.id,
       description: job.description,
     },
-    label: job.id,
+    label: job.customSettings?.security_app_display_name ?? job.id,
   }));
 
   const selectedJobOptions = jobOptions.filter((option) => jobIds.includes(option.value.id));

x-pack/plugins/security_solution/public/detections/components/rules/ml_jobs_description/ml_job_item.tsx

@@ -32,7 +32,7 @@ const MlJobItemComponent: FC<{
   return (
     <Wrapper {...props}>
       <div>
-        <MlJobLink jobId={job.id} />
+        <MlJobLink jobId={job.id} jobName={job.customSettings?.security_app_display_name} />
         <MlAuditIcon message={job.auditMessage} />
       </div>
       <EuiFlexGroup justifyContent="flexStart">

x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/ml.ts

@@ -80,6 +80,7 @@ export const mlExecutor = async ({
         ...jobSummaries.map((job) =>
           [
             `job id: "${job.id}"`,
+            `job name: "${job?.customSettings?.security_app_display_name ?? job.id}"`,
             `job status: "${job.jobState}"`,
             `datafeed status: "${job.datafeedState}"`,
           ].join(', ')