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]