EDM-4078: Add clarification details to severity badges (#679)

* EDM-4078: Add clarification details to severity badges

Made-with: Cursor

Author: celdrake

libs/i18n/locales/en/translation.json

@@ -1673,6 +1673,7 @@
   "Impact summary": "Impact summary",
   "{{ advisoryId }} - Red Hat Security Advisory": "{{ advisoryId }} - Red Hat Security Advisory",
   "CVE details - {{ advisoryId }}": "CVE details - {{ advisoryId }}",
+  "(may show a different impact rating)": "(may show a different impact rating)",
   "CPU": "CPU",
   "Memory": "Memory",
   "Disk": "Disk",
@@ -1685,6 +1686,9 @@
   "Overall status of application workloads.": "Overall status of application workloads.",
   "Overall status of device hardware and operating system.": "Overall status of device hardware and operating system.",
   "Current system configuration vs. latest system configuration.": "Current system configuration vs. latest system configuration.",
+  "This is the industry-standard CVSS base severity. Red Hat may assign a different impact rating for this CVE based on product-specific factors like default configurations and mitigations.": "This is the industry-standard CVSS base severity. Red Hat may assign a different impact rating for this CVE based on product-specific factors like default configurations and mitigations.",
+  "CVSS {{ score }}": "CVSS {{ score }}",
+  "CVSS base score help": "CVSS base score help",
   "{{brand}} is waiting for the device to connect and report its status. It will report a ʼPending syncʼ status until it is able to reconnect. If it has configuration conflicts, it will report a ʼSuspendedʼ status and require manual action to resume.": "{{brand}} is waiting for the device to connect and report its status. It will report a ʼPending syncʼ status until it is able to reconnect. If it has configuration conflicts, it will report a ʼSuspendedʼ status and require manual action to resume.",
   "{{brand}} is waiting for devices to connect and report their status. Devices will report a ʼPending syncʼ status until they are able to connect. Devices with configuration conflicts will report a ʼSuspendedʼ status and require manual action to resume.": "{{brand}} is waiting for devices to connect and report their status. Devices will report a ʼPending syncʼ status until they are able to connect. Devices with configuration conflicts will report a ʼSuspendedʼ status and require manual action to resume.",
   "System recovery complete": "System recovery complete",

libs/ui-components/src/components/SecurityOverview/VulnerabilitiesTable.tsx

@@ -31,7 +31,6 @@ import StatusDisplay from '../Status/StatusDisplay';
 import { VulnerabilitiesTableCompactRow, VulnerabilitiesTableFullRow } from './VulnerabilitiesTableRow';
 import VulnerabilityDetailsDrawer from './VulnerabilityDetailsDrawer';
 import { VulnerabilitiesSingleEntityEmptyState } from './VulnerabilitiesEmptyState';
-
 type VulnerabilitySeverity = Vulnerability['severity'];
 
 type VulnerabilitiesTableCommonProps = {

libs/ui-components/src/components/SecurityOverview/VulnerabilitiesTableRow.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from '../../hooks/useTranslation';
 import { Link, ROUTE } from '../../hooks/useNavigate';
 import { getDateNoTimeDisplay } from '../../utils/dates';
 import { isVulnerabilityGroup } from '../../utils/vulnerabilities';
-import VulnerabilitySeverityStatus from '../Status/VulnerabilitySeverityStatus';
+import { VulnerabilitySeverityBadge } from '../Status/VulnerabilitySeverityStatus';
 import VulnerabilityAffectedImages, { getAffectedImages } from './VulnerabilityAffectedImages';
 
 type VulnerabilitiesTableCompactRowProps = {
@@ -40,7 +40,7 @@ const VulnerabilitiesBaseTr = ({
         </Button>
       </Td>
       <Td dataLabel={t('Severity')}>
-        <VulnerabilitySeverityStatus severity={vulnerability.severity} />
+        <VulnerabilitySeverityBadge severity={vulnerability.severity} />
       </Td>
       {children}
       <Td dataLabel={t('Published')}>

libs/ui-components/src/components/SecurityOverview/VulnerabilityDetailsDrawer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Vulnerability, VulnerabilityGroup } from '@flightctl/types/alpha';
-import { isVulnerabilityGroup } from '../../utils/vulnerabilities';
+import { Vulnerability, VulnerabilityGroup, VulnerabilityGroupItem } from '@flightctl/types/alpha';
+import { getPrimaryVulnerabilityGroupFinding, isRedHatIssuer, isVulnerabilityGroup } from '../../utils/vulnerabilities';
 
 import {
   Content,
@@ -18,7 +18,7 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 
-import VulnerabilitySeverityStatus from '../Status/VulnerabilitySeverityStatus';
+import { VulnerabilitySeverityBadge, VulnerabilitySeverityDetails } from '../Status/VulnerabilitySeverityStatus';
 import { getDateDisplay } from '../../utils/dates';
 import { useTranslation } from '../../hooks/useTranslation';
 
@@ -41,19 +41,27 @@ const VulnerabilityDetailsDrawer = ({
   onClose,
 }: VulnerabilityDetailsDrawerProps) => {
   const { t } = useTranslation();
+
+  let primaryFinding: Vulnerability | VulnerabilityGroupItem | undefined = vulnerability;
   const isGrouped = isVulnerabilityGroup(vulnerability);
+  if (isGrouped) {
+    primaryFinding = getPrimaryVulnerabilityGroupFinding(vulnerability.findings);
+  }
 
+  let cvssScore: number | undefined;
   let publishedAt: string | undefined;
   let description: string | undefined;
-  let hasReferences = false;
+  let isRHIssuer: boolean = false;
+  if (primaryFinding) {
+    cvssScore = primaryFinding.cvssScore;
+    publishedAt = primaryFinding.publishedAt;
+    description = primaryFinding.description;
+    isRHIssuer = isRedHatIssuer(primaryFinding.issuer);
+  }
   if (isGrouped) {
-    publishedAt = vulnerability.maxPublishedAt;
-    description = vulnerability.findings[0].description;
-    hasReferences = vulnerability.findings[0].link !== undefined;
-  } else {
-    publishedAt = vulnerability.publishedAt;
-    description = vulnerability.description;
-    hasReferences = !!vulnerability.link;
+    // The vulnerabilityGroup does not have links or descriptions
+    cvssScore = cvssScore ?? vulnerability.maxCvssScore;
+    publishedAt = publishedAt ?? vulnerability.maxPublishedAt;
   }
 
   return (
@@ -82,7 +90,11 @@ const VulnerabilityDetailsDrawer = ({
               <DescriptionListGroup>
                 <DescriptionListTerm>{t('Severity')}</DescriptionListTerm>
                 <DescriptionListDescription>
-                  <VulnerabilitySeverityStatus severity={vulnerability.severity} />
+                  {isRHIssuer ? (
+                    <VulnerabilitySeverityDetails severity={vulnerability.severity} cvssScore={cvssScore} />
+                  ) : (
+                    <VulnerabilitySeverityBadge severity={vulnerability.severity} />
+                  )}
                 </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
@@ -117,9 +129,9 @@ const VulnerabilityDetailsDrawer = ({
             <Divider />
           </StackItem>
 
-          {hasReferences && (
+          {primaryFinding && (
             <StackItem>
-              <VulnerabilityReferences vulnerability={vulnerability} cveId={vulnerability.cveId} />
+              <VulnerabilityReferences finding={primaryFinding} cveId={vulnerability.cveId} />
             </StackItem>
           )}
         </Stack>

libs/ui-components/src/components/SecurityOverview/VulnerabilityReferences.tsx

@@ -1,54 +1,40 @@
 import * as React from 'react';
 import { TFunction } from 'react-i18next';
-import { Stack, StackItem, Title } from '@patternfly/react-core';
+import { Content, Stack, StackItem, Title } from '@patternfly/react-core';
 
-import { Vulnerability, VulnerabilityGroup } from '@flightctl/types/alpha';
+import { Vulnerability, VulnerabilityGroupItem } from '@flightctl/types/alpha';
 import { useTranslation } from '../../hooks/useTranslation';
 import LearnMoreLink from '../common/LearnMoreLink';
-import { isVulnerabilityGroup } from '../../utils/vulnerabilities';
+import { isRedHatIssuer } from '../../utils/vulnerabilities';
 
-const RED_HAT_ISSUER = 'Red Hat';
-
-const getVulnLinkText = (t: TFunction, advisoryId: string, issuer: string | undefined) => {
-  if (issuer === RED_HAT_ISSUER) {
+const getVulnLinkText = (t: TFunction, advisoryId: string, isRHIssuer: boolean) => {
+  if (isRHIssuer) {
     return t('{{ advisoryId }} - Red Hat Security Advisory', { advisoryId });
   }
   return t('CVE details - {{ advisoryId }}', { advisoryId });
 };
 
 const VulnerabilityReferences = ({
-  vulnerability,
+  finding,
   cveId,
 }: {
-  vulnerability: Vulnerability | VulnerabilityGroup;
+  finding: Vulnerability | VulnerabilityGroupItem;
   cveId: string;
 }) => {
   const { t } = useTranslation();
-
-  let link: string | undefined;
-  let advisoryId: string | undefined;
-  let issuer: string | undefined;
-
-  if (isVulnerabilityGroup(vulnerability)) {
-    link = vulnerability.findings[0].link;
-    advisoryId = vulnerability.findings[0].advisoryId;
-    issuer = vulnerability.findings[0].issuer;
-  } else {
-    link = vulnerability.link;
-    advisoryId = vulnerability.advisoryId;
-    issuer = vulnerability.issuer;
-  }
-  if (!link) {
+  if (!finding.link) {
     return null;
   }
 
+  const isRHIssuer = isRedHatIssuer(finding.issuer);
   return (
     <Stack hasGutter>
       <StackItem>
         <Title headingLevel="h2">{t('References')}</Title>
       </StackItem>
       <StackItem>
-        <LearnMoreLink link={link} text={getVulnLinkText(t, advisoryId || cveId, issuer)} />
+        <LearnMoreLink link={finding.link} text={getVulnLinkText(t, finding.advisoryId || cveId, isRHIssuer)} />
+        {isRHIssuer && <Content component="small">{t('(may show a different impact rating)')}</Content>}
       </StackItem>
     </Stack>
   );

libs/ui-components/src/components/Status/VulnerabilitySeverityStatus.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
 
-import { Icon, Label } from '@patternfly/react-core';
+import { Button, Content, Flex, FlexItem, Icon, Label, Popover } from '@patternfly/react-core';
 import { Vulnerability } from '@flightctl/types/alpha';
 
 import { VULNERABILITY_SEVERITY_COLOR } from '../../utils/vulnerabilities';
@@ -9,14 +10,29 @@ import {
   getVulnerabilitySeverityStatusItems,
 } from '../../utils/status/vulnerabilities';
 import { useTranslation } from '../../hooks/useTranslation';
+import LearnMoreLink from '../common/LearnMoreLink';
 
 type VulnerabilitySeverityStatusProps = {
   severity: Vulnerability.severity;
+  cvssScore?: number;
 };
 
-const VulnerabilitySeverityStatus = ({ severity }: VulnerabilitySeverityStatusProps) => {
+const RED_HAT_CVSS_CLASSIFICATION_URL = 'https://access.redhat.com/security/updates/classification';
+
+const CvssScorePopoverContent = () => {
   const { t } = useTranslation();
+  return (
+    <>
+      {t(
+        'This is the industry-standard CVSS base severity. Red Hat may assign a different impact rating for this CVE based on product-specific factors like default configurations and mitigations.',
+      )}{' '}
+      <LearnMoreLink link={RED_HAT_CVSS_CLASSIFICATION_URL} text={t('Learn more')} />
+    </>
+  );
+};
 
+export const VulnerabilitySeverityBadge = ({ severity }: VulnerabilitySeverityStatusProps) => {
+  const { t } = useTranslation();
   const statusItems = getVulnerabilitySeverityStatusItems(t);
   const item = statusItems.find((item) => item.id === severity) || defaultVulnerabilitySeverityStatusItem(t);
 
@@ -43,4 +59,34 @@ const VulnerabilitySeverityStatus = ({ severity }: VulnerabilitySeverityStatusPr
   );
 };
 
-export default VulnerabilitySeverityStatus;
+export const VulnerabilitySeverityDetails = ({ severity, cvssScore }: VulnerabilitySeverityStatusProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }} flexWrap={{ default: 'wrap' }}>
+      <FlexItem>
+        <VulnerabilitySeverityBadge severity={severity} />
+      </FlexItem>
+      <FlexItem>
+        {cvssScore !== undefined && (
+          <Content component="small">{`(${t('CVSS {{ score }}', { score: cvssScore.toFixed(1) })})`}</Content>
+        )}
+      </FlexItem>
+      <FlexItem>
+        <Popover
+          aria-label={t('CVSS base score help')}
+          bodyContent={<CvssScorePopoverContent />}
+          withFocusTrap
+          triggerAction="click"
+        >
+          <Button
+            icon={<OutlinedQuestionCircleIcon />}
+            isInline
+            variant="plain"
+            aria-label={t('CVSS base score help')}
+          />
+        </Popover>
+      </FlexItem>
+    </Flex>
+  );
+};

libs/ui-components/src/utils/vulnerabilities.ts

@@ -1,12 +1,15 @@
 import { TFunction } from 'react-i18next';
-import { CveCountsBySeverity, Vulnerability, VulnerabilityGroup } from '@flightctl/types/alpha';
+import { CveCountsBySeverity, Vulnerability, VulnerabilityGroup, VulnerabilityGroupItem } from '@flightctl/types/alpha';
 
 const SeverityColorCritical = 'var(--pf-t--global--icon--color--severity--critical--default)';
 const SeverityColorImportant = 'var(--pf-t--global--icon--color--severity--important--default)';
 const SeverityColorModerate = 'var(--pf-t--global--icon--color--severity--moderate--default)';
 const SeverityColorMinor = 'var(--pf-t--global--icon--color--severity--minor--default)';
 const SeverityColorNone = 'var(--pf-t--global--icon--color--severity--none--default)';
 
+// Accepts different variations for "Red Hat" issuer detection
+const RED_HAT_ISSUER_PATTERN = /red\s*hat/i;
+
 type Severity = Vulnerability.severity;
 
 export const VULNERABILITY_SEVERITY_ORDER: Severity[] = [
@@ -33,6 +36,16 @@ export const isVulnerabilityGroup = (
   vulnerability: Vulnerability | VulnerabilityGroup,
 ): vulnerability is VulnerabilityGroup => 'findings' in vulnerability;
 
+export const isRedHatIssuer = (issuer?: string): boolean => !!issuer && RED_HAT_ISSUER_PATTERN.test(issuer);
+
+// Prefer a Red Hat advisory finding when present; otherwise use the first finding.
+export const getPrimaryVulnerabilityGroupFinding = (
+  findings: VulnerabilityGroupItem[],
+): VulnerabilityGroupItem | undefined => {
+  const findingsWithLink = findings.filter((finding) => finding.link);
+  return findingsWithLink.find((finding) => isRedHatIssuer(finding.issuer)) || findingsWithLink[0] || findings[0];
+};
+
 export const getSeverityCountValue = (severity: Severity, counts: CveCountsBySeverity) => {
   switch (severity) {
     case Vulnerability.severity.CRITICAL: