[Cloud Security] Fix broken dashboard UI and ComplianceScoreBar (#155428)

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

@@ -6,11 +6,15 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { calculatePostureScore } from '../../common/utils/helpers';
 import { statusColors } from '../common/constants';
 
+/**
+ * This component will take 100% of the width set by the parent
+ * */
 export const ComplianceScoreBar = ({
   totalPassed,
   totalFailed,
@@ -23,7 +27,12 @@ export const ComplianceScoreBar = ({
 
   return (
     <EuiToolTip
-      anchorClassName="cspComplianceScoreBarTooltip"
+      anchorProps={{
+        // ensures the compliance bar takes full width of its parent
+        css: css`
+          width: 100%;
+        `,
+      }}
       content={i18n.translate('xpack.csp.complianceScoreBar.tooltipTitle', {
         defaultMessage: '{failed} failed and {passed} passed findings',
         values: {
@@ -36,11 +45,7 @@ export const ComplianceScoreBar = ({
         gutterSize="none"
         alignItems="center"
         justifyContent="flexEnd"
-        style={{
-          height: '32px',
-          cursor: 'pointer',
-          gap: `${euiTheme.size.s}`,
-        }}
+        style={{ gap: euiTheme.size.s }}
       >
         <EuiFlexItem>
           <EuiFlexGroup

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/risks_table.tsx

@@ -90,7 +90,9 @@ export const RisksTable = ({
             compact
               ? css`
                   thead {
-                    display: none;
+                    .euiTableCellContent {
+                      padding: 0;
+                    }
                   }
                   .euiTable .euiTableRow .euiTableRowCell {
                     border-top: none;

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

@@ -186,25 +186,31 @@ export const BenchmarksSection = ({
             />
           </EuiFlexItem>
           <EuiFlexItem grow={dashboardColumnsGrow.third}>
-            <RisksTable
-              compact
-              data={cluster.groupedFindingsEvaluation}
-              maxItems={3}
-              onCellClick={(resourceTypeName) =>
-                navToFailedFindingsByClusterAndSection(cluster, resourceTypeName)
-              }
-              viewAllButtonTitle={i18n.translate(
-                'xpack.csp.dashboard.risksTable.clusterCardViewAllButtonTitle',
-                {
-                  defaultMessage: 'View all failed findings for this {postureAsset}',
-                  values: {
-                    postureAsset:
-                      dashboardType === CSPM_POLICY_TEMPLATE ? 'cloud account' : 'cluster',
-                  },
+            <div
+              style={{
+                paddingRight: euiTheme.size.base,
+              }}
+            >
+              <RisksTable
+                compact
+                data={cluster.groupedFindingsEvaluation}
+                maxItems={3}
+                onCellClick={(resourceTypeName) =>
+                  navToFailedFindingsByClusterAndSection(cluster, resourceTypeName)
                 }
-              )}
-              onViewAllClick={() => navToFailedFindingsByCluster(cluster)}
-            />
+                viewAllButtonTitle={i18n.translate(
+                  'xpack.csp.dashboard.risksTable.clusterCardViewAllButtonTitle',
+                  {
+                    defaultMessage: 'View all failed findings for this {postureAsset}',
+                    values: {
+                      postureAsset:
+                        dashboardType === CSPM_POLICY_TEMPLATE ? 'cloud account' : 'cluster',
+                    },
+                  }
+                )}
+                onViewAllClick={() => navToFailedFindingsByCluster(cluster)}
+              />
+            </div>
           </EuiFlexItem>
         </EuiFlexGroup>
       ))}

x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings_by_resource/findings_by_resource_table.tsx

@@ -17,7 +17,6 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import numeral from '@elastic/numeral';
 import { generatePath, Link } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
-import { css } from '@emotion/react';
 import { ColumnNameWithTooltip } from '../../../components/column_name_with_tooltip';
 import { ComplianceScoreBar } from '../../../components/compliance_score_bar';
 import * as TEST_SUBJECTS from '../test_subjects';
@@ -179,19 +178,10 @@ const baseColumns: Array<EuiTableFieldDataColumnType<FindingsByResourcePage>> =
       />
     ),
     render: (complianceScore: FindingsByResourcePage['compliance_score'], data) => (
-      <div
-        css={css`
-          width: 100%;
-          .cspComplianceScoreBarTooltip {
-            width: 100%;
-          }
-        `}
-      >
-        <ComplianceScoreBar
-          totalPassed={data.findings.passed_findings}
-          totalFailed={data.findings.failed_findings}
-        />
-      </div>
+      <ComplianceScoreBar
+        totalPassed={data.findings.passed_findings}
+        totalFailed={data.findings.failed_findings}
+      />
     ),
     dataType: 'number',
   },