feat: add vulnerabilities by package

client/src/app/api/models.ts

@@ -60,6 +60,15 @@ export interface AdvisoryWithinVulnerability extends AdvisoryBase {
   severity?: Severity;
 }
 
+export interface AdvisoryWithinPackage {
+  status: {
+    status: string,
+    vulnerability: {
+      identifier: string
+    }
+  }[]
+}
+
 // Vulnerability
 
 export interface Vulnerability {
@@ -89,6 +98,7 @@ export interface VulnerabilityWithinAdvisory {
 export interface Package {
   uuid: string;
   purl: string;
+  advisories?: AdvisoryWithinPackage[]
 }
 
 export interface PackageWithinSBOM {

client/src/app/components/LoadingWrapper.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import ErrorState from "@patternfly/react-component-groups/dist/esm/ErrorState";
+
 import { Bullseye, Spinner } from "@patternfly/react-core";
 
+import { StateError } from "./StateError";
+
 export const LoadingWrapper = (props: {
   isFetching: boolean;
   fetchError?: Error;
@@ -14,7 +16,7 @@ export const LoadingWrapper = (props: {
       </Bullseye>
     );
   } else if (props.fetchError) {
-    return <ErrorState errorTitle="Error" />;
+    return <StateError />;
   } else {
     return props.children;
   }

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

@@ -12,11 +12,11 @@ import {
 import DetailsPage from "@patternfly/react-component-groups/dist/dynamic/DetailsPage";
 
 import { PathParam, useRouteParams } from "@app/Routes";
-import { LoadingWrapper } from "@app/components/LoadingWrapper";
 import { useFetchPackageById } from "@app/queries/packages";
 import { decomposePurl } from "@app/utils/utils";
 
 import { SbomsByPackage } from "./sboms-by-package";
+import { VulnerabilitiesByPackage } from "./vulnerabilities-by-package";
 
 export const PackageDetails: React.FC = () => {
   const packageId = useRouteParams(PathParam.PACKAGE_ID);
@@ -60,17 +60,11 @@ export const PackageDetails: React.FC = () => {
           actionButtons={[]}
           tabs={[
             {
-              eventKey: "cves",
-              title: "CVEs",
+              eventKey: "vulnerabilities",
+              title: "Vulnerabilities",
               children: (
                 <div className="pf-v5-u-m-md">
-                  <LoadingWrapper
-                    isFetching={isFetchingSbom}
-                    fetchError={fetchErrorSbom}
-                  >
-                    {/* {pkg && <RelatedCVEs cves={pkg?.related_cves || []} />} */}
-                    <p style={{ color: "red" }}>issue-412</p>
-                  </LoadingWrapper>
+                  {packageId && <VulnerabilitiesByPackage packageId={packageId} />}
                 </div>
               ),
             },
@@ -79,12 +73,7 @@ export const PackageDetails: React.FC = () => {
               title: "SBOMs",
               children: (
                 <div className="pf-v5-u-m-md">
-                  <LoadingWrapper
-                    isFetching={isFetchingSbom}
-                    fetchError={fetchErrorSbom}
-                  >
-                    {packageId && <SbomsByPackage packageId={packageId} />}
-                  </LoadingWrapper>
+                  {packageId && <SbomsByPackage packageId={packageId} />}
                 </div>
               ),
             },

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

@@ -4,31 +4,46 @@ import { NavLink } from "react-router-dom";
 import { Toolbar, ToolbarContent, ToolbarItem } from "@patternfly/react-core";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 
-import { VulnerabilityWithinAdvisory } from "@app/api/models";
 import { FilterToolbar, FilterType } from "@app/components/FilterToolbar";
-import { SeverityShieldAndText } from "@app/components/SeverityShieldAndText";
 import { SimplePagination } from "@app/components/SimplePagination";
 import {
-  ConditionalTableBody,
-  TableHeaderContentWithControls,
+    ConditionalTableBody,
+    TableHeaderContentWithControls,
+    TableRowContentWithControls,
 } from "@app/components/TableControls";
 import { useLocalTableControls } from "@app/hooks/table-controls";
+import { useFetchPackageById } from "@app/queries/packages";
+import { useWithUiId } from "@app/utils/query-utils";
 
-interface RelatedCVEsProps {
-  cves: VulnerabilityWithinAdvisory[];
+interface VulnerabilitiesByPackageProps {
+  packageId: string;
 }
 
-export const RelatedCVEs: React.FC<RelatedCVEsProps> = ({ cves }) => {
+export const VulnerabilitiesByPackage: React.FC<VulnerabilitiesByPackageProps> = ({ packageId }) => {
+  const {
+    pkg,
+    isFetching: isFetching,
+    fetchError: fetchError,
+  } = useFetchPackageById(packageId);
+
+  const tableData = React.useMemo(() => {
+    return (pkg?.advisories ?? []).flatMap(advisory => {
+      return advisory.status.map(status => ({ identifier: status.vulnerability.identifier }))
+    })
+  }, [pkg]);
+
+  const tableDataWithUiId = useWithUiId(
+    tableData,
+    (d) => `${d.identifier}-${Math.floor(Math.random() * 10000)}`
+  );
+
   const tableControls = useLocalTableControls({
-    tableName: "cves-table",
-    idProperty: "identifier",
-    items: cves,
+    tableName: "vulnerability-table",
+    idProperty: "_ui_unique_id",
+    items: tableDataWithUiId,
     isLoading: false,
     columnNames: {
       id: "ID",
-      description: "Description",
-      severity: "Severity",
-      datePublished: "Date published",
     },
     hasActionsColumn: true,
     isSortEnabled: false,
@@ -69,70 +84,51 @@ export const RelatedCVEs: React.FC<RelatedCVEsProps> = ({ cves }) => {
           <FilterToolbar showFiltersSideBySide {...filterToolbarProps} />
           <ToolbarItem {...paginationToolbarItemProps}>
             <SimplePagination
-              idPrefix="cves-table"
+              idPrefix="vulnerability-table"
               isTop
               paginationProps={paginationProps}
             />
           </ToolbarItem>
         </ToolbarContent>
       </Toolbar>
 
-      <Table {...tableProps} aria-label="CVEs table">
+      <Table {...tableProps} aria-label="vulnerability table">
         <Thead>
           <Tr>
             <TableHeaderContentWithControls {...tableControls}>
               <Th {...getThProps({ columnKey: "id" })} />
-              <Th {...getThProps({ columnKey: "description" })} />
-              <Th {...getThProps({ columnKey: "severity" })} />
-              <Th {...getThProps({ columnKey: "datePublished" })} />
             </TableHeaderContentWithControls>
           </Tr>
         </Thead>
         <ConditionalTableBody
-          isLoading={false}
-          isError={undefined}
-          isNoData={cves.length === 0}
+          isLoading={isFetching}
+          isError={!!fetchError}
+          isNoData={tableDataWithUiId.length === 0}
           numRenderedColumns={numRenderedColumns}
         >
-          {currentPageItems?.map((item) => {
+          {currentPageItems?.map((item, rowIndex) => {
             return (
-              <Tbody key={item.identifier}>
+              <Tbody key={item._ui_unique_id}>
                 <Tr {...getTrProps({ item })}>
-                  <Td width={15} {...getTdProps({ columnKey: "id" })}>
-                    <NavLink to={`/cves/${item.identifier}`}>
-                      {item.identifier}
-                    </NavLink>
-                  </Td>
-                  <Td
-                    width={50}
-                    modifier="truncate"
-                    {...getTdProps({ columnKey: "description" })}
-                  >
-                    {/* {item.description} */}
-                  </Td>
-                  <Td
-                    width={15}
-                    modifier="truncate"
-                    {...getTdProps({ columnKey: "severity" })}
-                  >
-                    <SeverityShieldAndText value={item.severity} />
-                  </Td>
-                  <Td
-                    width={15}
-                    modifier="truncate"
-                    {...getTdProps({ columnKey: "datePublished" })}
+                  <TableRowContentWithControls
+                    {...tableControls}
+                    item={item}
+                    rowIndex={rowIndex}
                   >
-                    {/* {formatDate(item.published)} */}
-                    missing
-                  </Td>
+                    <Td width={15} {...getTdProps({ columnKey: "id" })}>
+                      <NavLink to={`/vulnerabilities/${item.identifier}`}>
+                        {item.identifier}
+                      </NavLink>
+                    </Td>
+                  </TableRowContentWithControls>
                 </Tr>
               </Tbody>
             );
           })}
         </ConditionalTableBody>
       </Table>
       <SimplePagination
-        idPrefix="cves-table"
+        idPrefix="vulnerability-table"
         isTop={false}
         isCompact
         paginationProps={paginationProps}

client/src/app/queries/packages.ts

@@ -34,7 +34,7 @@ export const useFetchPackages = (
 
 export const useFetchPackageById = (id?: number | string) => {
   const { data, isLoading, error } = useQuery({
-    queryKey: [, id],
+    queryKey: [PackagesQueryKey, id],
     queryFn: () =>
       id === undefined ? Promise.resolve(undefined) : getPackageById(id),
   });