[Security Solution] Add threshold, machine_learning_job_id and anomaly_threshold editable fields

x-pack/plugins/security_solution/public/common/utils/normalize_machine_learning_job_id.ts

@@ -0,0 +1,12 @@
+/*
+ * 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 type { MachineLearningJobId } from '../../../common/api/detection_engine';
+
+export function normalizeMachineLearningJobId(jobId: MachineLearningJobId): string[] {
+  return typeof jobId === 'string' ? [jobId] : jobId;
+}

x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/anomaly_threshold_edit/anomaly_threshold_edit.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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 { UseField } from '../../../../shared_imports';
+import { AnomalyThresholdSlider } from '../../../rule_creation_ui/components/anomaly_threshold_slider';
+import * as i18n from './translations';
+
+const componentProps = {
+  describedByIds: ['anomalyThreshold'],
+};
+
+interface AnomalyThresholdEditProps {
+  path: string;
+}
+
+export function AnomalyThresholdEdit({ path }: AnomalyThresholdEditProps): JSX.Element {
+  return (
+    <UseField
+      path={path}
+      config={ANOMALY_THRESHOLD_FIELD_CONFIG}
+      component={AnomalyThresholdSlider}
+      componentProps={componentProps}
+    />
+  );
+}
+
+const ANOMALY_THRESHOLD_FIELD_CONFIG = {
+  label: i18n.ANOMALY_THRESHOLD_LABEL,
+};

x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/anomaly_threshold_edit/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { AnomalyThresholdEdit } from './anomaly_threshold_edit';

x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/anomaly_threshold_edit/translations.ts

@@ -0,0 +1,15 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const ANOMALY_THRESHOLD_LABEL = i18n.translate(
+  'xpack.securitySolution.detectionEngine.createRule.stepDefineRule.fieldAnomalyThresholdLabel',
+  {
+    defaultMessage: 'Anomaly score threshold',
+  }
+);

x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/create_ml_job_button/create_ml_job_button.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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 { css } from '@emotion/css';
+import { EuiButton } from '@elastic/eui';
+import { useKibana } from '../../../../common/lib/kibana';
+import * as i18n from './translations';
+
+const buttonClassName = css`
+  margin-top: 20px;
+`;
+
+export function CreateCustomMlJobButton(): JSX.Element {
+  const { navigateToApp } = useKibana().services.application;
+
+  return (
+    <EuiButton
+      className={buttonClassName}
+      iconType="popout"
+      iconSide="right"
+      onClick={() => navigateToApp('ml', { openInNewTab: true })}
+    >
+      {i18n.CREATE_CUSTOM_JOB_BUTTON_TITLE}
+    </EuiButton>
+  );
+}

x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/create_ml_job_button/translations.ts

@@ -0,0 +1,15 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const CREATE_CUSTOM_JOB_BUTTON_TITLE = i18n.translate(
+  'xpack.securitySolution.detectionEngine.mlSelectJob.createCustomJobButtonTitle',
+  {
+    defaultMessage: 'Create custom job',
+  }
+);

x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/machine_learning_job_id_edit/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { MachineLearningJobIdEdit } from './machine_learning_job_id_edit';

x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/machine_learning_job_id_edit/machine_learning_job_id_edit.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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, { useMemo } from 'react';
+import { UseField, fieldValidators } from '../../../../shared_imports';
+import { MlJobSelect } from '../ml_job_select';
+import { useSecurityJobs } from '../../../../common/components/ml_popover/hooks/use_security_jobs';
+import * as i18n from './translations';
+
+interface MachineLearningJobIdEditProps {
+  path: string;
+  shouldShowHelpText?: boolean;
+}
+
+export function MachineLearningJobIdEdit({
+  path,
+  shouldShowHelpText,
+}: MachineLearningJobIdEditProps): JSX.Element {
+  const { loading, jobs } = useSecurityJobs();
+
+  const componentProps = useMemo(
+    () => ({
+      jobs,
+      loading,
+      shouldShowHelpText,
+    }),
+    [jobs, loading, shouldShowHelpText]
+  );
+
+  return (
+    <UseField
+      path={path}
+      config={MACHINE_LEARNING_JOB_ID_FIELD_CONFIG}
+      component={MlJobSelect}
+      componentProps={componentProps}
+    />
+  );
+}
+
+const MACHINE_LEARNING_JOB_ID_FIELD_CONFIG = {
+  label: i18n.MACHINE_LEARNING_JOB_ID_LABEL,
+  validations: [
+    {
+      validator: fieldValidators.emptyField(
+        i18n.MACHINE_LEARNING_JOB_ID_EMPTY_FIELD_VALIDATION_ERROR
+      ),
+    },
+  ],
+};

x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/machine_learning_job_id_edit/translations.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const MACHINE_LEARNING_JOB_ID_LABEL = i18n.translate(
+  'xpack.securitySolution.detectionEngine.createRule.stepDefineRule.fieldMachineLearningJobIdLabel',
+  {
+    defaultMessage: 'Machine Learning job',
+  }
+);
+
+export const MACHINE_LEARNING_JOB_ID_EMPTY_FIELD_VALIDATION_ERROR = i18n.translate(
+  'xpack.securitySolution.detectionEngine.createRule.stepDefineRule.machineLearningJobIdRequired',
+  {
+    defaultMessage: 'A Machine Learning job is required.',
+  }
+);

x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/ml_job_select/help_text.test.tsx

@@ -8,15 +8,46 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { HelpText } from './help_text';
+import type { SecurityJob } from '../../../../common/components/ml_popover/types';
+
+jest.mock('../../../../common/lib/kibana', () => {
+  return {
+    useKibana: jest.fn().mockReturnValue({
+      services: {
+        application: {
+          getUrlForApp: () => '/app/ml',
+        },
+      },
+    }),
+  };
+});
 
 describe('MlJobSelect help text', () => {
   it('does not show warning if all jobs are running', () => {
-    const wrapper = shallow(<HelpText href={'https://test.com'} notRunningJobIds={[]} />);
+    const jobs = [
+      {
+        id: 'test-id',
+        jobState: 'opened',
+        datafeedState: 'opened',
+      },
+    ] as SecurityJob[];
+    const selectedJobIds = ['test-id'];
+
+    const wrapper = shallow(<HelpText jobs={jobs} selectedJobIds={selectedJobIds} />);
     expect(wrapper.find('[data-test-subj="ml-warning-not-running-jobs"]')).toHaveLength(0);
   });
 
   it('shows warning if there are jobs not running', () => {
-    const wrapper = shallow(<HelpText href={'https://test.com'} notRunningJobIds={['id']} />);
+    const jobs = [
+      {
+        id: 'test-id',
+        jobState: 'closed',
+        datafeedState: 'stopped',
+      },
+    ] as SecurityJob[];
+    const selectedJobIds = ['test-id'];
+
+    const wrapper = shallow(<HelpText jobs={jobs} selectedJobIds={selectedJobIds} />);
     expect(wrapper.find('[data-test-subj="ml-warning-not-running-jobs"]')).toHaveLength(1);
   });
 });

x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/ml_job_select/help_text.tsx

@@ -5,63 +5,84 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { memo, useMemo } from 'react';
 import { EuiLink, EuiText } from '@elastic/eui';
-import styled from 'styled-components';
+import { css } from '@emotion/css';
 
 import { FormattedMessage } from '@kbn/i18n-react';
+import { isJobStarted } from '../../../../../common/machine_learning/helpers';
+import type { SecurityJob } from '../../../../common/components/ml_popover/types';
+import { useKibana } from '../../../../common/lib/kibana';
+interface HelpTextProps {
+  jobs: SecurityJob[];
+  selectedJobIds: string[];
+}
 
-const HelpTextWarningContainer = styled.div`
-  margin-top: 10px;
-`;
+export const HelpText = memo(function HelpText({
+  jobs,
+  selectedJobIds,
+}: HelpTextProps): JSX.Element {
+  const { getUrlForApp } = useKibana().services.application;
+  const mlUrl = getUrlForApp('ml');
 
-const HelpTextComponent: React.FC<{ href: string; notRunningJobIds: string[] }> = ({
-  href,
-  notRunningJobIds,
-}) => (
-  <>
-    <FormattedMessage
-      id="xpack.securitySolution.detectionEngine.createRule.stepDefineRule.machineLearningJobIdHelpText"
-      defaultMessage="We've provided a few common jobs to get you started. To add your own custom jobs, assign a group of 'security' to those jobs in the {machineLearning} application to make them appear here."
-      values={{
-        machineLearning: (
-          <EuiLink href={href} target="_blank">
-            <FormattedMessage
-              id="xpack.securitySolution.components.mlJobSelect.machineLearningLink"
-              defaultMessage="Machine Learning"
-            />
-          </EuiLink>
-        ),
-      }}
-    />
-    {notRunningJobIds.length > 0 && (
-      <HelpTextWarningContainer data-test-subj="ml-warning-not-running-jobs">
-        <EuiText size="xs">
-          <span>
-            {notRunningJobIds.length === 1 ? (
-              <FormattedMessage
-                id="xpack.securitySolution.detectionEngine.createRule.stepDefineRule.mlEnableJobSingle"
-                defaultMessage="The selected ML job, {jobName}, is not currently running. We will start {jobName} when you enable this rule."
-                values={{
-                  jobName: notRunningJobIds[0],
-                }}
-              />
-            ) : (
+  const notRunningJobIds = useMemo<string[]>(() => {
+    const selectedJobs = jobs.filter(({ id }) => selectedJobIds.includes(id));
+    return selectedJobs.reduce((acc, job) => {
+      if (!isJobStarted(job.jobState, job.datafeedState)) {
+        acc.push(job.id);
+      }
+      return acc;
+    }, [] as string[]);
+  }, [jobs, selectedJobIds]);
+
+  return (
+    <>
+      <FormattedMessage
+        id="xpack.securitySolution.detectionEngine.createRule.stepDefineRule.machineLearningJobIdHelpText"
+        defaultMessage="We've provided a few common jobs to get you started. To add your own custom jobs, assign a group of 'security' to those jobs in the {machineLearning} application to make them appear here."
+        values={{
+          machineLearning: (
+            <EuiLink href={mlUrl} target="_blank">
               <FormattedMessage
-                id="xpack.securitySolution.detectionEngine.createRule.stepDefineRule.mlEnableJobMulti"
-                defaultMessage="The selected ML jobs, {jobNames}, are not currently running. We will start all of these jobs when you enable this rule."
-                values={{
-                  jobNames: notRunningJobIds.reduce(
-                    (acc, value, i, array) => acc + (i < array.length - 1 ? ', ' : ', and ') + value
-                  ),
-                }}
+                id="xpack.securitySolution.components.mlJobSelect.machineLearningLink"
+                defaultMessage="Machine Learning"
               />
-            )}
-          </span>
-        </EuiText>
-      </HelpTextWarningContainer>
-    )}
-  </>
-);
+            </EuiLink>
+          ),
+        }}
+      />
+      {notRunningJobIds.length > 0 && (
+        <div className={warningContainerClassName} data-test-subj="ml-warning-not-running-jobs">
+          <EuiText size="xs">
+            <span>
+              {notRunningJobIds.length === 1 ? (
+                <FormattedMessage
+                  id="xpack.securitySolution.detectionEngine.createRule.stepDefineRule.mlEnableJobSingle"
+                  defaultMessage="The selected ML job, {jobName}, is not currently running. We will start {jobName} when you enable this rule."
+                  values={{
+                    jobName: notRunningJobIds[0],
+                  }}
+                />
+              ) : (
+                <FormattedMessage
+                  id="xpack.securitySolution.detectionEngine.createRule.stepDefineRule.mlEnableJobMulti"
+                  defaultMessage="The selected ML jobs, {jobNames}, are not currently running. We will start all of these jobs when you enable this rule."
+                  values={{
+                    jobNames: notRunningJobIds.reduce(
+                      (acc, value, i, array) =>
+                        acc + (i < array.length - 1 ? ', ' : ', and ') + value
+                    ),
+                  }}
+                />
+              )}
+            </span>
+          </EuiText>
+        </div>
+      )}
+    </>
+  );
+});
 
-export const HelpText = React.memo(HelpTextComponent);
+const warningContainerClassName = css`
+  margin-top: 10px;
+`;