fix vulnerability report bugs

pluralsh · Dec 18, 2024 · daaecef · daaecef
1 parent 9095956
commit daaecef
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 50 deletions.
diff --git 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}
       />
     </ContentWrapperSC>
   )

diff --git 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 <GqlError error={error} />
+    if (error) return <GqlError error={error} />
 
-  return (
-    <FullHeightTableWrap css={{ flex: 1 }}>
-      <Table
-        virtualizeRows
-        data={data?.vulnerabilityReports?.edges || []}
-        columns={columns}
-        loading={!data && loading}
-        css={{ maxHeight: '100%' }}
-        onRowClick={(_e, row) => {
-          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.' }}
-      />
-    </FullHeightTableWrap>
-  )
-}
+    return (
+      <FullHeightTableWrap css={{ flex: 1 }}>
+        <Table
+          virtualizeRows
+          data={data?.vulnerabilityReports?.edges || []}
+          columns={columns}
+          loading={!data && loading}
+          css={{ maxHeight: '100%' }}
+          onRowClick={(_e, row) => {
+            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.' }}
+        />
+      </FullHeightTableWrap>
+    )
+  }
+)
 
 const columns = [ColImage, ColNamespaces, ColGrade, ColSummary, ColActions]