perf: use pre-fetched advisory severity summary on SBOM list

client/src/app/components/VulnerabilityGallery.tsx

@@ -8,15 +8,16 @@ import type { ExtendedSeverity } from "@app/api/models";
 import { SeverityShieldAndText } from "@app/components/SeverityShieldAndText";
 
 interface VulnerabilityGalleryProps {
-  severities: { [key in ExtendedSeverity]: number };
+  severities: Partial<{ [key in ExtendedSeverity]: number }>;
 }
 
 export const VulnerabilityGallery: React.FC<VulnerabilityGalleryProps> = ({
   severities,
 }) => {
-  const severityCount = Object.values(severities).reduce((prev, acc) => {
-    return prev + acc;
-  }, 0);
+  const severityCount = Object.values(severities).reduce(
+    (prev, acc) => prev + (acc ?? 0),
+    0,
+  );
 
   return (
     <Flex

client/src/app/pages/sbom-list/components/SbomVulnerabilities.tsx

@@ -1,31 +1,12 @@
 import type React from "react";
 
-import { Skeleton } from "@patternfly/react-core";
-
-import { LoadingWrapper } from "@app/components/LoadingWrapper";
-import { TableCellError } from "@app/components/TableCellError";
+import type { RequestedFieldHashMapHashMap } from "@app/client";
 import { VulnerabilityGallery } from "@app/components/VulnerabilityGallery";
-import { useVulnerabilitiesOfSbom } from "@app/hooks/domain-controls/useVulnerabilitiesOfSbom";
 
 interface SBOMVulnerabilitiesProps {
-  sbomId: string;
+  advisories?: RequestedFieldHashMapHashMap;
 }
 
 export const SBOMVulnerabilities: React.FC<SBOMVulnerabilitiesProps> = ({
-  sbomId,
-}) => {
-  const { data, isFetching, fetchError } = useVulnerabilitiesOfSbom(sbomId);
-
-  return (
-    <LoadingWrapper
-      isFetching={isFetching}
-      fetchError={fetchError}
-      isFetchingState={<Skeleton screenreaderText="Loading contents" />}
-      fetchErrorState={(error) => <TableCellError error={error} />}
-    >
-      <VulnerabilityGallery
-        severities={data.summary.vulnerabilityStatus.affected.severities}
-      />
-    </LoadingWrapper>
-  );
-};
+  advisories,
+}) => <VulnerabilityGallery severities={advisories ?? {}} />;

client/src/app/pages/sbom-list/sbom-context.ts

@@ -2,7 +2,11 @@ import React from "react";
 
 import type { AxiosError } from "axios";
 
-import type { SbomHead, SourceDocument } from "@app/client";
+import type {
+  RequestedFieldHashMapHashMap,
+  SbomHead,
+  SourceDocument,
+} from "@app/client";
 import type { BulkSelectionValues } from "@app/hooks/selection";
 import type { ITableControls } from "@app/hooks/table-controls";
 
@@ -16,6 +20,7 @@ interface ISbomSearchContext {
           name: string;
           version?: string | null;
         }>;
+        advisories?: RequestedFieldHashMapHashMap;
       },
     | "name"
     | "version"

client/src/app/pages/sbom-list/sbom-provider.tsx

@@ -133,6 +133,8 @@ export const SbomSearchProvider: React.FunctionComponent<ISbomProvider> = ({
     (tableControlState.filterState.filterValues.labels ?? []).map((label) =>
       splitStringAsKeyValue(label),
     ),
+    false,
+    true,
   );
 
   const tableControls = useTableControlProps({

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

@@ -219,7 +219,7 @@ export const SbomTable: React.FC = () => {
                       width={20}
                       {...getTdProps({ columnKey: "vulnerabilities" })}
                     >
-                      <SBOMVulnerabilities sbomId={item.id} />
+                      <SBOMVulnerabilities advisories={item.advisories} />
                     </Td>
                     <Td isActionCell>
                       <ActionsColumn

client/src/app/queries/sboms.ts

@@ -61,11 +61,12 @@ export const useFetchSBOMs = (
   params: HubRequestParams = {},
   labels: Label[] = [],
   disableQuery = false,
+  advisories = false,
 ) => {
   const labelQuery = labelRequestParamsQuery(labels);
 
   const { data, isLoading, error, refetch } = useQuery({
-    queryKey: [SBOMsQueryKey, groupId, params, labelQuery],
+    queryKey: [SBOMsQueryKey, groupId, params, labelQuery, advisories],
     queryFn: () => {
       const { q, ...rest } = requestParamsQuery(params);
       return listSboms({
@@ -74,6 +75,7 @@ export const useFetchSBOMs = (
           ...rest,
           group: groupId ? [groupId] : [],
           q: [q, labelQuery].filter((e) => e).join("&"),
+          advisories,
         },
       });
     },