ui: add caching to vulnerability reports (PROJQUAY-7250)

web/cypress/e2e/packages-report.cy.ts

@@ -44,10 +44,8 @@ describe('Packages Report Page', () => {
       {fixture: 'security/noPackages.json'},
     ).as('getSecurityReport');
     cy.visit('/repository/user1/hello-world/tag/security?tab=packages');
-    cy.contains('Quay Security Reporting does not recognize any packages');
-    cy.contains('No known patches are available');
-    cy.get('[data-testid="packages-chart"]').contains('0').should('exist');
-    cy.get('td[data-label="Package Name"]').should('have.length', 0);
+    cy.contains('Security scan is not supported.');
+    cy.contains('Image does not have content the scanner recognizes.');
   });
 
   it('filter by name', () => {

web/src/hooks/UseManifestSecurity.ts

@@ -0,0 +1,33 @@
+import {useQuery} from '@tanstack/react-query';
+import {fetchSecurityDetails} from 'src/resources/ManifestSecurityResource';
+
+export function useManifestSecurity(
+  org: string,
+  repo: string,
+  digest: string,
+  enabled = true,
+) {
+  const {
+    data: securityDetails,
+    isLoading: isSecurityDetailsLoading,
+    isError: isSecurityDetailsError,
+    error: securityDetailsError,
+  } = useQuery(
+    ['manifestsecurity', org, repo, digest],
+    ({signal}) => fetchSecurityDetails(org, repo, digest, signal),
+    {
+      enabled: enabled,
+      staleTime: 1000 * 60 * 5,
+      cacheTime: 1000 * 60 * 15,
+      retry: 3,
+      retryDelay: (attempt) => attempt * 1000, // 1s, 2s, 3s
+    },
+  );
+
+  return {
+    securityDetails,
+    isSecurityDetailsError,
+    securityDetailsError,
+    isSecurityDetailsLoading: isSecurityDetailsLoading,
+  };
+}

web/src/libs/utils.ts

@@ -1,6 +1,6 @@
-import {VulnerabilitySeverity} from 'src/resources/TagResource';
 import moment from 'moment';
 import {ITeamMember} from 'src/hooks/UseMembers';
+import {VulnerabilitySeverity} from 'src/resources/ManifestSecurityResource';
 
 export function getSeverityColor(severity: VulnerabilitySeverity) {
   switch (severity) {

web/src/resources/ManifestSecurityResource.ts

@@ -0,0 +1,84 @@
+import axios, {AxiosResponse} from 'axios';
+import {assertHttpCode} from './ErrorHandling';
+
+export interface Data {
+  Layer: Layer;
+}
+export interface Layer {
+  Name: string;
+  ParentName: string;
+  NamespaceName: string;
+  IndexedByVersion: number;
+  Features: Feature[];
+}
+
+export interface Feature {
+  Name: string;
+  VersionFormat: string;
+  NamespaceName: string;
+  AddedBy: string;
+  Version: string;
+  Vulnerabilities?: Vulnerability[];
+}
+
+export interface Vulnerability {
+  Severity: VulnerabilitySeverity;
+  NamespaceName: string;
+  Link: string;
+  FixedBy: string;
+  Description: string;
+  Name: string;
+  Metadata: VulnerabilityMetadata;
+}
+
+export interface VulnerabilityMetadata {
+  UpdatedBy: string;
+  RepoName: string;
+  RepoLink: string;
+  DistroName: string;
+  DistroVersion: string;
+  NVD: {
+    CVSSv3: {
+      Vectors: string;
+      Score: number;
+    };
+  };
+}
+
+export enum VulnerabilitySeverity {
+  Critical = 'Critical',
+  High = 'High',
+  Medium = 'Medium',
+  Low = 'Low',
+  Negligible = 'Negligible',
+  None = 'None',
+  Unknown = 'Unknown',
+}
+
+export const VulnerabilityOrder = {
+  [VulnerabilitySeverity.Critical]: 0,
+  [VulnerabilitySeverity.High]: 1,
+  [VulnerabilitySeverity.Medium]: 2,
+  [VulnerabilitySeverity.Low]: 3,
+  [VulnerabilitySeverity.Negligible]: 4,
+  [VulnerabilitySeverity.Unknown]: 5,
+};
+
+export interface SecurityDetailsResponse {
+  status: string;
+  data: Data;
+}
+
+export async function fetchSecurityDetails(
+  org: string,
+  repo: string,
+  digest: string,
+  signal: AbortSignal,
+) {
+  const response: AxiosResponse<SecurityDetailsResponse> = await axios.get(
+    `/api/v1/repository/${org}/${repo}/manifest/${digest}/security?vulnerabilities=true`,
+    {signal},
+  );
+  assertHttpCode(response.status, 200);
+  return response.data as SecurityDetailsResponse;
+}

web/src/resources/TagResource.ts

@@ -6,6 +6,7 @@ import {
   ResourceError,
   throwIfError,
 } from './ErrorHandling';
+import {SecurityDetailsResponse} from './ManifestSecurityResource';
 
 export interface TagsResponse {
   page: number;
@@ -72,72 +73,6 @@ export interface ManifestByDigestResponse {
   layers?: any;
 }
 
-export interface SecurityDetailsResponse {
-  status: string;
-  data: Data;
-}
-export interface Data {
-  Layer: Layer;
-}
-export interface Layer {
-  Name: string;
-  ParentName: string;
-  NamespaceName: string;
-  IndexedByVersion: number;
-  Features: Feature[];
-}
-export interface Feature {
-  Name: string;
-  VersionFormat: string;
-  NamespaceName: string;
-  AddedBy: string;
-  Version: string;
-  Vulnerabilities?: Vulnerability[];
-}
-
-export interface Vulnerability {
-  Severity: VulnerabilitySeverity;
-  NamespaceName: string;
-  Link: string;
-  FixedBy: string;
-  Description: string;
-  Name: string;
-  Metadata: VulnerabilityMetadata;
-}
-
-export interface VulnerabilityMetadata {
-  UpdatedBy: string;
-  RepoName: string;
-  RepoLink: string;
-  DistroName: string;
-  DistroVersion: string;
-  NVD: {
-    CVSSv3: {
-      Vectors: string;
-      Score: number;
-    };
-  };
-}
-
-export enum VulnerabilitySeverity {
-  Critical = 'Critical',
-  High = 'High',
-  Medium = 'Medium',
-  Low = 'Low',
-  Negligible = 'Negligible',
-  None = 'None',
-  Unknown = 'Unknown',
-}
-
-export const VulnerabilityOrder = {
-  [VulnerabilitySeverity.Critical]: 0,
-  [VulnerabilitySeverity.High]: 1,
-  [VulnerabilitySeverity.Medium]: 2,
-  [VulnerabilitySeverity.Low]: 3,
-  [VulnerabilitySeverity.Negligible]: 4,
-  [VulnerabilitySeverity.Unknown]: 5,
-};
-
 // TODO: Support cancelation signal here
 export async function getTags(
   org: string,
@@ -334,18 +269,6 @@ export async function getManifestByDigest(
   return response.data;
 }
 
-export async function getSecurityDetails(
-  org: string,
-  repo: string,
-  digest: string,
-) {
-  const response: AxiosResponse<SecurityDetailsResponse> = await axios.get(
-    `/api/v1/repository/${org}/${repo}/manifest/${digest}/security?vulnerabilities=true`,
-  );
-  assertHttpCode(response.status, 200);
-  return response.data;
-}
-
 export async function createTag(
   org: string,
   repo: string,