[Cloud Security] Alerts Preview Contextual Flyout

x-pack/packages/kbn-cloud-security-posture/common/utils/helpers.ts

@@ -62,3 +62,43 @@ export const buildEntityFlyoutPreviewQuery = (field: string, queryValue?: string
     },
   };
 };
+
+export const buildEntityAlertsQuery = (field: string, queryValue?: string, size?: number) => {
+  return {
+    size: size || 0,
+    _source: false,
+    fields: [
+      'kibana.alert.rule.uuid',
+      'signal.rule.name',
+      'signal.rule.severity',
+      'kibana.alert.reason',
+    ],
+    query: {
+      bool: {
+        filter: [
+          {
+            bool: {
+              must: [],
+              filter: [
+                {
+                  match_phrase: {
+                    [field]: {
+                      query: queryValue,
+                    },
+                  },
+                },
+              ],
+              should: [],
+              must_not: [],
+            },
+          },
+          {
+            terms: {
+              'kibana.alert.workflow_status': ['open', 'acknowledged'],
+            },
+          },
+        ],
+      },
+    },
+  };
+};

x-pack/plugins/security_solution/public/cloud_security_posture/components/alerts/alerts_preview.test.tsx

@@ -0,0 +1,75 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import { AlertsPreview } from './alerts_preview';
+import { TestProviders } from '../../../common/mock/test_providers';
+import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
+import type { AlertSearchResponse } from '../../../detections/containers/detection_engine/alerts/types';
+
+const mockAlertsData: AlertSearchResponse<unknown, unknown> = {
+  took: 0,
+  timeout: false,
+  _shards: {
+    total: 1,
+    successful: 1,
+    skipped: 0,
+    failed: 0,
+  },
+  hits: {
+    total: {
+      value: 2,
+      relation: 'eq',
+    },
+    max_score: 0,
+    hits: [
+      {
+        fields: {
+          'signal.rule.name': ['Low Alert'],
+          'kibana.alert.reason': ['Low Alert Reason'],
+          'kibana.alert.rule.uuid': ['Low Alert UUID'],
+          'signal.rule.severity': ['low'],
+        },
+      },
+      {
+        fields: {
+          'signal.rule.name': ['Medium Alert'],
+          'kibana.alert.reason': ['Medium Alert Reason'],
+          'kibana.alert.rule.uuid': ['Medium Alert UUID'],
+          'signal.rule.severity': ['medium'],
+        },
+      },
+    ],
+  },
+};
+
+jest.mock(
+  '../../../detections/components/alerts_kpis/alerts_summary_charts_panel/use_summary_chart_data'
+);
+jest.mock('@kbn/expandable-flyout');
+
+describe('AlertsPreview', () => {
+  const mockOpenLeftPanel = jest.fn();
+
+  beforeEach(() => {
+    (useExpandableFlyoutApi as jest.Mock).mockReturnValue({ openLeftPanel: mockOpenLeftPanel });
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders', () => {
+    const { getByTestId } = render(
+      <TestProviders>
+        <AlertsPreview alertsData={mockAlertsData} alertsCount={1} />
+      </TestProviders>
+    );
+
+    expect(getByTestId('securitySolutionFlyoutInsightsAlertsTitleText')).toBeInTheDocument();
+  });
+});

x-pack/plugins/security_solution/public/cloud_security_posture/components/alerts/alerts_preview.tsx

@@ -0,0 +1,125 @@
+/*
+ * 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/react';
+import type { EuiThemeComputed } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiTitle, useEuiTheme } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { DistributionBar } from '@kbn/security-solution-distribution-bar';
+import { getAbbreviatedNumber } from '@kbn/cloud-security-posture-common';
+import type { AlertSearchResponse } from '../../../detections/containers/detection_engine/alerts/types';
+import { ExpandablePanel } from '../../../flyout/shared/components/expandable_panel';
+import { getSeverityColor } from '../../../detections/components/alerts_kpis/severity_level_panel/helpers';
+
+interface CspAlertsField {
+  'kibana.alert.rule.uuid': string[];
+  'kibana.alert.reason': string[];
+  'signal.rule.name': string[];
+  'signal.rule.severity': string[];
+}
+
+interface AlertsDetailsFields {
+  fields: CspAlertsField;
+}
+
+const AlertsCount = ({
+  alertsTotal,
+  euiTheme,
+}: {
+  alertsTotal: string | number;
+  euiTheme: EuiThemeComputed<{}>;
+}) => {
+  return (
+    <EuiFlexItem>
+      <EuiFlexGroup direction="column" gutterSize="none">
+        <EuiFlexItem>
+          <EuiTitle size="s">
+            <h1>{alertsTotal}</h1>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText
+            size="m"
+            css={css`
+              font-weight: ${euiTheme.font.weight.semiBold};
+            `}
+          >
+            <FormattedMessage
+              id="xpack.securitySolution.flyout.right.insights.alerts.alertsCountDescription"
+              defaultMessage="Alerts"
+            />
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  );
+};
+
+export const AlertsPreview = ({
+  alertsData,
+  alertsCount,
+  isPreviewMode,
+}: {
+  alertsData: AlertSearchResponse<unknown, unknown> | null;
+  alertsCount: number;
+  isPreviewMode?: boolean;
+}) => {
+  const { euiTheme } = useEuiTheme();
+
+  const resultX = (alertsData?.hits?.hits as AlertsDetailsFields[])?.map(
+    (item: AlertsDetailsFields) => {
+      return { fields: item.fields };
+    }
+  );
+
+  const severities = resultX?.map((item) => item.fields['signal.rule.severity'][0]) || [];
+  const alertStats = Object.entries(
+    severities.reduce((acc: Record<string, number>, item) => {
+      acc[item] = (acc[item] || 0) + 1;
+      return acc;
+    }, {})
+  ).map(([key, count]) => ({
+    key,
+    count,
+    color: getSeverityColor(key),
+  }));
+
+  return (
+    <ExpandablePanel
+      header={{
+        title: (
+          <EuiText
+            size="xs"
+            css={css`
+              font-weight: ${euiTheme.font.weight.semiBold};
+            `}
+          >
+            <FormattedMessage
+              id="xpack.securitySolution.flyout.right.insights.alerts.alertsTitle"
+              defaultMessage="Alerts"
+            />
+          </EuiText>
+        ),
+      }}
+      data-test-subj={'securitySolutionFlyoutInsightsAlerts'}
+    >
+      <EuiFlexGroup gutterSize="none">
+        <AlertsCount alertsTotal={getAbbreviatedNumber(alertsCount)} euiTheme={euiTheme} />
+        <EuiFlexItem grow={2}>
+          <EuiFlexGroup direction="column" gutterSize="none">
+            <EuiFlexItem />
+            <EuiFlexItem>
+              <EuiSpacer />
+              <DistributionBar stats={alertStats.reverse()} />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </ExpandablePanel>
+  );
+};

x-pack/plugins/security_solution/public/cloud_security_posture/components/entity_insight.tsx

@@ -14,8 +14,13 @@ import { useMisconfigurationPreview } from '@kbn/cloud-security-posture/src/hook
 import { buildEntityFlyoutPreviewQuery } from '@kbn/cloud-security-posture-common';
 import { useVulnerabilitiesPreview } from '@kbn/cloud-security-posture/src/hooks/use_vulnerabilities_preview';
 import { hasVulnerabilitiesData } from '@kbn/cloud-security-posture';
+import { buildEntityAlertsQuery } from '@kbn/cloud-security-posture-common/utils/helpers';
 import { MisconfigurationsPreview } from './misconfiguration/misconfiguration_preview';
 import { VulnerabilitiesPreview } from './vulnerabilities/vulnerabilities_preview';
+import { AlertsPreview } from './alerts/alerts_preview';
+import { useSignalIndex } from '../../detections/containers/detection_engine/alerts/use_signal_index';
+import { ALERTS_QUERY_NAMES } from '../../detections/containers/detection_engine/alerts/constants';
+import { useQueryAlerts } from '../../detections/containers/detection_engine/alerts/use_query';
 
 export const EntityInsight = <T,>({
   name,
@@ -60,6 +65,28 @@ export const EntityInsight = <T,>({
 
   const isVulnerabilitiesFindingForHost = hasVulnerabilitiesFindings && fieldName === 'host.name';
 
+  const { signalIndexName } = useSignalIndex();
+
+  const { data: alertsData } = useQueryAlerts({
+    query: buildEntityAlertsQuery(fieldName, name, 500),
+    queryName: ALERTS_QUERY_NAMES.ALERTS_COUNT_BY_STATUS,
+    indexName: signalIndexName,
+  });
+
+  const alertsCount = alertsData?.hits?.total.value || 0;
+  if (alertsCount > 0) {
+    insightContent.push(
+      <>
+        <AlertsPreview
+          alertsData={alertsData}
+          alertsCount={alertsCount}
+          isPreviewMode={isPreviewMode}
+        />
+        <EuiSpacer size="s" />
+      </>
+    );
+  }
+
   if (hasMisconfigurationFindings)
     insightContent.push(
       <>
@@ -76,7 +103,8 @@ export const EntityInsight = <T,>({
     );
   return (
     <>
-      {(hasMisconfigurationFindings ||
+      {(insightContent.length > 0 ||
+        hasMisconfigurationFindings ||
         (isVulnerabilitiesFindingForHost && hasVulnerabilitiesFindings)) && (
         <>
           <EuiAccordion