[Cloud Security]]CIS GCP Update for Dashboard and Flyout + Benchmark (#…

…162922)

## Summary

- Updated Dashboard and Flyout to accommodate the CIS GCP 
- Benchmark ticket will also be covered by this PR, as it only requires
change on the icon (Need to show GCP Icon on benchmark rules flyout),
last time I checked I can't find anything to be broken on Benchmark as
well from this change.
- Need to update the GCP Icon on the different repo(eui repo)
<img width="1413" alt="Screenshot 2023-08-01 at 11 47 15 AM"
src="https://github.com/elastic/kibana/assets/8703149/10510b9c-47a5-4155-b58c-c3c96d2b2add">
<img width="836" alt="Screenshot 2023-08-01 at 11 47 40 AM"
src="https://github.com/elastic/kibana/assets/8703149/e523f167-643a-4b8a-afb3-7ab399e0a863">
<img width="825" alt="Screenshot 2023-08-01 at 11 47 53 AM"
src="https://github.com/elastic/kibana/assets/8703149/0b6040e0-0848-4534-ad1e-d9f026c69cdf">
<img width="1401" alt="Screenshot 2023-08-01 at 11 51 24 AM"
src="https://github.com/elastic/kibana/assets/8703149/7305e28c-c92c-4d17-9c78-02d7cae70bfa">

x-pack/plugins/cloud_security_posture/common/constants.ts

@@ -84,6 +84,8 @@ export const CLOUDBEAT_AZURE = 'cloudbeat/cis_azure';
 export const CLOUDBEAT_VULN_MGMT_AWS = 'cloudbeat/vuln_mgmt_aws';
 export const CLOUDBEAT_VULN_MGMT_GCP = 'cloudbeat/vuln_mgmt_gcp';
 export const CLOUDBEAT_VULN_MGMT_AZURE = 'cloudbeat/vuln_mgmt_azure';
+export const CIS_AWS = 'cis_aws';
+export const CIS_GCP = 'cis_gcp';
 export const KSPM_POLICY_TEMPLATE = 'kspm';
 export const CSPM_POLICY_TEMPLATE = 'cspm';
 export const VULN_MGMT_POLICY_TEMPLATE = 'vuln_mgmt';

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

@@ -0,0 +1,64 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { CIS_AWS, CIS_GCP } from '../../common/constants';
+import { Cluster } from '../../common/types';
+import { CISBenchmarkIcon } from './cis_benchmark_icon';
+import { CompactFormattedNumber } from './compact_formatted_number';
+
+export const AccountsEvaluatedWidget = ({
+  clusters,
+  benchmarkAbbreviateAbove = 999,
+}: {
+  clusters: Cluster[];
+  /** numbers higher than the value of this field will be abbreviated using compact notation and have a tooltip displaying the full value */
+  benchmarkAbbreviateAbove?: number;
+}) => {
+  const filterClustersById = (benchmarkId: string) => {
+    return clusters?.filter((obj) => obj?.meta.benchmark.id === benchmarkId) || [];
+  };
+
+  const cisAwsClusterAmount = filterClustersById(CIS_AWS).length;
+  const cisGcpClusterAmount = filterClustersById(CIS_GCP).length;
+
+  const cisAwsBenchmarkName = filterClustersById(CIS_AWS)[0]?.meta.benchmark.name || '';
+  const cisGcpBenchmarkName = filterClustersById(CIS_GCP)[0]?.meta.benchmark.name || '';
+
+  return (
+    <>
+      <EuiFlexGroup gutterSize="s">
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup gutterSize="xs">
+            <EuiFlexItem>
+              <CISBenchmarkIcon type={CIS_AWS} name={cisAwsBenchmarkName} />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <CompactFormattedNumber
+                number={cisAwsClusterAmount}
+                abbreviateAbove={benchmarkAbbreviateAbove}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFlexGroup gutterSize="xs">
+            <EuiFlexItem grow={false}>
+              <CISBenchmarkIcon type={CIS_GCP} name={cisGcpBenchmarkName} />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <CompactFormattedNumber
+                number={cisGcpClusterAmount}
+                abbreviateAbove={benchmarkAbbreviateAbove}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+};

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

@@ -23,6 +23,8 @@ const getBenchmarkIdIconType = (props: Props): string => {
       return cisEksIcon;
     case 'cis_aws':
       return 'logoAWS';
+    case 'cis_gcp':
+      return 'logoGCP';
     case 'cis_k8s':
     default:
       return 'logoKubernetes';

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/dashboard_sections/summary_section.tsx

@@ -31,6 +31,7 @@ import {
   KSPM_POLICY_TEMPLATE,
   RULE_FAILED,
 } from '../../../../common/constants';
+import { AccountsEvaluatedWidget } from '../../../components/accounts_evaluated_widget';
 
 export const dashboardColumnsGrow: Record<string, EuiFlexItemProps['grow']> = {
   first: 3,
@@ -86,7 +87,12 @@ export const SummarySection = ({
                 'xpack.csp.dashboard.summarySection.counterCard.accountsEvaluatedDescription',
                 { defaultMessage: 'Accounts Evaluated' }
               ),
-        title: <CompactFormattedNumber number={complianceData.clusters.length} />,
+        title:
+          dashboardType === KSPM_POLICY_TEMPLATE ? (
+            <CompactFormattedNumber number={complianceData.clusters.length} />
+          ) : (
+            <AccountsEvaluatedWidget clusters={complianceData.clusters} />
+          ),
       },
       {
         id: DASHBOARD_COUNTER_CARDS.RESOURCES_EVALUATED,
@@ -116,7 +122,7 @@ export const SummarySection = ({
       },
     ],
     [
-      complianceData.clusters.length,
+      complianceData.clusters,
       complianceData.stats.resourcesEvaluated,
       complianceData.stats.totalFailed,
       dashboardType,