[Cloud Security] [Vulnerabilities] Custom renderers for Group by Reso…

…urce, Cloud account and CVE (#174950)

## Summary

It closes #169052, #169048 and
[#172197](#172197)

This PR adds the following changes to the Findings -> Vulnerabilities
page:

- Added Severity mapping component to all Vulnerabilities grouping
- Added Cloud account grouping to the Vulnerabilities default groups
(groups by `cloud.account.name`)
- Added CVE grouping to the Vulnerabilities default groups (groups by
`vulnerability.id`)

It also introduced the following changes:

- Added utility to retrieve cloud providers names from a cloud provider
abbreviation (aws, azure, gcp)
- Added component to retrieve cloud provider icons from a cloud provider
abbreviation (aws, azure, gcp)
- Fixed Benchmarks page was displaying `Google Cloud Provider` for GCP
instead of `Google Cloud Platform`.
- Added / Updated FTR tests for vulnerability grouping

## Screenshots


![image](https://github.com/elastic/kibana/assets/19270322/cb79fc81-1b0d-4ce2-a456-af270390b1c9)


<img width="1498" alt="image"
src="https://github.com/elastic/kibana/assets/19270322/245d6c06-67bd-429b-963f-ddc67cca5af4">


<img width="1509" alt="image"
src="https://github.com/elastic/kibana/assets/19270322/028be6e4-3543-4fd8-8bee-f23535aec7b8">

<img width="1501" alt="image"
src="https://github.com/elastic/kibana/assets/19270322/c691f8b8-fca5-4d65-a182-ca26448a7ede">

<img width="1502" alt="image"
src="https://github.com/elastic/kibana/assets/19270322/caa4fe29-a542-4e33-b609-be50d29f6e37">



## Recording



https://github.com/elastic/kibana/assets/19270322/2e8d2c9d-2e3c-459c-a9e5-29f046b9ed9e

x-pack/plugins/cloud_security_posture/common/utils/helpers.ts

@@ -190,18 +190,37 @@ export const getBenchmarkCisName = (benchmarkId: BenchmarksCisId) => {
   }
 };
 
+const CLOUD_PROVIDER_NAMES = {
+  AWS: 'Amazon Web Services',
+  AZURE: 'Microsoft Azure',
+  GCP: 'Google Cloud Platform',
+};
+
 export const getBenchmarkApplicableTo = (benchmarkId: BenchmarksCisId) => {
   switch (benchmarkId) {
     case 'cis_k8s':
       return 'Kubernetes';
     case 'cis_azure':
-      return 'Microsoft Azure';
+      return CLOUD_PROVIDER_NAMES.AZURE;
     case 'cis_aws':
-      return 'Amazon Web Services';
+      return CLOUD_PROVIDER_NAMES.AWS;
     case 'cis_eks':
       return 'Amazon Elastic Kubernetes Service';
     case 'cis_gcp':
-      return 'Google Cloud Provider';
+      return CLOUD_PROVIDER_NAMES.GCP;
+  }
+};
+
+export const getCloudProviderNameFromAbbreviation = (cloudProvider: string) => {
+  switch (cloudProvider) {
+    case 'azure':
+      return CLOUD_PROVIDER_NAMES.AZURE;
+    case 'aws':
+      return CLOUD_PROVIDER_NAMES.AWS;
+    case 'gcp':
+      return CLOUD_PROVIDER_NAMES.GCP;
+    default:
+      return cloudProvider;
   }
 };
 

x-pack/plugins/cloud_security_posture/public/components/cloud_provider_icon.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { EuiIcon, EuiToolTip, IconSize } from '@elastic/eui';
+import { CSSInterpolation } from '@emotion/serialize';
+import { getCloudProviderNameFromAbbreviation } from '../../common/utils/helpers';
+import googleCloudLogo from '../assets/icons/google_cloud_logo.svg';
+
+interface Props {
+  cloudProvider: string;
+  style?: CSSInterpolation;
+  size?: IconSize;
+}
+
+const getCloudProviderIcon = (cloudProvider: string) => {
+  switch (cloudProvider) {
+    case 'azure':
+      return 'logoAzure';
+    case 'aws':
+      return 'logoAWS';
+    case 'gcp':
+      return googleCloudLogo;
+    default:
+      return undefined;
+  }
+};
+
+export const CloudProviderIcon = ({ cloudProvider, size, style }: Props) => {
+  const iconType = getCloudProviderIcon(cloudProvider);
+
+  if (!iconType) {
+    return null;
+  }
+
+  const name = getCloudProviderNameFromAbbreviation(cloudProvider);
+
+  return (
+    <EuiToolTip content={name}>
+      <EuiIcon type={iconType} size={size || 'xl'} css={style} />
+    </EuiToolTip>
+  );
+};

x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_by_resource/severity_map.tsx → x-pack/plugins/cloud_security_posture/public/components/vulnerability_severity_map.tsx

@@ -16,9 +16,9 @@ import {
 } from '@elastic/eui';
 import { PaletteColorStop } from '@elastic/eui/src/components/color_picker/color_palette_picker';
 import { i18n } from '@kbn/i18n';
-import { getSeverityStatusColor } from '../../../common/utils/get_vulnerability_colors';
-import { VulnSeverity } from '../../../../common/types_old';
-import { SeverityStatusBadge } from '../../../components/vulnerability_badges';
+import { getSeverityStatusColor } from '../common/utils/get_vulnerability_colors';
+import { VulnSeverity } from '../../common/types_old';
+import { SeverityStatusBadge } from './vulnerability_badges';
 
 interface Props {
   total: number;
@@ -50,7 +50,7 @@ const formatPercentage = (percentage: number) => {
   return `${percentage.toFixed(1)}%`;
 };
 
-export const SeverityMap = ({ severityMap, total }: Props) => {
+export const VulnerabilitySeverityMap = ({ severityMap, total }: Props) => {
   const { euiTheme } = useEuiTheme();
 
   const severityMapPallet: PaletteColorStop[] = [];
@@ -87,10 +87,7 @@ export const SeverityMap = ({ severityMap, total }: Props) => {
         width: 256px;
       `}
       anchorClassName={css`
-        height: ${euiTheme.size.xl};
-        flex-grow: 1;
-        display: flex;
-        align-items: center;
+        margin-left: ${euiTheme.size.xs};
       `}
       position="left"
       title={i18n.translate('xpack.csp.vulnerabilitiesByResource.severityMap.tooltipTitle', {
@@ -102,7 +99,8 @@ export const SeverityMap = ({ severityMap, total }: Props) => {
         type="fixed"
         palette={severityMapPallet}
         className={css`
-          width: 100%;
+          width: 80px;
+          height: 6px;
         `}
       />
     </EuiToolTip>

x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/constants.ts

@@ -19,17 +19,30 @@ export const VULNERABILITY_FIELDS = {
   PACKAGE_NAME: 'package.name',
   PACKAGE_VERSION: 'package.version',
   PACKAGE_FIXED_VERSION: 'package.fixed_version',
+  CLOUD_ACCOUNT_NAME: 'cloud.account.name',
+  CLOUD_PROVIDER: 'cloud.provider',
+  DESCRIPTION: 'vulnerability.description',
 } as const;
 
 export const GROUPING_OPTIONS = {
   RESOURCE_NAME: VULNERABILITY_FIELDS.RESOURCE_NAME,
+  CLOUD_ACCOUNT_NAME: VULNERABILITY_FIELDS.CLOUD_ACCOUNT_NAME,
+  CVE: VULNERABILITY_FIELDS.VULNERABILITY_ID,
 };
 
 export const defaultGroupingOptions: GroupOption[] = [
   {
     label: GROUPING_LABELS.RESOURCE_NAME,
     key: GROUPING_OPTIONS.RESOURCE_NAME,
   },
+  {
+    label: GROUPING_LABELS.CLOUD_ACCOUNT_NAME,
+    key: GROUPING_OPTIONS.CLOUD_ACCOUNT_NAME,
+  },
+  {
+    label: 'CVE',
+    key: GROUPING_OPTIONS.CVE,
+  },
 ];
 
 export const getDefaultQuery = ({

x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_grouped_vulnerabilities.tsx

@@ -34,6 +34,21 @@ export interface VulnerabilitiesGroupingAggregation {
     buckets?: GenericBuckets[];
   };
   isLoading?: boolean;
+  critical?: {
+    doc_count?: NumberOrNull;
+  };
+  high?: {
+    doc_count?: NumberOrNull;
+  };
+  medium?: {
+    doc_count?: NumberOrNull;
+  };
+  low?: {
+    doc_count?: NumberOrNull;
+  };
+  cloudProvider?: {
+    buckets?: GenericBuckets[];
+  };
 }
 
 export type VulnerabilitiesRootGroupingAggregation =