[SECURITY] Rearrange rule name's column in Alert Table (#71020)

* Fix bug when you move columns rule name

* reference.url and event.url will be render as an anchor

* no need to fake index just return null

x-pack/plugins/security_solution/public/app/home/index.tsx

@@ -17,6 +17,7 @@ import { UseUrlState } from '../../common/components/url_state';
 import { useWithSource } from '../../common/containers/source';
 import { useShowTimeline } from '../../common/utils/timeline/use_show_timeline';
 import { navTabs } from './home_navigations';
+import { useSignalIndex } from '../../alerts/containers/detection_engine/alerts/use_signal_index';
 
 const WrappedByAutoSizer = styled.div`
   height: 100%;
@@ -55,9 +56,17 @@ export const HomePage: React.FC<HomePageProps> = ({ children }) => {
       }),
     [windowHeight]
   );
+  const { signalIndexExists, signalIndexName } = useSignalIndex();
+
+  const indexToAdd = useMemo<string[] | null>(() => {
+    if (signalIndexExists && signalIndexName != null) {
+      return [signalIndexName];
+    }
+    return null;
+  }, [signalIndexExists, signalIndexName]);
 
   const [showTimeline] = useShowTimeline();
-  const { browserFields, indexPattern, indicesExist } = useWithSource();
+  const { browserFields, indexPattern, indicesExist } = useWithSource('default', indexToAdd);
 
   return (
     <WrappedByAutoSizer data-test-subj="wrapped-by-auto-sizer" ref={measureRef}>

x-pack/plugins/security_solution/public/common/components/drag_and_drop/helpers.ts

@@ -182,6 +182,11 @@ export const addProviderToTimeline = ({
   }
 };
 
+const linkFields: Record<string, string> = {
+  'signal.rule.name': 'signal.rule.id',
+  'event.module': 'rule.reference',
+};
+
 export const addFieldToTimelineColumns = ({
   upsertColumn = timelineActions.upsertColumn,
   browserFields,
@@ -202,6 +207,7 @@ export const addFieldToTimelineColumns = ({
           description: isString(column.description) ? column.description : undefined,
           example: isString(column.example) ? column.example : undefined,
           id: fieldId,
+          linkField: linkFields[fieldId] ?? undefined,
           type: column.type,
           aggregatable: column.aggregatable,
           width: DEFAULT_COLUMN_MIN_WIDTH,

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/constants.tsx

@@ -10,4 +10,6 @@ export const IP_FIELD_TYPE = 'ip';
 export const MESSAGE_FIELD_NAME = 'message';
 export const EVENT_MODULE_FIELD_NAME = 'event.module';
 export const RULE_REFERENCE_FIELD_NAME = 'rule.reference';
+export const REFERENCE_URL_FIELD_NAME = 'reference.url';
+export const EVENT_URL_FIELD_NAME = 'event.url';
 export const SIGNAL_RULE_NAME_FIELD_NAME = 'signal.rule.name';

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx

@@ -29,8 +29,10 @@ import {
   EVENT_MODULE_FIELD_NAME,
   RULE_REFERENCE_FIELD_NAME,
   SIGNAL_RULE_NAME_FIELD_NAME,
+  REFERENCE_URL_FIELD_NAME,
+  EVENT_URL_FIELD_NAME,
 } from './constants';
-import { RenderRuleName, renderEventModule, renderRulReference } from './formatted_field_helpers';
+import { RenderRuleName, renderEventModule, renderUrl } from './formatted_field_helpers';
 
 // simple black-list to prevent dragging and dropping fields such as message name
 const columnNamesNotDraggable = [MESSAGE_FIELD_NAME];
@@ -107,8 +109,10 @@ const FormattedFieldValueComponent: React.FC<{
     );
   } else if (fieldName === EVENT_MODULE_FIELD_NAME) {
     return renderEventModule({ contextId, eventId, fieldName, linkValue, truncate, value });
-  } else if (fieldName === RULE_REFERENCE_FIELD_NAME) {
+  } else if (
-    return renderRulReference({ contextId, eventId, fieldName, linkValue, truncate, value });
+    [RULE_REFERENCE_FIELD_NAME, REFERENCE_URL_FIELD_NAME, EVENT_URL_FIELD_NAME].includes(fieldName)
+  ) {
+    return renderUrl({ contextId, eventId, fieldName, linkValue, truncate, value });
   } else if (columnNamesNotDraggable.includes(fieldName)) {
     return truncate && !isEmpty(value) ? (
       <TruncatableText data-test-subj="truncatable-message">

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_helpers.tsx

@@ -150,7 +150,7 @@ export const renderEventModule = ({
   );
 };
 
-export const renderRulReference = ({
+export const renderUrl = ({
   contextId,
   eventId,
   fieldName,
@@ -165,23 +165,23 @@ export const renderRulReference = ({
   truncate?: boolean;
   value: string | number | null | undefined;
 }) => {
-  const referenceUrlName = `${value}`;
+  const urlName = `${value}`;
 
   const content = truncate ? <TruncatableText>{value}</TruncatableText> : value;
 
-  return isString(value) && referenceUrlName.length > 0 ? (
+  return isString(value) && urlName.length > 0 ? (
     <DefaultDraggable
       field={fieldName}
-      id={`event-details-value-default-draggable-${contextId}-${eventId}-${fieldName}-${value}-${referenceUrlName}`}
+      id={`event-details-value-default-draggable-${contextId}-${eventId}-${fieldName}-${value}-${urlName}`}
       tooltipContent={value}
       value={value}
     >
-      {!isUrlInvalid(referenceUrlName) && (
+      {!isUrlInvalid(urlName) && (
-        <EuiLink target="_blank" href={referenceUrlName}>
+        <EuiLink target="_blank" href={urlName}>
           {content}
         </EuiLink>
       )}
-      {isUrlInvalid(referenceUrlName) && <>{content}</>}
+      {isUrlInvalid(urlName) && <>{content}</>}
     </DefaultDraggable>
   ) : (
     getEmptyTagValue()