[8.16] [Cloud Security] exclude unknown findings from compliance score calculation (#197829) (#198004)

# Backport This will backport the following commits from `main` to `8.16`: - [[Cloud Security] exclude unknown findings from compliance score calculation (#197829)](https://github.com/elastic/kibana/pull/197829)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Maxim Kholod <maxim.kholod@elastic.co>
2025-04-24 09:48:58 -04:00 · 2024-10-29 02:51:08 +11:00 · 2024-10-29 02:51:08 +11:00 · 495308d7b6
commit 495308d7b6
parent 9604402862
7 changed files with 181 additions and 11 deletions
--- a/x-pack/packages/kbn-cloud-security-posture/public/src/constants/component_constants.ts
+++ b/x-pack/packages/kbn-cloud-security-posture/public/src/constants/component_constants.ts
@ -9,4 +9,5 @@ import { euiThemeVars } from '@kbn/ui-theme';
 export const statusColors = {
  passed: euiThemeVars.euiColorSuccess,
  failed: euiThemeVars.euiColorVis9,
+  unknown: euiThemeVars.euiColorLightShade,
 };
--- a/x-pack/plugins/cloud_security_posture/public/components/compliance_score_bar.test.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/components/compliance_score_bar.test.tsx
@ -0,0 +1,49 @@
+/*
+ * 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, screen } from '@testing-library/react';
+import { ComplianceScoreBar } from './compliance_score_bar';
+import {
+  COMPLIANCE_SCORE_BAR_UNKNOWN,
+  COMPLIANCE_SCORE_BAR_PASSED,
+  COMPLIANCE_SCORE_BAR_FAILED,
+} from './test_subjects';
+
+describe('<ComplianceScoreBar />', () => {
+  it('should display 0% compliance score with status unknown when both passed and failed are 0', () => {
+    render(<ComplianceScoreBar totalPassed={0} totalFailed={0} />);
+    expect(screen.getByText('0%')).toBeInTheDocument();
+    expect(screen.queryByTestId(COMPLIANCE_SCORE_BAR_UNKNOWN)).not.toBeNull();
+    expect(screen.queryByTestId(COMPLIANCE_SCORE_BAR_FAILED)).toBeNull();
+    expect(screen.queryByTestId(COMPLIANCE_SCORE_BAR_PASSED)).toBeNull();
+  });
+
+  it('should display 100% compliance score when passed is greater than 0 and failed is 0', () => {
+    render(<ComplianceScoreBar totalPassed={10} totalFailed={0} />);
+    expect(screen.getByText('100%')).toBeInTheDocument();
+    expect(screen.queryByTestId(COMPLIANCE_SCORE_BAR_PASSED)).not.toBeNull();
+    expect(screen.queryByTestId(COMPLIANCE_SCORE_BAR_FAILED)).toBeNull();
+    expect(screen.queryByTestId(COMPLIANCE_SCORE_BAR_UNKNOWN)).toBeNull();
+  });
+
+  it('should display 0% compliance score when passed is 0 and failed is greater than 0', () => {
+    render(<ComplianceScoreBar totalPassed={0} totalFailed={10} />);
+    expect(screen.getByText('0%')).toBeInTheDocument();
+    expect(screen.queryByTestId(COMPLIANCE_SCORE_BAR_FAILED)).not.toBeNull();
+    expect(screen.queryByTestId(COMPLIANCE_SCORE_BAR_PASSED)).toBeNull();
+    expect(screen.queryByTestId(COMPLIANCE_SCORE_BAR_UNKNOWN)).toBeNull();
+  });
+
+  it('should display 50% compliance score when passed is equal to failed', () => {
+    render(<ComplianceScoreBar totalPassed={5} totalFailed={5} />);
+    expect(screen.getByText('50%')).toBeInTheDocument();
+    expect(screen.queryByTestId(COMPLIANCE_SCORE_BAR_FAILED)).not.toBeNull();
+    expect(screen.queryByTestId(COMPLIANCE_SCORE_BAR_PASSED)).not.toBeNull();
+    expect(screen.queryByTestId(COMPLIANCE_SCORE_BAR_UNKNOWN)).toBeNull();
+  });
+});
--- a/x-pack/plugins/cloud_security_posture/public/components/compliance_score_bar.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/components/compliance_score_bar.tsx
@ -11,7 +11,12 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { statusColors } from '@kbn/cloud-security-posture';
 import { calculatePostureScore } from '../../common/utils/helpers';
-import { CSP_FINDINGS_COMPLIANCE_SCORE } from './test_subjects';
+import {
+  CSP_FINDINGS_COMPLIANCE_SCORE,
+  COMPLIANCE_SCORE_BAR_UNKNOWN,
+  COMPLIANCE_SCORE_BAR_FAILED,
+  COMPLIANCE_SCORE_BAR_PASSED,
+} from './test_subjects';

 /**
 * This component will take 100% of the width set by the parent
@ -59,12 +64,22 @@ export const ComplianceScoreBar = ({
              gap: 1px;
            `}
          >
+            {!totalPassed && !totalFailed && (
+              <EuiFlexItem
+                css={css`
+                  flex: 1;
+                  background: ${statusColors.unknown};
+                `}
+                data-test-subj={COMPLIANCE_SCORE_BAR_UNKNOWN}
+              />
+            )}
            {!!totalPassed && (
              <EuiFlexItem
                css={css`
                  flex: ${totalPassed};
                  background: ${statusColors.passed};
                `}
+                data-test-subj={COMPLIANCE_SCORE_BAR_PASSED}
              />
            )}
            {!!totalFailed && (
@ -73,6 +88,7 @@ export const ComplianceScoreBar = ({
                  flex: ${totalFailed};
                  background: ${statusColors.failed};
                `}
+                data-test-subj={COMPLIANCE_SCORE_BAR_FAILED}
              />
            )}
          </EuiFlexGroup>
--- a/x-pack/plugins/cloud_security_posture/public/components/test_subjects.ts
+++ b/x-pack/plugins/cloud_security_posture/public/components/test_subjects.ts
@ -92,3 +92,7 @@ export const CIS_GCP_INPUT_FIELDS_TEST_SUBJECTS = {
 };

 export const SUBSCRIPTION_NOT_ALLOWED_TEST_SUBJECT = 'cloud_posture_page_subscription_not_allowed';
+
+export const COMPLIANCE_SCORE_BAR_UNKNOWN = 'complianceScoreBarUnknown';
+export const COMPLIANCE_SCORE_BAR_FAILED = 'complianceScoreBarFailed';
+export const COMPLIANCE_SCORE_BAR_PASSED = 'complianceScoreBarPassed';
--- a/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/latest_findings_group_renderer.test.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/latest_findings_group_renderer.test.tsx
@ -0,0 +1,101 @@
+/*
+ * 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 { useEuiTheme } from '@elastic/eui';
+import { ComplianceBarComponent } from './latest_findings_group_renderer';
+import { RawBucket } from '@kbn/grouping/src';
+import { FindingsGroupingAggregation } from './use_grouped_findings';
+import { ComplianceScoreBar } from '../../../components/compliance_score_bar';
+
+jest.mock('@elastic/eui', () => {
+  const actual = jest.requireActual('@elastic/eui');
+  return {
+    ...actual,
+    useEuiTheme: jest.fn(),
+  };
+});
+
+jest.mock('../../../components/compliance_score_bar', () => ({
+  ComplianceScoreBar: jest.fn(() => null),
+}));
+
+jest.mock('../../../components/cloud_security_grouping');
+
+describe('<ComplianceBarComponent />', () => {
+  beforeEach(() => {
+    (useEuiTheme as jest.Mock).mockReturnValue({ euiTheme: { size: { s: 's' } } });
+    (ComplianceScoreBar as jest.Mock).mockClear();
+  });
+
+  it('renders ComplianceScoreBar with correct totalFailed and totalPassed, when total = failed+passed', () => {
+    const bucket = {
+      doc_count: 10,
+      failedFindings: {
+        doc_count: 4,
+      },
+      passedFindings: {
+        doc_count: 6,
+      },
+    } as RawBucket<FindingsGroupingAggregation>;
+
+    render(<ComplianceBarComponent bucket={bucket} />);
+
+    expect(ComplianceScoreBar).toHaveBeenCalledWith(
+      expect.objectContaining({
+        totalFailed: 4,
+        totalPassed: 6,
+      }),
+      {}
+    );
+  });
+
+  it('renders ComplianceScoreBar with correct totalFailed and totalPassed, when there are unknown findings', () => {
+    const bucket = {
+      doc_count: 10,
+      failedFindings: {
+        doc_count: 3,
+      },
+      passedFindings: {
+        doc_count: 6,
+      },
+    } as RawBucket<FindingsGroupingAggregation>;
+
+    render(<ComplianceBarComponent bucket={bucket} />);
+
+    expect(ComplianceScoreBar).toHaveBeenCalledWith(
+      expect.objectContaining({
+        totalFailed: 3,
+        totalPassed: 6,
+      }),
+      {}
+    );
+  });
+
+  it('renders ComplianceScoreBar with correct totalFailed and totalPassed, when there are no findings', () => {
+    const bucket = {
+      doc_count: 10,
+      failedFindings: {
+        doc_count: 0,
+      },
+      passedFindings: {
+        doc_count: 0,
+      },
+    } as RawBucket<FindingsGroupingAggregation>;
+
+    render(<ComplianceBarComponent bucket={bucket} />);
+
+    expect(ComplianceScoreBar).toHaveBeenCalledWith(
+      expect.objectContaining({
+        totalFailed: 0,
+        totalPassed: 0,
+      }),
+      {}
+    );
+  });
+});
--- a/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/latest_findings_group_renderer.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/latest_findings_group_renderer.tsx
@ -198,11 +198,15 @@ const FindingsCountComponent = ({ bucket }: { bucket: RawBucket<FindingsGrouping

 const FindingsCount = React.memo(FindingsCountComponent);

-const ComplianceBarComponent = ({ bucket }: { bucket: RawBucket<FindingsGroupingAggregation> }) => {
+export const ComplianceBarComponent = ({
+  bucket,
+}: {
+  bucket: RawBucket<FindingsGroupingAggregation>;
+}) => {
  const { euiTheme } = useEuiTheme();

  const totalFailed = bucket.failedFindings?.doc_count || 0;
-  const totalPassed = bucket.doc_count - totalFailed;
+  const totalPassed = bucket.passedFindings?.doc_count || 0;
  return (
    <ComplianceScoreBar
      size="l"
--- a/x-pack/plugins/security_solution/public/cloud_security_posture/components/misconfiguration/misconfiguration_preview.tsx
+++ b/x-pack/plugins/security_solution/public/cloud_security_posture/components/misconfiguration/misconfiguration_preview.tsx
@ -12,13 +12,12 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, useEuiTheme, EuiTitle }
 import { FormattedMessage } from '@kbn/i18n-react';
 import { DistributionBar } from '@kbn/security-solution-distribution-bar';
 import { useMisconfigurationPreview } from '@kbn/cloud-security-posture/src/hooks/use_misconfiguration_preview';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
 import { ExpandablePanel } from '@kbn/security-solution-common';
 import { buildEntityFlyoutPreviewQuery } from '@kbn/cloud-security-posture-common';
 import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
 import { useVulnerabilitiesPreview } from '@kbn/cloud-security-posture/src/hooks/use_vulnerabilities_preview';
-import { hasVulnerabilitiesData } from '@kbn/cloud-security-posture';
+import { hasVulnerabilitiesData, statusColors } from '@kbn/cloud-security-posture';
 import { METRIC_TYPE } from '@kbn/analytics';
 import {
  ENTITY_FLYOUT_WITH_MISCONFIGURATION_VISIT,
@ -51,7 +50,7 @@ export const getFindingsStats = (passedFindingsStats: number, failedFindingsStat
        }
      ),
      count: passedFindingsStats,
-      color: euiThemeVars.euiColorSuccess,
+      color: statusColors.passed,
    },
    {
      key: i18n.translate(
@ -61,7 +60,7 @@ export const getFindingsStats = (passedFindingsStats: number, failedFindingsStat
        }
      ),
      count: failedFindingsStats,
-      color: euiThemeVars.euiColorVis9,
+      color: statusColors.failed,
    },
  ];
 };
@ -70,14 +69,10 @@ const MisconfigurationPreviewScore = ({
  passedFindings,
  failedFindings,
  euiTheme,
-  numberOfPassedFindings,
-  numberOfFailedFindings,
 }: {
  passedFindings: number;
  failedFindings: number;
  euiTheme: EuiThemeComputed<{}>;
-  numberOfPassedFindings?: number;
-  numberOfFailedFindings?: number;
 }) => {
  return (
    <EuiFlexItem>