[Cloud Security] Vulnerabilities Preview & Refactor CSP Plugin PHASE 2

.github/CODEOWNERS

@@ -1765,6 +1765,7 @@ x-pack/plugins/osquery @elastic/security-defend-workflows
 /x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/components/cloud_security_posture @elastic/fleet @elastic/kibana-cloud-security-posture
 /x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/hooks/setup_technology.* @elastic/fleet @elastic/kibana-cloud-security-posture
 /x-pack/plugins/security_solution/public/cloud_security_posture @elastic/kibana-cloud-security-posture
+/x-pack/test/security_solution_cypress/cypress/e2e/explore/hosts/vulnerabilities_contextual_flyout.cy.ts @elastic/kibana-cloud-security-posture
 
 # Security Solution onboarding tour
 /x-pack/plugins/security_solution/public/common/components/guided_onboarding @elastic/security-threat-hunting-explore

x-pack/packages/kbn-cloud-security-posture/src/hooks/use_vulnerabilities_preview.ts

@@ -0,0 +1,98 @@
+/*
+ * 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 { useQuery } from '@tanstack/react-query';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { lastValueFrom } from 'rxjs';
+import type { IKibanaSearchResponse, IKibanaSearchRequest } from '@kbn/search-types';
+import {
+  SearchRequest,
+  SearchResponse,
+  AggregationsMultiBucketAggregateBase,
+  AggregationsStringRareTermsBucketKeys,
+} from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
+import {
+  CDR_VULNERABILITIES_INDEX_PATTERN,
+  LATEST_VULNERABILITIES_RETENTION_POLICY,
+  MAX_FINDINGS_TO_LOAD,
+} from '@kbn/cloud-security-posture-common';
+import type { CspVulnerabilityFinding } from '@kbn/cloud-security-posture-common/schema/vulnerabilities/latest';
+import type { CoreStart } from '@kbn/core/public';
+import type { CspClientPluginStartDeps, UseMisconfigurationOptions } from '../../type';
+import { showErrorToast } from '../..';
+import {
+  getFindingsCountAggQueryVulnerabilities,
+  getVulnerabilitiesAggregationCount,
+} from '../utils/hooks_utils';
+
+type LatestFindingsRequest = IKibanaSearchRequest<SearchRequest>;
+type LatestFindingsResponse = IKibanaSearchResponse<
+  SearchResponse<CspVulnerabilityFinding, FindingsAggs>
+>;
+
+interface FindingsAggs {
+  count: AggregationsMultiBucketAggregateBase<AggregationsStringRareTermsBucketKeys>;
+}
+
+export const getVulnerabilitiesQuery = (
+  { query }: UseMisconfigurationOptions,
+  isPreview = false
+) => ({
+  index: CDR_VULNERABILITIES_INDEX_PATTERN,
+  size: MAX_FINDINGS_TO_LOAD,
+  aggs: getFindingsCountAggQueryVulnerabilities(),
+  query: {
+    ...query,
+    bool: {
+      ...query?.bool,
+      filter: [
+        ...(query?.bool?.filter ?? []),
+        {
+          range: {
+            '@timestamp': {
+              gte: `now-${LATEST_VULNERABILITIES_RETENTION_POLICY}`,
+              lte: 'now',
+            },
+          },
+        },
+      ],
+    },
+  },
+});
+
+export const useVulnerabilitiesPreview = (options: UseMisconfigurationOptions) => {
+  const {
+    data,
+    notifications: { toasts },
+  } = useKibana<CoreStart & CspClientPluginStartDeps>().services;
+  /**
+   * We're using useInfiniteQuery in this case to allow the user to fetch more data (if available and up to 10k)
+   * useInfiniteQuery differs from useQuery because it accumulates and caches a chunk of data from the previous fetches into an array
+   * it uses the getNextPageParam to know if there are more pages to load and retrieve the position of
+   * the last loaded record to be used as a from parameter to fetch the next chunk of data.
+   */
+  return useQuery(
+    ['csp_vulnerabilities_preview', { params: options }],
+    async ({ pageParam }) => {
+      const {
+        rawResponse: { aggregations },
+      } = await lastValueFrom(
+        data.search.search<LatestFindingsRequest, LatestFindingsResponse>({
+          params: getVulnerabilitiesQuery(options, pageParam),
+        })
+      );
+      return {
+        count: getVulnerabilitiesAggregationCount(aggregations?.count?.buckets),
+      };
+    },
+    {
+      staleTime: 5000,
+      keepPreviousData: true,
+      enabled: options.enabled,
+      onError: (err: Error) => showErrorToast(toasts, err),
+    }
+  );
+};

x-pack/packages/kbn-cloud-security-posture/src/utils/hooks_utils.ts

@@ -27,6 +27,14 @@ const RESULT_EVALUATION = {
   UNKNOWN: 'unknown',
 };
 
+const VULNERABILITIES_RESULT_EVALUATION = {
+  LOW: 'LOW',
+  MEDIUM: 'MEDIUM',
+  HIGH: 'HIGH',
+  CRITICAL: 'CRITICAL',
+  UNKNOWN: 'UNKNOWN',
+};
+
 export const getFindingsCountAggQueryMisconfiguration = () => ({
   count: {
     filters: {
@@ -39,6 +47,8 @@ export const getFindingsCountAggQueryMisconfiguration = () => ({
   },
 });
 
+// export type VulnSeverity = 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL' | 'UNKNOWN';
+
 export const getMisconfigurationAggregationCount = (
   buckets?: estypes.AggregationsBuckets<estypes.AggregationsStringRareTermsBucketKeys>
 ) => {
@@ -103,3 +113,53 @@ const buildMisconfigurationsFindingsQueryWithFilters = (
     },
   };
 };
+
+export const getVulnerabilitiesAggregationCount = (
+  buckets?: estypes.AggregationsBuckets<estypes.AggregationsStringRareTermsBucketKeys>
+) => {
+  const defaultBuckets: AggregationBuckets = {
+    [VULNERABILITIES_RESULT_EVALUATION.LOW]: { doc_count: 0 },
+    [VULNERABILITIES_RESULT_EVALUATION.MEDIUM]: { doc_count: 0 },
+    [VULNERABILITIES_RESULT_EVALUATION.HIGH]: { doc_count: 0 },
+    [VULNERABILITIES_RESULT_EVALUATION.CRITICAL]: { doc_count: 0 },
+    [VULNERABILITIES_RESULT_EVALUATION.UNKNOWN]: { doc_count: 0 },
+  };
+
+  // if buckets are undefined we will use default buckets
+  const usedBuckets = buckets || defaultBuckets;
+  return Object.entries(usedBuckets).reduce(
+    (evaluation, [key, value]) => {
+      evaluation[key] = (evaluation[key] || 0) + (value.doc_count || 0);
+      return evaluation;
+    },
+    {
+      [VULNERABILITIES_RESULT_EVALUATION.LOW]: 0,
+      [VULNERABILITIES_RESULT_EVALUATION.MEDIUM]: 0,
+      [VULNERABILITIES_RESULT_EVALUATION.HIGH]: 0,
+      [VULNERABILITIES_RESULT_EVALUATION.CRITICAL]: 0,
+      [VULNERABILITIES_RESULT_EVALUATION.UNKNOWN]: 0,
+    }
+  );
+};
+
+export const getFindingsCountAggQueryVulnerabilities = () => ({
+  count: {
+    filters: {
+      other_bucket_key: VULNERABILITIES_RESULT_EVALUATION.UNKNOWN,
+      filters: {
+        [VULNERABILITIES_RESULT_EVALUATION.LOW]: {
+          match: { 'vulnerability.severity': VULNERABILITIES_RESULT_EVALUATION.LOW },
+        },
+        [VULNERABILITIES_RESULT_EVALUATION.MEDIUM]: {
+          match: { 'vulnerability.severity': VULNERABILITIES_RESULT_EVALUATION.MEDIUM },
+        },
+        [VULNERABILITIES_RESULT_EVALUATION.HIGH]: {
+          match: { 'vulnerability.severity': VULNERABILITIES_RESULT_EVALUATION.HIGH },
+        },
+        [VULNERABILITIES_RESULT_EVALUATION.CRITICAL]: {
+          match: { 'vulnerability.severity': VULNERABILITIES_RESULT_EVALUATION.CRITICAL },
+        },
+      },
+    },
+  },
+});

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

@@ -12,6 +12,7 @@ import { css } from '@emotion/react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useCspSetupStatusApi } from '@kbn/cloud-security-posture/src/hooks/use_csp_setup_status_api';
 import { MisconfigurationsPreview } from './misconfiguration/misconfiguration_preview';
+import { VulnerabilitiesPreview } from './vulnerabilities/vulnerabilities_preview';
 
 export const EntityInsight = <T,>({
   name,
@@ -25,10 +26,26 @@ export const EntityInsight = <T,>({
   const { euiTheme } = useEuiTheme();
   const getSetupStatus = useCspSetupStatusApi();
   const hasMisconfigurationFindings = getSetupStatus.data?.hasMisconfigurationsFindings;
-
+  const hasVulnerabilitiesFindings = getSetupStatus.data?.hasVulnerabilitiesFindings;
+  const insightContent: React.ReactElement[] = [];
+  if (hasMisconfigurationFindings)
+    insightContent.push(
+      <>
+        <MisconfigurationsPreview name={name} fieldName={fieldName} isPreviewMode={isPreviewMode} />
+        <EuiSpacer size="m" />
+      </>
+    );
+  if (hasVulnerabilitiesFindings && fieldName === 'host.name')
+    insightContent.push(
+      <>
+        <VulnerabilitiesPreview hostName={name} />
+        <EuiSpacer size="m" />
+      </>
+    );
   return (
     <>
-      {hasMisconfigurationFindings && (
+      {(hasMisconfigurationFindings ||
+        (hasVulnerabilitiesFindings && fieldName === 'host.name')) && (
         <>
           <EuiAccordion
             initialIsOpen={true}
@@ -52,12 +69,7 @@ export const EntityInsight = <T,>({
             }
           >
             <EuiSpacer size="m" />
-            <MisconfigurationsPreview
-              name={name}
-              fieldName={fieldName}
-              isPreviewMode={isPreviewMode}
-            />
-            <EuiSpacer size="m" />
+            {insightContent}
           </EuiAccordion>
           <EuiHorizontalRule />
         </>

x-pack/plugins/security_solution/public/cloud_security_posture/components/misconfiguration/misconfiguration_preview.test.tsx

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-// Add stuff here
 import { TestProviders } from '../../../common/mock';
 import { render } from '@testing-library/react';
 import React from 'react';

x-pack/plugins/security_solution/public/cloud_security_posture/components/vulnerabilities/vulnerabilities_preview.test.tsx

@@ -0,0 +1,27 @@
+/*
+ * 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 { TestProviders } from '../../../common/mock';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { VulnerabilitiesPreview } from './vulnerabilities_preview';
+
+const mockProps: { hostName: string } = {
+  hostName: 'testContextID',
+};
+
+describe('VulnerabilitiesPreview', () => {
+  it('renders', () => {
+    const { queryByTestId } = render(<VulnerabilitiesPreview {...mockProps} />, {
+      wrapper: TestProviders,
+    });
+    expect(
+      queryByTestId('securitySolutionFlyoutInsightsVulnerabilitiesContent')
+    ).toBeInTheDocument();
+    expect(queryByTestId('noVulnerabilitiesDataTestSubj')).toBeInTheDocument();
+  });
+});