diff --git a/assets/src/components/security/vulnerabilities/VulnReports.tsx b/assets/src/components/security/vulnerabilities/VulnReports.tsx
index 56f274104..71bc2f335 100644
--- a/assets/src/components/security/vulnerabilities/VulnReports.tsx
+++ b/assets/src/components/security/vulnerabilities/VulnReports.tsx
@@ -6,6 +6,7 @@ import {
Input,
SearchIcon,
SubTab,
+ useSetBreadcrumbs,
} from '@pluralsh/design-system'
import { useSetPageHeaderContent } from 'components/cd/ContinuousDeployment'
import { ClusterSelect } from 'components/cd/utils/ClusterSelect'
@@ -20,6 +21,20 @@ import { ComponentProps, useMemo, useState } from 'react'
import { useLocation, useNavigate, useParams } from 'react-router-dom'
import styled, { useTheme } from 'styled-components'
import { VulneratbilityReportsTable } from './VulnReportsTable'
+import {
+ SECURITY_REL_PATH,
+ SECURITY_ABS_PATH,
+ VULNERABILITY_REPORTS_ABS_PATH,
+ VULNERABILITY_REPORTS_REL_PATH,
+} from 'routes/securityRoutesConsts'
+
+const breadcrumbs = [
+ { label: SECURITY_REL_PATH, url: SECURITY_ABS_PATH },
+ {
+ label: VULNERABILITY_REPORTS_REL_PATH,
+ url: VULNERABILITY_REPORTS_ABS_PATH,
+ },
+]
export const gradeToSeverityMap: Record<
VulnReportGrade | 'All',
@@ -34,6 +49,7 @@ export const gradeToSeverityMap: Record<
}
export function VulnerabilityReports() {
+ useSetBreadcrumbs(breadcrumbs)
const navigate = useNavigate()
const { pathname } = useLocation()
const { clusterId = '' } = useParams()
@@ -125,6 +141,7 @@ export function VulnerabilityReports() {
selectedClusters={selectedClusters}
selectedNamespaces={selectedNamespaces}
selectedGrade={selectedGrade === 'All' ? undefined : selectedGrade}
+ reportsQ={throttledReportsQ}
/>
)
diff --git a/assets/src/components/security/vulnerabilities/VulnReportsTable.tsx b/assets/src/components/security/vulnerabilities/VulnReportsTable.tsx
index 93448abe8..7d329b4dc 100644
--- a/assets/src/components/security/vulnerabilities/VulnReportsTable.tsx
+++ b/assets/src/components/security/vulnerabilities/VulnReportsTable.tsx
@@ -9,6 +9,7 @@ import {
useVulnerabilityReportsQuery,
VulnReportGrade,
} from 'generated/graphql'
+import { memo } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { getVulnerabilityReportDetailsPath } from 'routes/securityRoutesConsts'
import {
@@ -19,57 +20,62 @@ import {
ColSummary,
} from './VulnReportsTableCols'
-export function VulneratbilityReportsTable({
- selectedClusters,
- selectedNamespaces,
- selectedGrade,
-}: {
- selectedClusters?: string[]
- selectedNamespaces?: string[]
- selectedGrade?: VulnReportGrade
-}) {
- const { clusterId = '' } = useParams()
- const navigate = useNavigate()
- const { data, loading, error, fetchNextPage, setVirtualSlice } =
- useFetchPaginatedData(
- {
- queryHook: useVulnerabilityReportsQuery,
- keyPath: ['vulnerabilityReports'],
- },
- {
- clusters: selectedClusters,
- namespaces: selectedNamespaces,
- grade: selectedGrade,
- }
- )
+export const VulneratbilityReportsTable = memo(
+ function VulneratbilityReportsTable({
+ selectedClusters,
+ selectedNamespaces,
+ selectedGrade,
+ reportsQ,
+ }: {
+ selectedClusters?: string[]
+ selectedNamespaces?: string[]
+ selectedGrade?: VulnReportGrade
+ reportsQ?: string
+ }) {
+ const { clusterId = '' } = useParams()
+ const navigate = useNavigate()
+ const { data, loading, error, fetchNextPage, setVirtualSlice } =
+ useFetchPaginatedData(
+ {
+ queryHook: useVulnerabilityReportsQuery,
+ keyPath: ['vulnerabilityReports'],
+ },
+ {
+ clusters: selectedClusters,
+ namespaces: selectedNamespaces,
+ grade: selectedGrade,
+ q: reportsQ || undefined,
+ }
+ )
- if (error) return
+ if (error) return
- return (
-
- {
- navigate(
- getVulnerabilityReportDetailsPath({
- clusterId,
- vulnerabilityReportId: row.original.node?.id,
- })
- )
- }}
- hasNextPage={data?.vulnerabilityReports?.pageInfo?.hasNextPage}
- isFetchingNextPage={loading}
- fetchNextPage={fetchNextPage}
- reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS}
- onVirtualSliceChange={setVirtualSlice}
- emptyStateProps={{ message: 'No vulnerability reports found.' }}
- />
-
- )
-}
+ return (
+
+ {
+ navigate(
+ getVulnerabilityReportDetailsPath({
+ clusterId,
+ vulnerabilityReportId: row.original.node?.id,
+ })
+ )
+ }}
+ hasNextPage={data?.vulnerabilityReports?.pageInfo?.hasNextPage}
+ isFetchingNextPage={loading}
+ fetchNextPage={fetchNextPage}
+ reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS}
+ onVirtualSliceChange={setVirtualSlice}
+ emptyStateProps={{ message: 'No vulnerability reports found.' }}
+ />
+
+ )
+ }
+)
const columns = [ColImage, ColNamespaces, ColGrade, ColSummary, ColActions]