[Cloud Posture] add icon for EKS (elastic#137100) (elastic#138133)

(cherry picked from commit fb3e718)

Co-authored-by: Or Ouziel <[email protected]>

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

@@ -34,6 +34,7 @@ export interface Cluster {
   meta: {
     clusterId: string;
     benchmarkName: string;
+    benchmarkId: BenchmarkId;
     lastUpdate: number; // unix epoch time
   };
   stats: Stats;

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

@@ -0,0 +1,30 @@
+/*
+ * 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 } from '@elastic/eui';
+import type { BenchmarkId } from '../../common/types';
+import cisK8sVanillaIcon from '../assets/icons/k8s_logo.svg';
+import cisEksIcon from '../assets/icons/cis_eks_logo.svg';
+
+interface Props {
+  type: BenchmarkId;
+}
+
+const getBenchmarkIdIconType = (props: Props): string => {
+  switch (props.type) {
+    case 'cis_eks':
+      return cisEksIcon;
+    case 'cis_k8s':
+    default:
+      return cisK8sVanillaIcon;
+  }
+};
+
+export const CISBenchmarkIcon = (props: Props) => (
+  <EuiIcon type={getBenchmarkIdIconType(props)} size="xxl" />
+);

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

@@ -20,6 +20,7 @@ import moment from 'moment';
 import { PartitionElementEvent } from '@elastic/charts';
 import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
 import { i18n } from '@kbn/i18n';
+import { CISBenchmarkIcon } from '../../../components/cis_benchmark_icon';
 import { CloudPostureScoreChart } from '../compliance_charts/cloud_posture_score_chart';
 import { ChartPanel } from '../../../components/chart_panel';
 import type { ComplianceDashboardData, Evaluation } from '../../../../common/types';
@@ -61,7 +62,6 @@ export const BenchmarksSection = ({
     <>
       {complianceData.clusters.map((cluster) => {
         const shortId = cluster.meta.clusterId.slice(0, 6);
-
         return (
           <React.Fragment key={cluster.meta.clusterId}>
             <EuiPanel hasBorder hasShadow={false} paddingSize="none">
@@ -82,8 +82,7 @@ export const BenchmarksSection = ({
                       </EuiText>
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>
-                      {/* TODO: change default k8s logo to use a getBenchmarkLogo function */}
-                      <EuiIcon type="logoKubernetes" size="xxl" />
+                      <CISBenchmarkIcon type={cluster.meta.benchmarkId} />
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>
                       {INTERNAL_FEATURE_FLAGS.showManageRulesMock && (

x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/findings_flyout.tsx

@@ -30,7 +30,8 @@ import { ResourceTab } from './resource_tab';
 import { JsonTab } from './json_tab';
 import { OverviewTab } from './overview_tab';
 import { RuleTab } from './rule_tab';
-import k8sLogoIcon from '../../../assets/icons/k8s_logo.svg';
+import type { BenchmarkId } from '../../../../common/types';
+import { CISBenchmarkIcon } from '../../../components/cis_benchmark_icon';
 
 const tabs = [
   {
@@ -74,13 +75,13 @@ export const Markdown: React.FC<PropsOf<typeof EuiMarkdownFormat>> = (props) =>
   <EuiMarkdownFormat textSize="s" {...props} />
 );
 
-export const CisKubernetesIcons = () => (
+export const CisKubernetesIcons = ({ benchmarkId }: { benchmarkId: BenchmarkId }) => (
   <EuiFlexGroup gutterSize="s">
     <EuiFlexItem grow={false}>
       <EuiIcon type={cisLogoIcon} size="xxl" />
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
-      <EuiIcon type={k8sLogoIcon} size="xxl" />
+      <CISBenchmarkIcon type={benchmarkId} />
     </EuiFlexItem>
   </EuiFlexGroup>
 );

x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/overview_tab.tsx

@@ -49,7 +49,7 @@ const getDetailsList = (data: CspFinding, discoverIndexLink: string | undefined)
     title: i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.frameworkSourcesTitle', {
       defaultMessage: 'Framework Sources',
     }),
-    description: <CisKubernetesIcons />,
+    description: <CisKubernetesIcons benchmarkId={data.rule.benchmark.id} />,
   },
   {
     title: i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.cisSectionTitle', {

x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/rule_tab.tsx

@@ -28,7 +28,7 @@ export const getRuleList = (rule: CspFinding['rule']) => [
     title: i18n.translate('xpack.csp.findings.findingsFlyout.ruleTab.frameworkSourcesTitle', {
       defaultMessage: 'Framework Sources',
     }),
-    description: <CisKubernetesIcons />,
+    description: <CisKubernetesIcons benchmarkId={rule.benchmark.id} />,
   },
   {
     title: i18n.translate('xpack.csp.findings.findingsFlyout.ruleTab.cisSectionTitle', {

x-pack/plugins/cloud_security_posture/server/routes/compliance_dashboard/get_clusters.test.ts

@@ -11,9 +11,12 @@ const mockClusterBuckets: ClusterBucket[] = [
   {
     key: 'cluster_id',
     doc_count: 10,
-    benchmarks: {
+    benchmarkName: {
       buckets: [{ key: 'CIS Kubernetes', doc_count: 10 }],
     },
+    benchmarkId: {
+      buckets: [{ key: 'cis_k8s', doc_count: 10 }],
+    },
     timestamps: {
       buckets: [{ key: 123, doc_count: 1 }],
     },
@@ -59,6 +62,7 @@ describe('getClustersFromAggs', () => {
           lastUpdate: 123,
           clusterId: 'cluster_id',
           benchmarkName: 'CIS Kubernetes',
+          benchmarkId: 'cis_k8s',
         },
         stats: {
           totalFindings: 12,

x-pack/plugins/cloud_security_posture/server/routes/compliance_dashboard/get_clusters.ts

@@ -11,7 +11,7 @@ import type {
   QueryDslQueryContainer,
   SearchRequest,
 } from '@elastic/elasticsearch/lib/api/types';
-import { Cluster } from '../../../common/types';
+import type { BenchmarkId, Cluster } from '../../../common/types';
 import {
   getFailedFindingsFromAggs,
   failedFindingsAggQuery,
@@ -29,7 +29,8 @@ export interface ClusterBucket extends FailedFindingsQueryResult, KeyDocCount {
   passed_findings: {
     doc_count: number;
   };
-  benchmarks: Aggregation<KeyDocCount>;
+  benchmarkName: Aggregation<KeyDocCount>;
+  benchmarkId: Aggregation<KeyDocCount<BenchmarkId>>;
   timestamps: Aggregation<KeyDocCount<UnixEpochTime>>;
 }
 
@@ -48,11 +49,16 @@ export const getClustersQuery = (query: QueryDslQueryContainer, pitId: string):
         field: 'cluster_id',
       },
       aggs: {
-        benchmarks: {
+        benchmarkName: {
           terms: {
             field: 'rule.benchmark.name',
           },
         },
+        benchmarkId: {
+          terms: {
+            field: 'rule.benchmark.id',
+          },
+        },
         timestamps: {
           terms: {
             field: '@timestamp',
@@ -75,14 +81,21 @@ export const getClustersQuery = (query: QueryDslQueryContainer, pitId: string):
 export const getClustersFromAggs = (clusters: ClusterBucket[]): ClusterWithoutTrend[] =>
   clusters.map((cluster) => {
     // get cluster's meta data
-    const benchmarks = cluster.benchmarks.buckets;
-    if (!Array.isArray(benchmarks)) throw new Error('missing aggs by benchmarks per cluster');
+    const benchmarkNames = cluster.benchmarkName.buckets;
+    const benchmarkIds = cluster.benchmarkId.buckets;
+
+    if (!Array.isArray(benchmarkIds) || benchmarkIds.length === 0)
+      throw new Error('missing aggs by benchmarkIds per cluster');
+
+    if (!Array.isArray(benchmarkNames)) throw new Error('missing aggs by benchmarks per cluster');
+
     const timestamps = cluster.timestamps.buckets;
     if (!Array.isArray(timestamps)) throw new Error('missing aggs by timestamps per cluster');
 
     const meta = {
       clusterId: cluster.key,
-      benchmarkName: benchmarks[0].key,
+      benchmarkName: benchmarkNames[0].key,
+      benchmarkId: benchmarkIds[0].key,
       lastUpdate: timestamps[0].key,
     };