[Security Solution][OneDiscover] Migrate host flyout to v2

src/platform/plugins/shared/discover/public/context_awareness/profile_providers/security/constants.ts

@@ -19,9 +19,14 @@ export const SIGNAL_RULE_NAME_FIELD_NAME = 'kibana.alert.rule.name';
 export const LEGACY_SIGNAL_RULE_NAME_FIELD_NAME = 'signal.rule.name';
 export const ALERT_WORKFLOW_STATUS_FIELD_NAME = 'kibana.alert.workflow_status';
 
+export const HOST_NAME_FIELD = 'host.name';
+export const HOST_HOSTNAME_FIELD = 'host.hostname';
+
 // Also see: x-pack/solutions/security/plugins/security_solution/public/one_discover/cell_renderers/cell_renderers.tsx
 export const ALLOWED_CELL_RENDER_FIELDS = [
   ALERT_WORKFLOW_STATUS_FIELD_NAME,
   SIGNAL_RULE_NAME_FIELD_NAME,
   LEGACY_SIGNAL_RULE_NAME_FIELD_NAME,
+  HOST_NAME_FIELD,
+  HOST_HOSTNAME_FIELD,
 ];

x-pack/solutions/security/plugins/security_solution/public/agent_builder/components/entity_card_flyout_overview_canvas.tsx

@@ -35,9 +35,9 @@ import {
   type RiskStats,
 } from '../../../common/search_strategy';
 import { useUiSetting, useKibana } from '../../common/lib/kibana';
-import { HostPanelContent } from '../../flyout/entity_details/host_right/content';
-import { HostPanelHeader } from '../../flyout/entity_details/host_right/header';
-import { useObservedHost } from '../../flyout/entity_details/host_right/hooks/use_observed_host';
+import { Content as HostPanelContent } from '../../flyout_v2/entity/host/main/content';
+import { Header as HostPanelHeader } from '../../flyout_v2/entity/host/main/header';
+import { useObservedHost } from '../../flyout_v2/entity/host/main/hooks/use_observed_host';
 import { EntityType } from '../../../common/entity_analytics/types';
 import {
   buildRiskScoreStateFromEntityRecord,
@@ -49,8 +49,9 @@ import {
   mergeLegacyIdentityWhenStoreEntityMissing,
   type IdentityFields,
 } from '../../flyout/document_details/shared/utils';
-import { HOST_PANEL_RISK_SCORE_QUERY_ID } from '../../flyout/entity_details/host_right/constants';
+import { HOST_PANEL_RISK_SCORE_QUERY_ID } from '../../flyout_v2/entity/host/main/constants';
 import { FlyoutBody } from '../../flyout/shared/components/flyout_body';
+import { FlyoutHeader } from '../../flyout/shared/components/flyout_header';
 import {
   useEntityPanelTabs,
   TABLE_TAB_ID,
@@ -464,19 +465,21 @@ const HostEntityFlyoutOverviewCanvas: React.FC<{
 
   return (
     <>
-      <HostPanelHeader
-        hostName={hostName}
-        lastSeen={observedHost.lastSeen}
-        entityId={panelDisplayEntityId}
-        identityFields={documentEntityIdentifiers}
-        isEntityInStore={!!observedHost.entityRecord}
-        riskLevel={
-          observedHost.entityRecord
-            ? ((getRiskFromEntityRecord(observedHost.entityRecord)?.calculated_level ??
-                'Unknown') as RiskSeverity)
-            : undefined
-        }
-      />
+      <FlyoutHeader>
+        <HostPanelHeader
+          hostName={hostName}
+          lastSeen={observedHost.lastSeen}
+          entityId={panelDisplayEntityId}
+          identityFields={documentEntityIdentifiers}
+          isEntityInStore={!!observedHost.entityRecord}
+          riskLevel={
+            observedHost.entityRecord
+              ? ((getRiskFromEntityRecord(observedHost.entityRecord)?.calculated_level ??
+                  'Unknown') as RiskSeverity)
+              : undefined
+          }
+        />
+      </FlyoutHeader>
       <FlyoutBody>
         {observedHost.entityRecord && (
           <EntitySummaryGrid

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

@@ -0,0 +1,80 @@
+/*
+ * 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 type { ParsedAlertsData } from '../../../../overview/components/detection_response/alerts_by_status/types';
+import { useMisconfigurationPreview } from '@kbn/cloud-security-posture/src/hooks/use_misconfiguration_preview';
+import { useVulnerabilitiesPreview } from '@kbn/cloud-security-posture/src/hooks/use_vulnerabilities_preview';
+
+const mockAlertsData: ParsedAlertsData = {
+  open: {
+    total: 3,
+    severities: [
+      { key: 'low', value: 2, label: 'Low' },
+      { key: 'medium', value: 1, label: 'Medium' },
+    ],
+  },
+  acknowledged: {
+    total: 2,
+    severities: [
+      { key: 'low', value: 1, label: 'Low' },
+      { key: 'high', value: 1, label: 'High' },
+    ],
+  },
+};
+
+jest.mock('@kbn/cloud-security-posture/src/hooks/use_misconfiguration_preview');
+jest.mock('@kbn/cloud-security-posture/src/hooks/use_vulnerabilities_preview');
+
+describe('AlertsPreview (v2)', () => {
+  const mockOpenDetailsPanel = jest.fn();
+
+  beforeEach(() => {
+    (useVulnerabilitiesPreview as jest.Mock).mockReturnValue({
+      data: { count: { CRITICAL: 0, HIGH: 1, MEDIUM: 1, LOW: 0, UNKNOWN: 0 } },
+    });
+    (useMisconfigurationPreview as jest.Mock).mockReturnValue({
+      data: { count: { passed: 1, failed: 1 } },
+    });
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders', () => {
+    const { getByTestId } = render(
+      <TestProviders>
+        <AlertsPreview alertsData={mockAlertsData} openDetailsPanel={mockOpenDetailsPanel} />
+      </TestProviders>
+    );
+
+    expect(getByTestId('securitySolutionFlyoutInsightsAlertsTitleLink')).toBeInTheDocument();
+  });
+
+  it('renders correct alerts number', () => {
+    const { getByTestId } = render(
+      <TestProviders>
+        <AlertsPreview alertsData={mockAlertsData} openDetailsPanel={mockOpenDetailsPanel} />
+      </TestProviders>
+    );
+
+    expect(getByTestId('securitySolutionFlyoutInsightsAlertsCount').textContent).toEqual('5');
+  });
+
+  it('should render the correct number of distribution bar section based on the number of severities', () => {
+    const { queryAllByTestId } = render(
+      <TestProviders>
+        <AlertsPreview alertsData={mockAlertsData} openDetailsPanel={mockOpenDetailsPanel} />
+      </TestProviders>
+    );
+
+    expect(queryAllByTestId('AlertsPreviewDistributionBarTestId__part').length).toEqual(3);
+  });
+});

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

@@ -0,0 +1,157 @@
+/*
+ * 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, { useCallback, useMemo } from 'react';
+import { css } from '@emotion/react';
+import { capitalize } from 'lodash';
+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 {
+  AlertsByStatus,
+  ParsedAlertsData,
+} from '../../../../overview/components/detection_response/alerts_by_status/types';
+import { ExpandablePanel } from '../../../../flyout_v2/shared/components/expandable_panel';
+import { getSeverityColor } from '../../../../detections/components/alerts_kpis/severity_level_panel/helpers';
+import type { EntityDetailsPath } from '../../../../flyout/entity_details/shared/components/left_panel/left_panel_header';
+import {
+  CspInsightLeftPanelSubTab,
+  EntityDetailsLeftPanelTab,
+} from '../../../../flyout/entity_details/shared/components/left_panel/left_panel_header';
+
+const AlertsCount = ({
+  alertsTotal,
+  euiTheme,
+}: {
+  alertsTotal: number;
+  euiTheme: EuiThemeComputed<{}>;
+}) => {
+  return (
+    <EuiFlexItem>
+      <EuiFlexGroup direction="column" gutterSize="none">
+        <EuiFlexItem>
+          <EuiTitle size="s">
+            <h3 data-test-subj={'securitySolutionFlyoutInsightsAlertsCount'}>
+              {getAbbreviatedNumber(alertsTotal)}
+            </h3>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText
+            size="xs"
+            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,
+  openDetailsPanel,
+}: {
+  alertsData: ParsedAlertsData;
+  openDetailsPanel: (path: EntityDetailsPath) => void;
+}) => {
+  const { euiTheme } = useEuiTheme();
+
+  const severityMap = new Map<string, number>();
+  const severityRank: Record<string, number> = {
+    critical: 4,
+    high: 3,
+    medium: 2,
+    low: 1,
+  };
+
+  (Object.keys(alertsData || {}) as AlertsByStatus[]).forEach((status) => {
+    if (alertsData?.[status]?.severities) {
+      alertsData?.[status]?.severities.forEach((severity) => {
+        const currentSeverity = severityMap.get(severity.key) || 0;
+        severityMap.set(severity.key, currentSeverity + severity.value);
+      });
+    }
+  });
+
+  const alertStats = Array.from(severityMap, ([key, count]: [string, number]) => ({
+    key: capitalize(key),
+    count,
+    color: getSeverityColor(key, euiTheme),
+    sort: severityRank[key.toLowerCase()] || 0,
+  })).sort((a, b) => b.sort - a.sort);
+
+  const totalAlertsCount = alertStats.reduce((total, item) => total + item.count, 0);
+
+  const goToEntityInsightTab = useCallback(
+    () =>
+      openDetailsPanel({
+        tab: EntityDetailsLeftPanelTab.CSP_INSIGHTS,
+        subTab: CspInsightLeftPanelSubTab.ALERTS,
+      }),
+    [openDetailsPanel]
+  );
+
+  const link = useMemo(
+    () => ({
+      callback: goToEntityInsightTab,
+      tooltip: (
+        <FormattedMessage
+          id="xpack.securitySolution.flyout.right.insights.alerts.alertsTooltip"
+          defaultMessage="Show all alerts"
+        />
+      ),
+    }),
+    [goToEntityInsightTab]
+  );
+  return (
+    <ExpandablePanel
+      header={{
+        iconType: '',
+        title: (
+          <EuiText
+            size="xs"
+            css={{
+              fontWeight: euiTheme.font.weight.bold,
+            }}
+          >
+            <FormattedMessage
+              id="xpack.securitySolution.flyout.right.insights.alerts.alertsTitle"
+              defaultMessage="Alerts"
+            />
+          </EuiText>
+        ),
+        link: totalAlertsCount > 0 ? link : undefined,
+      }}
+      data-test-subj={'securitySolutionFlyoutInsightsAlerts'}
+    >
+      <EuiFlexGroup gutterSize="none">
+        <AlertsCount alertsTotal={totalAlertsCount} euiTheme={euiTheme} />
+        <EuiFlexItem grow={2}>
+          <EuiFlexGroup direction="column" gutterSize="none">
+            <EuiFlexItem />
+            <EuiFlexItem>
+              <EuiSpacer />
+              <DistributionBar
+                stats={alertStats}
+                data-test-subj="AlertsPreviewDistributionBarTestId"
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </ExpandablePanel>
+  );
+};