✨ Add Score to Severity shield component

client/src/app/components/SeverityShieldAndText.tsx

@@ -8,12 +8,16 @@ import type { ExtendedSeverity } from "@app/api/models";
 
 interface SeverityShieldAndTextProps {
   value: ExtendedSeverity;
-  hideLabel?: boolean;
+  score: number | null;
+  showScore?: boolean;
+  showLabel?: boolean;
 }
 
 export const SeverityShieldAndText: React.FC<SeverityShieldAndTextProps> = ({
   value,
-  hideLabel,
+  score,
+  showScore,
+  showLabel,
 }) => {
   const severityProps = severityList[value];
   const label = severityProps.name;
@@ -26,15 +30,16 @@ export const SeverityShieldAndText: React.FC<SeverityShieldAndTextProps> = ({
       style={{ whiteSpace: "nowrap" }}
     >
       <FlexItem>
-        {hideLabel ? (
+        {showLabel ? (
+          <ShieldIcon color={severityProps.color.value} />
+        ) : (
           <Tooltip content={label}>
             <ShieldIcon color={severityProps.color.value} />
           </Tooltip>
-        ) : (
-          <ShieldIcon color={severityProps.color.value} />
         )}
       </FlexItem>
-      {!hideLabel && <FlexItem>{label}</FlexItem>}
+      {showLabel && <FlexItem>{label}</FlexItem>}
+      {showScore && score !== null && <FlexItem>({score})</FlexItem>}
     </Flex>
   );
 };

client/src/app/hooks/domain-controls/useVulnerabilitiesOfPackage.ts

@@ -19,13 +19,19 @@ const areVulnerabilityOfPackageEqual = (
 };
 
 interface FlatVulnerabilityOfPackage {
-  vulnerability: VulnerabilityHead & { average_severity: ExtendedSeverity };
+  vulnerability: VulnerabilityHead & {
+    average_severity: ExtendedSeverity;
+    average_score: number;
+  };
   vulnerabilityStatus: VulnerabilityStatus;
   advisory: PurlAdvisory;
 }
 
 interface VulnerabilityOfPackage {
-  vulnerability: VulnerabilityHead & { average_severity: ExtendedSeverity };
+  vulnerability: VulnerabilityHead & {
+    average_severity: ExtendedSeverity;
+    average_score: number;
+  };
   vulnerabilityStatus: VulnerabilityStatus;
   relatedSboms: {
     advisory: PurlAdvisory;
@@ -70,6 +76,7 @@ const advisoryToModels = (advisories: PurlAdvisory[]) => {
             vulnerability: {
               ...pkgStatus.vulnerability,
               average_severity: extendedSeverity,
+              average_score: pkgStatus.average_score,
             },
             vulnerabilityStatus: pkgStatus.status as VulnerabilityStatus,
             advisory: advisory,

client/src/app/pages/advisory-details/overview.tsx

@@ -50,6 +50,9 @@ export const Overview: React.FC<InfoProps> = ({ advisory }) => {
                     value={extendedSeverityFromSeverity(
                       advisory.average_severity as Severity,
                     )}
+                    score={advisory.average_score}
+                    showLabel
+                    showScore
                   />
                 </DescriptionListDescription>
               </DescriptionListGroup>

client/src/app/pages/advisory-details/vulnerabilities-by-advisory.tsx

@@ -134,7 +134,12 @@ export const VulnerabilitiesByAdvisory: React.FC<
                       {...getTdProps({ columnKey: "score" })}
                     >
                       {item.severity && (
-                        <SeverityShieldAndText value={item.severity} />
+                        <SeverityShieldAndText
+                          value={item.severity}
+                          score={item.score}
+                          showLabel
+                          showScore
+                        />
                       )}
                     </Td>
                     <Td

client/src/app/pages/advisory-list/advisory-table.tsx

@@ -125,6 +125,9 @@ export const AdvisoryTable: React.FC = () => {
                       {item.average_severity && (
                         <SeverityShieldAndText
                           value={item.average_severity as Severity}
+                          score={item.average_score}
+                          showLabel
+                          showScore
                         />
                       )}
                     </Td>

client/src/app/pages/package-details/vulnerabilities-by-package.tsx

@@ -152,6 +152,9 @@ export const VulnerabilitiesByPackage: React.FC<
                       {item.vulnerability?.average_severity && (
                         <SeverityShieldAndText
                           value={item.vulnerability.average_severity}
+                          score={item.vulnerability.average_score}
+                          showLabel
+                          showScore
                         />
                       )}
                     </Td>

client/src/app/pages/sbom-details/vulnerabilities-by-sbom.tsx

@@ -290,6 +290,9 @@ export const VulnerabilitiesBySbom: React.FC<VulnerabilitiesBySbomProps> = ({
                             value={extendedSeverityFromSeverity(
                               item.vulnerability.average_severity,
                             )}
+                            score={item.vulnerability.average_score}
+                            showLabel
+                            showScore
                           />
                         </Td>
                         <Td

client/src/app/pages/vulnerability-details/advisories-by-vulnerability.tsx

@@ -123,6 +123,9 @@ export const AdvisoriesByVulnerability: React.FC<
                   <Td width={10} {...getTdProps({ columnKey: "severity" })}>
                     <SeverityShieldAndText
                       value={extendedSeverityFromSeverity(item.severity)}
+                      score={item.score}
+                      showLabel
+                      showScore
                     />
                   </Td>
                   <Td

client/src/app/pages/vulnerability-details/vulnerability-details.tsx

@@ -57,6 +57,9 @@ export const VulnerabilityDetails: React.FC = () => {
                 value={extendedSeverityFromSeverity(
                   vulnerability.average_severity,
                 )}
+                score={vulnerability.average_score}
+                showLabel
+                showScore
               />
             )}
           </FlexItem>

client/src/app/pages/vulnerability-list/vulnerability-table.tsx

@@ -86,6 +86,9 @@ export const VulnerabilityTable: React.FC = () => {
                         value={extendedSeverityFromSeverity(
                           item.average_severity,
                         )}
+                        score={item.average_score}
+                        showLabel
+                        showScore
                       />
                     </Td>
                     <Td width={10} {...getTdProps({ columnKey: "published" })}>