-
-
- ),
- }}
- />
- {notRunningJobIds.length > 0 && (
-
-
-
- {notRunningJobIds.length === 1 ? (
-
- ) : (
+ const notRunningJobIds = useMemo(() => {
+ 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 (
+ <>
+
acc + (i < array.length - 1 ? ', ' : ', and ') + value
- ),
- }}
+ id="xpack.securitySolution.components.mlJobSelect.machineLearningLink"
+ defaultMessage="Machine Learning"
/>
- )}
-
-
-
- )}
-
-);
+
+ ),
+ }}
+ />
+ {notRunningJobIds.length > 0 && (
+
+
+
+ {notRunningJobIds.length === 1 ? (
+
+ ) : (
+
+ acc + (i < array.length - 1 ? ', ' : ', and ') + value
+ ),
+ }}
+ />
+ )}
+
+
+
+ )}
+
+ );
+});
-export const HelpText = React.memo(HelpTextComponent);
+const warningContainerClassName = css`
+ margin-top: 10px;
+`;
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_job_select/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_job_select/index.tsx
index e9c22457d7465..187f72db3562e 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_job_select/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_job_select/index.tsx
@@ -5,153 +5,4 @@
* 2.0.
*/
-import React, { useCallback, useMemo } from 'react';
-import type { EuiComboBoxOptionOption } from '@elastic/eui';
-import {
- EuiButton,
- EuiComboBox,
- EuiFlexGroup,
- EuiFlexItem,
- EuiFormRow,
- EuiToolTip,
- EuiText,
-} from '@elastic/eui';
-
-import styled from 'styled-components';
-import { isJobStarted } from '../../../../../common/machine_learning/helpers';
-import type { FieldHook } from '../../../../shared_imports';
-import { getFieldValidityAndErrorMessage } from '../../../../shared_imports';
-import { useSecurityJobs } from '../../../../common/components/ml_popover/hooks/use_security_jobs';
-import { useKibana } from '../../../../common/lib/kibana';
-import { HelpText } from './help_text';
-
-import * as i18n from './translations';
-
-interface MlJobValue {
- id: string;
- description: string;
- name?: string;
-}
-
-const JobDisplayContainer = styled.div`
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
-`;
-
-type MlJobOption = EuiComboBoxOptionOption;
-
-const MlJobSelectEuiFlexGroup = styled(EuiFlexGroup)`
- margin-bottom: 5px;
-`;
-
-const MlJobEuiButton = styled(EuiButton)`
- margin-top: 20px;
-`;
-
-const JobDisplay: React.FC = ({ description, name, id }) => (
-
- {name ?? id}
-
-
- {description}
-
-
-
-);
-
-interface MlJobSelectProps {
- describedByIds: string[];
- field: FieldHook;
-}
-
-const renderJobOption = (option: MlJobOption) => (
-
-);
-
-export const MlJobSelect: React.FC = ({ describedByIds = [], field }) => {
- const jobIds = field.value as string[];
- const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
- const { loading, jobs } = useSecurityJobs();
- const { getUrlForApp, navigateToApp } = useKibana().services.application;
- const mlUrl = getUrlForApp('ml');
- const handleJobSelect = useCallback(
- (selectedJobOptions: MlJobOption[]): void => {
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- const selectedJobIds = selectedJobOptions.map((option) => option.value!.id);
- field.setValue(selectedJobIds);
- },
- [field]
- );
-
- const jobOptions = jobs.map((job) => ({
- value: {
- id: job.id,
- description: job.description,
- name: job.customSettings?.security_app_display_name,
- },
- // Make sure users can search for id or name.
- // The label contains the name and id because EuiComboBox uses it for the textual search.
- label: `${job.customSettings?.security_app_display_name} ${job.id}`,
- }));
-
- const selectedJobOptions = jobOptions
- .filter((option) => jobIds.includes(option.value.id))
- // 'label' defines what is rendered inside the selected ComboBoxPill
- .map((options) => ({ ...options, label: options.value.name ?? options.value.id }));
-
- const notRunningJobIds = useMemo(() => {
- const selectedJobs = jobs.filter(({ id }) => jobIds.includes(id));
- return selectedJobs.reduce((acc, job) => {
- if (!isJobStarted(job.jobState, job.datafeedState)) {
- acc.push(job.id);
- }
- return acc;
- }, [] as string[]);
- }, [jobs, jobIds]);
-
- return (
-
-
- }
- isInvalid={isInvalid}
- error={errorMessage}
- data-test-subj="mlJobSelect"
- describedByIds={describedByIds}
- >
-
-
-
-
-
-
-
-
- navigateToApp('ml', { openInNewTab: true })}
- >
- {i18n.CREATE_CUSTOM_JOB_BUTTON_TITLE}
-
-
-
- );
-};
+export { MlJobSelect } from './ml_job_select';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_job_select/index.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_job_select/ml_job_select.test.tsx
similarity index 89%
rename from x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_job_select/index.test.tsx
rename to x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_job_select/ml_job_select.test.tsx
index 5323ac16bff4f..ddbb6c8b70708 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_job_select/index.test.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_job_select/ml_job_select.test.tsx
@@ -21,9 +21,9 @@ describe('MlJobSelect', () => {
it('renders correctly', () => {
const Component = () => {
- const field = useFormFieldMock();
+ const field = useFormFieldMock();
- return ;
+ return ;
};
const wrapper = shallow();
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_job_select/ml_job_select.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_job_select/ml_job_select.tsx
new file mode 100644
index 0000000000000..160178a5b782d
--- /dev/null
+++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_job_select/ml_job_select.tsx
@@ -0,0 +1,113 @@
+/*
+ * 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 {
+ EuiComboBox,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFormRow,
+ EuiText,
+ EuiToolTip,
+} from '@elastic/eui';
+
+import type { FieldHook } from '../../../../shared_imports';
+import { getFieldValidityAndErrorMessage } from '../../../../shared_imports';
+import { HelpText } from './help_text';
+import * as i18n from './translations';
+import type { SecurityJob } from '../../../../common/components/ml_popover/types';
+import type { MlJobOption, MlJobValue } from './types';
+import * as styles from './styles';
+
+interface MlJobSelectProps {
+ field: FieldHook;
+ shouldShowHelpText?: boolean;
+ loading: boolean;
+ jobs: SecurityJob[];
+}
+
+export const MlJobSelect: React.FC = ({
+ field,
+ shouldShowHelpText = true,
+ loading,
+ jobs,
+}) => {
+ const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+ const selectedJobIds = field.value;
+
+ const handleJobSelect = (selectedJobOptions: MlJobOption[]): void => {
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ const newlySelectedJobIds = selectedJobOptions.map((option) => option.value!.id);
+ field.setValue(newlySelectedJobIds);
+ };
+
+ const jobOptions = jobs.map((job) => ({
+ value: {
+ id: job.id,
+ description: job.description,
+ name: job.customSettings?.security_app_display_name,
+ },
+ // Make sure users can search for id or name.
+ // The label contains the name and id because EuiComboBox uses it for the textual search.
+ label: `${job.customSettings?.security_app_display_name} ${job.id}`,
+ }));
+
+ const selectedJobOptions = jobOptions
+ .filter((option) => selectedJobIds.includes(option.value.id))
+ // 'label' defines what is rendered inside the selected ComboBoxPill
+ .map((options) => ({ ...options, label: options.value.name ?? options.value.id }));
+
+ return (
+
+
+ }
+ isInvalid={isInvalid}
+ error={errorMessage}
+ data-test-subj="mlJobSelect"
+ >
+
+
+
+
+
+
+
+
+ );
+};
+
+const renderJobOption = (option: MlJobOption) => (
+
+);
+
+const JobDisplay: React.FC = ({ description, name, id }) => (
+
+
{name ?? id}
+
+
+ {description}
+
+
+