SBOM Details Page V1 parity (#201)

trustification · Oct 27, 2024 · c32be5e · c32be5e
1 parent 15dce22
commit c32be5e
Show file tree

Hide file tree

Showing 9 changed files with 646 additions and 678 deletions.
diff --git a/client/package.json b/client/package.json
@@ -38,7 +38,7 @@
     "file-saver": "^2.0.5",
     "monaco-editor": "0.34.1",
     "oidc-client-ts": "^2.4.0",
-    "packageurl-js": "^1.2.1",
+    "packageurl-js": "^2.0.1",
     "pretty-bytes": "^6.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/client/src/app/api/model-utils.ts b/client/src/app/api/model-utils.ts
@@ -12,35 +12,35 @@ import { Severity } from "@app/client";
 type ListType = {
   [key in Severity]: {
     name: string;
-    shieldIconColor: { name: string; value: string; var: string };
+    color: { name: string; value: string; var: string };
     progressProps: Pick<ProgressProps, "variant">;
   };
 };
 
 export const severityList: ListType = {
   none: {
     name: "None",
-    shieldIconColor: noneColor,
+    color: noneColor,
     progressProps: { variant: undefined },
   },
   low: {
     name: "Low",
-    shieldIconColor: lowColor,
+    color: lowColor,
     progressProps: { variant: undefined },
   },
   medium: {
     name: "Medium",
-    shieldIconColor: moderateColor,
+    color: moderateColor,
     progressProps: { variant: "warning" },
   },
   high: {
     name: "High",
-    shieldIconColor: importantColor,
+    color: importantColor,
     progressProps: { variant: "danger" },
   },
   critical: {
     name: "Critical",
-    shieldIconColor: criticalColor,
+    color: criticalColor,
     progressProps: { variant: "danger" },
   },
 };

diff --git a/client/src/app/components/SeverityShieldAndText.tsx b/client/src/app/components/SeverityShieldAndText.tsx
@@ -28,10 +28,10 @@ export const SeverityShieldAndText: React.FC<SeverityShieldAndTextProps> = ({
       <FlexItem>
         {hideLabel ? (
           <Tooltip content={label}>
-            <ShieldIcon color={severityProps.shieldIconColor.value} />
+            <ShieldIcon color={severityProps.color.value} />
           </Tooltip>
         ) : (
-          <ShieldIcon color={severityProps.shieldIconColor.value} />
+          <ShieldIcon color={severityProps.color.value} />
         )}
       </FlexItem>
       {!hideLabel && <FlexItem>{label}</FlexItem>}

diff --git a/client/src/app/components/SimplePagination/SimplePagination.tsx b/client/src/app/components/SimplePagination/SimplePagination.tsx
@@ -33,7 +33,6 @@ export const SimplePagination: React.FC<SimplePaginationProps> = ({
         isTop ? "top" : "bottom"
       }`}
       variant={isTop ? PaginationVariant.top : PaginationVariant.bottom}
-      className={isTop || noMargin ? "" : spacing.mtMd}
       isCompact={isCompact}
       {...paginationProps}
       widgetId="pagination-id"

diff --git a/client/src/app/pages/sbom-details/overview.tsx b/client/src/app/pages/sbom-details/overview.tsx
@@ -2,6 +2,8 @@ import React from "react";
 
 import { ChartDonut } from "@patternfly/react-charts";
 import {
+  Card,
+  CardBody,
   DescriptionList,
   DescriptionListDescription,
   DescriptionListGroup,
@@ -20,32 +22,38 @@ interface InfoProps {
 
 export const Overview: React.FC<InfoProps> = ({ sbom }) => {
   return (
-    <Grid hasGutter>
-      <GridItem md={6}>
-        <DescriptionList
-          columnModifier={{
-            default: "2Col",
-          }}
-        >
-          <DescriptionListGroup>
-            <DescriptionListTerm>Name</DescriptionListTerm>
-            <DescriptionListDescription>{sbom.name}</DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Author</DescriptionListTerm>
-            <DescriptionListDescription>
-              {sbom.authors}
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>Published</DescriptionListTerm>
-            <DescriptionListDescription>
-              {formatDate(sbom.published)}
-            </DescriptionListDescription>
-          </DescriptionListGroup>
-        </DescriptionList>
-      </GridItem>
-    </Grid>
+    <Card>
+      <CardBody>
+        <Grid hasGutter>
+          <GridItem md={6}>
+            <DescriptionList
+              columnModifier={{
+                default: "2Col",
+              }}
+            >
+              <DescriptionListGroup>
+                <DescriptionListTerm>Name</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {sbom.name}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>Author</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {sbom.authors}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>Published</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {formatDate(sbom.published)}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            </DescriptionList>
+          </GridItem>
+        </Grid>
+      </CardBody>
+    </Card>
   );
 };
 
@@ -70,7 +78,7 @@ export const CVEsChart: React.FC<CVEsChartProps> = ({ data }) => {
       const result: ChartData = {
         severity: severity as Severity,
         legend: severityProps.name,
-        color: severityProps.shieldIconColor.value,
+        color: severityProps.color.value,
         count: count,
       };