[Security Solution] Add reason field (#108449) (#108652)

Co-authored-by: Kibana Machine <[email protected]>

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx

@@ -265,7 +265,6 @@ const AlertSummaryViewComponent: React.FC<{
 
   return (
     <>
-      <EuiSpacer size="l" />
       <SummaryView summaryColumns={summaryColumns} summaryRows={summaryRows} title={title} />
       {maybeRule?.note && (
         <>

x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx

@@ -36,6 +36,7 @@ import {
   timelineDataToEnrichment,
 } from './cti_details/helpers';
 import { EnrichmentRangePicker } from './cti_details/enrichment_range_picker';
+import { Reason } from './reason';
 
 type EventViewTab = EuiTabbedContentTab;
 
@@ -137,6 +138,7 @@ const EventDetailsComponent: React.FC<Props> = ({
             name: i18n.OVERVIEW,
             content: (
               <>
+                <Reason eventId={id} data={data} />
                 <AlertSummaryView
                   {...{
                     data,

x-pack/plugins/security_solution/public/common/components/event_details/reason.tsx

@@ -0,0 +1,85 @@
+/*
+ * 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 { EuiTextColor, EuiFlexItem, EuiSpacer, EuiHorizontalRule, EuiTitle } from '@elastic/eui';
+import React, { useMemo } from 'react';
+
+import styled from 'styled-components';
+import { getRuleDetailsUrl, useFormatUrl } from '../link_to';
+import * as i18n from './translations';
+import { TimelineEventsDetailsItem } from '../../../../common';
+import { LinkAnchor } from '../links';
+import { useKibana } from '../../lib/kibana';
+import { APP_ID, SecurityPageName } from '../../../../common/constants';
+import { EVENT_DETAILS_PLACEHOLDER } from '../../../timelines/components/side_panel/event_details/translations';
+import { getFieldValue } from '../../../detections/components/host_isolation/helpers';
+
+interface Props {
+  data: TimelineEventsDetailsItem[];
+  eventId: string;
+}
+
+export const Indent = styled.div`
+  padding: 0 8px;
+  word-break: break-word;
+  line-height: 1.7em;
+`;
+
+export const ReasonComponent: React.FC<Props> = ({ eventId, data }) => {
+  const { navigateToApp } = useKibana().services.application;
+  const { formatUrl } = useFormatUrl(SecurityPageName.rules);
+
+  const reason = useMemo(
+    () => getFieldValue({ category: 'signal', field: 'signal.reason' }, data),
+    [data]
+  );
+
+  const ruleId = useMemo(
+    () => getFieldValue({ category: 'signal', field: 'signal.rule.id' }, data),
+    [data]
+  );
+
+  if (!eventId) {
+    return <EuiTextColor color="subdued">{EVENT_DETAILS_PLACEHOLDER}</EuiTextColor>;
+  }
+
+  return reason ? (
+    <EuiFlexItem grow={false}>
+      <EuiSpacer size="l" />
+      <EuiTitle size="xxxs">
+        <h5>{i18n.REASON}</h5>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+
+      <Indent>{reason}</Indent>
+
+      <EuiSpacer size="s" />
+
+      <Indent>
+        <LinkAnchor
+          data-test-subj="ruleName"
+          onClick={(ev: { preventDefault: () => void }) => {
+            ev.preventDefault();
+            navigateToApp(APP_ID, {
+              deepLinkId: SecurityPageName.rules,
+              path: getRuleDetailsUrl(ruleId),
+            });
+          }}
+          href={formatUrl(getRuleDetailsUrl(ruleId))}
+        >
+          {i18n.VIEW_RULE_DETAIL_PAGE}
+        </LinkAnchor>
+      </Indent>
+
+      <EuiHorizontalRule />
+    </EuiFlexItem>
+  ) : null;
+};
+
+ReasonComponent.displayName = 'ReasonComponent';
+
+export const Reason = React.memo(ReasonComponent);

x-pack/plugins/security_solution/public/common/components/event_details/translations.ts

@@ -101,3 +101,14 @@ export const MULTI_FIELD_BADGE = i18n.translate(
 export const ACTIONS = i18n.translate('xpack.securitySolution.eventDetails.table.actions', {
   defaultMessage: 'Actions',
 });
+
+export const REASON = i18n.translate('xpack.securitySolution.eventDetails.reason', {
+  defaultMessage: 'Reason',
+});
+
+export const VIEW_RULE_DETAIL_PAGE = i18n.translate(
+  'xpack.securitySolution.eventDetails.viewRuleDetailPage',
+  {
+    defaultMessage: 'View Rule detail page',
+  }
+);