Add SBOM's packages table view (#65)

client/src/app/Constants.ts

@@ -9,6 +9,7 @@ export const TablePersistenceKeyPrefixes = {
   vulnerabilities: "vn",
   sboms: "sb",
   packages: "pk",
+  sbom_packages: "spk",
 };
 
 // URL param prefixes: should be short, must be unique for each table that uses one

client/src/app/api/models.ts

@@ -35,11 +35,6 @@ export interface HubPaginatedResult<T> {
 
 // Base
 
-export interface PackageBase {
-  uuid: string;
-  purl: string;
-}
-
 export interface SBOMBase {
   id: string;
   type: "CycloneDX" | "SPDX";
@@ -101,7 +96,9 @@ export interface VulnerabilityAdvisory extends AdvisoryBase {
 
 // Package
 
-export interface Package extends PackageBase {
+export interface Package {
+  uuid: string;
+  purl: string;
   // This field is added by the UI
   package?: {
     name: string;
@@ -115,6 +112,12 @@ export interface Package extends PackageBase {
   related_sboms: SBOMBase[];
 }
 
+export interface SBOMPackage {
+  id: string;
+  name: string;
+  purl: string[];
+}
+
 // SBOM
 
 export interface SBOM extends SBOMBase {

client/src/app/api/rest.ts

@@ -11,6 +11,7 @@ import {
   ImporterReport,
   Package,
   SBOM,
+  SBOMPackage,
   Vulnerability,
 } from "./models";
 
@@ -120,7 +121,7 @@ export const downloadSBOMById = (id: number | string) =>
 export const getPackagesBySbomId = (
   id: number | string,
   params: HubRequestParams = {}
-) => getHubPaginatedResult<Package>(`${SBOMS}/${id}/packages`, params);
+) => getHubPaginatedResult<SBOMPackage>(`${SBOMS}/${id}/packages`, params);
 
 export const getVulnerabilitiesBySbomId = (id: string | number) =>
   axios

client/src/app/components/PackageQualifiers.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import { Label } from "@patternfly/react-core";
+
+interface PackageQualifiersProps {
+  value: { [key: string]: string }
+}
+
+export const PackageQualifiers: React.FC<PackageQualifiersProps> = ({
+  value,
+}) => {
+  return <>
+    {Object.entries(value).map(([k, v], index) => (
+      <Label
+        key={index}
+        isCompact
+      >{`${k}=${v}`}</Label>
+    ))}
+  </>
+};