[Cloud Security] Fixed vuln dashboard counters (#167511)

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

@@ -17,11 +17,17 @@ export interface CspCounterCardProps {
   description: EuiStatProps['description'];
 }
 
-export const CspCounterCard = (counter: CspCounterCardProps) => {
+export const CspCounterCard = ({
+  id,
+  button,
+  title,
+  titleColor,
+  description,
+}: CspCounterCardProps) => {
   const { euiTheme } = useEuiTheme();
 
   return (
-    <EuiPanel hasBorder paddingSize="m" data-test-subj={counter.id}>
+    <EuiPanel hasBorder paddingSize="m" data-test-subj={id}>
       <EuiStat
         css={{
           height: '60%',
@@ -34,13 +40,13 @@ export const CspCounterCard = (counter: CspCounterCardProps) => {
           },
         }}
         titleSize="s"
-        title={counter.title}
-        titleColor={counter.titleColor}
+        title={title}
+        titleColor={titleColor}
         descriptionElement="h6"
-        description={counter.description}
+        description={description}
       />
       <EuiHorizontalRule margin="xs" />
-      {counter.button}
+      {button}
     </EuiPanel>
   );
 };

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

@@ -0,0 +1,76 @@
+/*
+ * 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, { MouseEventHandler } from 'react';
+import { EuiPanel, EuiStat, useEuiTheme, EuiIcon } from '@elastic/eui';
+import type { EuiStatProps } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export interface VulnCounterCardProps {
+  id: string;
+  title: EuiStatProps['title'];
+  titleColor?: EuiStatProps['titleColor'];
+  description: EuiStatProps['description'];
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+export const VulnCounterCard = ({
+  id,
+  title,
+  titleColor,
+  description,
+  onClick,
+}: VulnCounterCardProps) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <EuiPanel
+      hasBorder
+      onClick={onClick}
+      paddingSize="m"
+      css={css`
+        position: relative;
+        display: flex;
+        align-items: center;
+        :hover .euiIcon {
+          color: ${euiTheme.colors.primary};
+          transition: ${euiTheme.animation.normal};
+        }
+      `}
+      data-test-subj={id}
+    >
+      <EuiStat
+        css={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-around',
+          '.euiText h6': {
+            textTransform: 'capitalize',
+            fontSize: euiTheme.size.m,
+          },
+        }}
+        titleSize="s"
+        title={title}
+        titleColor={titleColor}
+        descriptionElement="h6"
+        description={description}
+      />
+      {onClick && (
+        <EuiIcon
+          type={'pivot'}
+          css={css`
+            color: ${euiTheme.colors.lightShade};
+            position: absolute;
+            top: ${euiTheme.size.s};
+            right: ${euiTheme.size.s};
+          `}
+        />
+      )}
+    </EuiPanel>
+  );
+};

x-pack/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_statistics.tsx

@@ -7,18 +7,18 @@
 import React, { useMemo } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiHealth } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { VulnCounterCard, type VulnCounterCardProps } from '../../components/vuln_counter_card';
 import { VULNERABILITIES_SEVERITY } from '../../../common/constants';
 import { useVulnerabilityDashboardApi } from '../../common/api/use_vulnerability_dashboard_api';
 import { useNavigateVulnerabilities } from '../../common/hooks/use_navigate_findings';
 import { CompactFormattedNumber } from '../../components/compact_formatted_number';
 import { getSeverityStatusColor } from '../../common/utils/get_vulnerability_colors';
-import { CspCounterCard } from '../../components/csp_counter_card';
 
 export const VulnerabilityStatistics = () => {
   const navToVulnerabilities = useNavigateVulnerabilities();
   const getVulnerabilityDashboard = useVulnerabilityDashboardApi();
 
-  const stats = useMemo(
+  const stats: VulnCounterCardProps[] = useMemo(
     () => [
       {
         id: 'critical-count-stat',
@@ -110,7 +110,7 @@ export const VulnerabilityStatistics = () => {
     <EuiFlexGroup>
       {stats.map((stat) => (
         <EuiFlexItem key={stat.id}>
-          <CspCounterCard {...stat} />
+          <VulnCounterCard {...stat} />
         </EuiFlexItem>
       ))}
     </EuiFlexGroup>