"Score" => "Severity" conversion to be done in the backend and not in the UI

frontend/client/src/app/api/model-utils.ts

@@ -5,9 +5,10 @@ import {
   global_warning_color_100 as moderateColor,
 } from "@patternfly/react-tokens";
 
-import { Severity } from "./models";
 import { ProgressProps } from "@patternfly/react-core";
 
+import { Severity } from "./models";
+
 type ListType = {
   [key in Severity]: {
     shieldIconColor: { name: string; value: string; var: string };
@@ -33,15 +34,3 @@ export const severityList: ListType = {
     progressProps: { variant: "danger" },
   },
 };
-
-export const severityFromNumber = (score: number): Severity => {
-  if (score >= 9.0) {
-    return "critical";
-  } else if (score >= 7.0) {
-    return "important";
-  } else if (score >= 4.0) {
-    return "moderate";
-  } else {
-    return "low";
-  }
-};

frontend/client/src/app/api/models.ts

@@ -70,6 +70,6 @@ export interface AdvisoryVulnerability {
   title: string;
   discovery_date: string;
   release_date: string;
-  score: number;
+  severity: Severity;
   cwe: string;
 }

frontend/client/src/app/components/SeverityShieldAndText.tsx

@@ -3,44 +3,33 @@ import React from "react";
 import { Flex, FlexItem } from "@patternfly/react-core";
 import ShieldIcon from "@patternfly/react-icons/dist/esm/icons/shield-alt-icon";
 
-import { severityFromNumber, severityList } from "@app/api/model-utils";
+import { severityList } from "@app/api/model-utils";
 import { Severity } from "@app/api/models";
 
 interface SeverityShieldAndTextProps {
-  value: Severity | number;
-  showLabel?: boolean;
+  value: Severity;
+  hideLabel?: boolean;
 }
 
 export const SeverityShieldAndText: React.FC<SeverityShieldAndTextProps> = ({
   value,
-  showLabel,
+  hideLabel,
 }) => {
-  let severity: Severity;
-  if (typeof value === "number") {
-    severity = severityFromNumber(value);
-  } else {
-    severity = value;
-  }
-
-  const severityProps = severityList[severity];
+  const severityProps = severityList[value];
 
   return (
-    <>
-      <Flex
-        spaceItems={{ default: "spaceItemsXs" }}
-        alignItems={{ default: "alignItemsCenter" }}
-        flexWrap={{ default: "nowrap" }}
-        style={{ whiteSpace: "nowrap" }}
-      >
-        <FlexItem>
-          <ShieldIcon color={severityProps.shieldIconColor.value} />
-        </FlexItem>
-        {showLabel && (
-          <FlexItem>
-            {severity.charAt(0).toUpperCase() + severity.slice(1)}
-          </FlexItem>
-        )}
-      </Flex>
-    </>
+    <Flex
+      spaceItems={{ default: "spaceItemsXs" }}
+      alignItems={{ default: "alignItemsCenter" }}
+      flexWrap={{ default: "nowrap" }}
+      style={{ whiteSpace: "nowrap" }}
+    >
+      <FlexItem>
+        <ShieldIcon color={severityProps.shieldIconColor.value} />
+      </FlexItem>
+      {!hideLabel && (
+        <FlexItem>{value.charAt(0).toUpperCase() + value.slice(1)}</FlexItem>
+      )}
+    </Flex>
   );
 };

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

@@ -55,7 +55,6 @@ export const AdvisoryDetails: React.FC = () => {
                   children: (
                     <SeverityShieldAndText
                       value={advisory.aggregated_severity}
-                      showLabel
                     />
                   ),
                   isCompact: true,

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

@@ -57,7 +57,6 @@ export const Overview: React.FC<OverviewProps> = ({ advisory }) => {
                       <DescriptionListDescription>
                         <SeverityShieldAndText
                           value={advisory.aggregated_severity}
-                          showLabel
                         />
                       </DescriptionListDescription>
                     </DescriptionListGroup>
@@ -156,17 +155,10 @@ export const Overview: React.FC<OverviewProps> = ({ advisory }) => {
               </Card>
             </GridItem>
             <GridItem md={8}>
-              {/* <Card isFullHeight>
+              <Card isFullHeight>
                 <CardTitle>Product info</CardTitle>
-                <CardBody>
-                  <TreeView
-                    data={productTreeData}
-                    hasGuides={true}
-                    variant="default"
-                    useMemo
-                  />
-                </CardBody>
-              </Card> */}
+                <CardBody>Remaining to be defined</CardBody>
+              </Card>
             </GridItem>
           </Grid>
         </StackItem>

frontend/client/src/app/pages/advisory-details/source.tsx

@@ -20,7 +20,6 @@ export const Source: React.FC<SourceProps> = ({ advisoryId }) => {
           isLineNumbersVisible
           isReadOnly
           isMinimapVisible
-          // isLanguageLabelVisible
           code={source ?? ""}
           language={Language.json}
           height="685px"

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

@@ -12,12 +12,12 @@ import dayjs from "dayjs";
 import { RENDER_DATE_FORMAT } from "@app/Constants";
 
 import { AdvisoryVulnerability } from "@app/api/models";
+import { SeverityShieldAndText } from "@app/components/SeverityShieldAndText";
 import {
   ConditionalTableBody,
   FilterType,
   useClientTableBatteries,
 } from "@carlosthe19916-latest/react-table-batteries";
-import { SeverityProgressBar } from "@app/components/SeverityProgressBar";
 
 interface VulnerabilitiesProps {
   vulnerabilities: AdvisoryVulnerability[];
@@ -35,7 +35,7 @@ export const Vulnerabilities: React.FC<VulnerabilitiesProps> = ({
       title: "Title",
       discovery: "Discovery",
       release: "Release",
-      score: "Score",
+      severity: "Severity",
       cwe: "CWE",
     },
     hasActionsColumn: true,
@@ -110,7 +110,7 @@ export const Vulnerabilities: React.FC<VulnerabilitiesProps> = ({
             <Th columnKey="title" />
             <Th columnKey="discovery" />
             <Th columnKey="release" />
-            <Th columnKey="score" />
+            <Th columnKey="severity" />
             <Th columnKey="cwe" />
           </Tr>
         </Thead>
@@ -136,8 +136,8 @@ export const Vulnerabilities: React.FC<VulnerabilitiesProps> = ({
                   <Td width={10} columnKey="release">
                     {dayjs(item.release_date).format(RENDER_DATE_FORMAT)}
                   </Td>
-                  <Td width={15} columnKey="score">
-                    <SeverityProgressBar value={item.score} />
+                  <Td width={15} columnKey="severity">
+                    <SeverityShieldAndText value={item.severity} />
                   </Td>
                   <Td width={10} columnKey="cwe">
                     {item.cwe}

frontend/client/src/app/pages/advisory-list/components/VulnerabilitiesCount.tsx

@@ -39,7 +39,10 @@ export const VulnerabilitiesCount: React.FC<VulnerabilitiesCountProps> = ({
                 style={{ whiteSpace: "nowrap" }}
               >
                 <FlexItem>
-                  <SeverityShieldAndText value={severity as Severity} />
+                  <SeverityShieldAndText
+                    value={severity as Severity}
+                    hideLabel
+                  />
                 </FlexItem>
                 <FlexItem>{count}</FlexItem>
               </Flex>

frontend/client/src/app/pages/advisory-list/useAdvisoryList.tsx

@@ -134,10 +134,7 @@ export const useAdvisoryList = () => {
                     {item.metadata.title}
                   </Td>
                   <Td width={10} columnKey="severity">
-                    <SeverityShieldAndText
-                      value={item.aggregated_severity}
-                      showLabel
-                    />
+                    <SeverityShieldAndText value={item.aggregated_severity} />
                   </Td>
                   <Td width={10} modifier="truncate" columnKey="revisionDate">
                     {dayjs(item.revision_date).format(RENDER_DATE_FORMAT)}

frontend/client/src/mocks/stub-new-work/advisories.ts

@@ -37,7 +37,7 @@ export const mockProjectArray: Advisory[] = [
         title: "title1",
         discovery_date: new Date().toString(),
         release_date: new Date().toString(),
-        score: 7.5,
+        severity: "critical",
         cwe: "cwe1",
       },
     ],
@@ -58,7 +58,11 @@ export const handlers = [
     }
   }),
   rest.get(`${AppRest.ADVISORIES}/:id/source`, (req, res, ctx) => {
-    return res(ctx.json("{}"));
+    return res(
+      ctx.json(
+        "This is Mock data, but the real API should return the advisory JSON file"
+      )
+    );
   }),
 ];