[7.3] [SIEM] Fix draggables to work with escapeId for the ML severity column (#41621)

x-pack/legacy/plugins/siem/public/components/load_more_table/index.tsx

@@ -110,7 +110,7 @@ export interface Columns<T, U = T> {
   sortable?: boolean | Func<T>;
   truncateText?: boolean;
   hideForMobile?: boolean;
-  render?: (item: T, node: U) => void;
+  render?: (item: T, node: U) => React.ReactNode;
   width?: string;
 }
 

x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.test.tsx

@@ -7,6 +7,11 @@
 import { getAnomaliesHostTableColumnsCurated } from './get_anomalies_host_table_columns';
 import { HostsType } from '../../../store/hosts/model';
 import * as i18n from './translations';
+import { AnomaliesByHost } from '../types';
+import { Columns } from '../../load_more_table';
+import { TestProviders } from '../../../mock';
+import { mount } from 'enzyme';
+import React from 'react';
 
 const startDate = new Date(2001).valueOf();
 const endDate = new Date(3000).valueOf();
@@ -58,4 +63,62 @@ describe('get_anomalies_host_table_columns', () => {
     );
     expect(columns.some(col => col.name === i18n.HOST_NAME)).toEqual(false);
   });
+
+  test('on host page, we should escape the draggable id', () => {
+    const columns = getAnomaliesHostTableColumnsCurated(
+      HostsType.page,
+      startDate,
+      endDate,
+      interval,
+      narrowDateRange
+    );
+    const column = columns.find(col => col.name === i18n.SCORE) as Columns<string, AnomaliesByHost>;
+    const anomaly: AnomaliesByHost = {
+      hostName: 'host.name',
+      anomaly: {
+        detectorIndex: 0,
+        entityName: 'entity-name-1',
+        entityValue: 'entity-value-1',
+        influencers: [],
+        jobId: 'job-1',
+        rowId: 'row-1',
+        severity: 100,
+        time: new Date('01/01/2000').valueOf(),
+        source: {
+          job_id: 'job-1',
+          result_type: 'result-1',
+          probability: 50,
+          multi_bucket_impact: 0,
+          record_score: 0,
+          initial_record_score: 0,
+          bucket_span: 0,
+          detector_index: 0,
+          is_interim: true,
+          timestamp: new Date('01/01/2000').valueOf(),
+          by_field_name: 'some field name',
+          by_field_value: 'some field valuke',
+          partition_field_name: 'partition field name',
+          partition_field_value: 'partition field value',
+          function: 'function-1',
+          function_description: 'description-1',
+          typical: [5, 3],
+          actual: [7, 4],
+          influencers: [],
+        },
+      },
+    };
+    if (column != null && column.render != null) {
+      const wrapper = mount(<TestProviders>{column.render('', anomaly)}</TestProviders>);
+      expect(
+        wrapper
+          .find(
+            '[draggableId="draggableId.content.anomalies-host-table-severity-host_name-entity-name-1-entity-value-1-100-job-1"]'
+          )
+          .first()
+          .exists()
+      ).toBe(true);
+    } else {
+      expect(column).not.toBe(null);
+    }
+  });
 });

x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.tsx

@@ -21,6 +21,7 @@ import { createExplorerLink } from '../links/create_explorer_link';
 import { LocalizedDateTooltip } from '../../localized_date_tooltip';
 import { PreferenceFormattedDate } from '../../formatted_date';
 import { HostsType } from '../../../store/hosts/model';
+import { escapeDataProviderId } from '../../drag_and_drop/helpers';
 
 export const getAnomaliesHostTableColumns = (
   startDate: number,
@@ -68,7 +69,9 @@ export const getAnomaliesHostTableColumns = (
     sortable: true,
     render: (_, anomaliesByHost) => (
       <DraggableScore
-        id={`anomalies-host-table-severity-${createCompoundHostKey(anomaliesByHost)}`}
+        id={escapeDataProviderId(
+          `anomalies-host-table-severity-${createCompoundHostKey(anomaliesByHost)}`
+        )}
         score={anomaliesByHost.anomaly}
       />
     ),

x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.test.tsx

@@ -7,6 +7,11 @@
 import { getAnomaliesNetworkTableColumnsCurated } from './get_anomalies_network_table_columns';
 import { NetworkType } from '../../../store/network/model';
 import * as i18n from './translations';
+import { AnomaliesByNetwork } from '../types';
+import { Columns } from '../../load_more_table';
+import { mount } from 'enzyme';
+import React from 'react';
+import { TestProviders } from '../../../mock';
 
 const startDate = new Date(2001).valueOf();
 const endDate = new Date(3000).valueOf();
@@ -58,4 +63,66 @@ describe('get_anomalies_network_table_columns', () => {
     );
     expect(columns.some(col => col.name === i18n.NETWORK_NAME)).toEqual(false);
   });
+
+  test('on network page, we should escape the draggable id', () => {
+    const columns = getAnomaliesNetworkTableColumnsCurated(
+      NetworkType.page,
+      startDate,
+      endDate,
+      interval,
+      narrowDateRange
+    );
+    const column = columns.find(col => col.name === i18n.SCORE) as Columns<
+      string,
+      AnomaliesByNetwork
+    >;
+    const anomaly: AnomaliesByNetwork = {
+      type: 'source.ip',
+      ip: '127.0.0.1',
+      anomaly: {
+        detectorIndex: 0,
+        entityName: 'entity-name-1',
+        entityValue: 'entity-value-1',
+        influencers: [],
+        jobId: 'job-1',
+        rowId: 'row-1',
+        severity: 100,
+        time: new Date('01/01/2000').valueOf(),
+        source: {
+          job_id: 'job-1',
+          result_type: 'result-1',
+          probability: 50,
+          multi_bucket_impact: 0,
+          record_score: 0,
+          initial_record_score: 0,
+          bucket_span: 0,
+          detector_index: 0,
+          is_interim: true,
+          timestamp: new Date('01/01/2000').valueOf(),
+          by_field_name: 'some field name',
+          by_field_value: 'some field valuke',
+          partition_field_name: 'partition field name',
+          partition_field_value: 'partition field value',
+          function: 'function-1',
+          function_description: 'description-1',
+          typical: [5, 3],
+          actual: [7, 4],
+          influencers: [],
+        },
+      },
+    };
+    if (column != null && column.render != null) {
+      const wrapper = mount(<TestProviders>{column.render('', anomaly)}</TestProviders>);
+      expect(
+        wrapper
+          .find(
+            '[draggableId="draggableId.content.anomalies-network-table-severity-127_0_0_1-entity-name-1-entity-value-1-100-job-1"]'
+          )
+          .first()
+          .exists()
+      ).toBe(true);
+    } else {
+      expect(column).not.toBe(null);
+    }
+  });
 });

x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.tsx

@@ -21,6 +21,7 @@ import { createExplorerLink } from '../links/create_explorer_link';
 import { LocalizedDateTooltip } from '../../localized_date_tooltip';
 import { PreferenceFormattedDate } from '../../formatted_date';
 import { NetworkType } from '../../../store/network/model';
+import { escapeDataProviderId } from '../../drag_and_drop/helpers';
 
 export const getAnomaliesNetworkTableColumns = (
   startDate: number,
@@ -66,7 +67,9 @@ export const getAnomaliesNetworkTableColumns = (
     sortable: true,
     render: (_, anomaliesByNetwork) => (
       <DraggableScore
-        id={`anomalies-network-table-severity-${createCompoundNetworkKey(anomaliesByNetwork)}`}
+        id={escapeDataProviderId(
+          `anomalies-network-table-severity-${createCompoundNetworkKey(anomaliesByNetwork)}`
+        )}
         score={anomaliesByNetwork.anomaly}
       />
     ),