Merge pull request #558 from cisagov/494-vuln-rating-selection-bug

Fix Severity Rating Selection from Overview Bar Chart
cisagov · Aug 27, 2024 · 75c1c25 · 75c1c25
2 parents b7e0be8 + 97eefbc
commit 75c1c25
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 59 deletions.
diff --git a/frontend/src/components/Table/Table.tsx b/frontend/src/components/Table/Table.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useImperativeHandle } from 'react';
 import { Table as UsaTable } from '@trussworks/react-uswds';
-import { Query } from 'types';
+import { OrgQuery } from 'types/org-query';
 import {
   useTable,
   useExpanded,
@@ -25,7 +25,7 @@ interface TableProps<T extends object> {
   initialFilterBy?: Filters<T>;
   pageCount?: number;
   pageSize?: number;
-  fetchData?: (query: Query<T>) => void;
+  fetchData?: (query: OrgQuery<T>) => void;
   disableFilters?: boolean;
   renderPagination?: (table: TableInstance<T>) => JSX.Element;
   renderExpanded?: (row: Row<T>) => JSX.Element;

diff --git a/frontend/src/hooks/useDomainApi.ts b/frontend/src/hooks/useDomainApi.ts
@@ -18,14 +18,14 @@ export const useDomainApi = (showAll?: boolean) => {
   const { currentOrganization, apiPost, apiGet } = useAuthContext();
   const listDomains = useCallback(
     async (query: DomainQuery, doExport = false) => {
-      const { page, sort, filters, pageSize = PAGE_SIZE } = query;
+      const { page, filters, pageSize = PAGE_SIZE } = query;
 
       const tableFilters: any = filters
         .filter((f) => Boolean(f.value))
         .reduce(
           (accum, next) => ({
             ...accum,
-            [next.id]: next.value
+            [next.field]: next.value
           }),
           {}
         );
@@ -42,8 +42,6 @@ export const useDomainApi = (showAll?: boolean) => {
           body: {
             pageSize,
             page,
-            sort: sort[0]?.id ?? 'name',
-            order: sort[0]?.desc ? 'DESC' : 'ASC',
             filters: tableFilters
           }
         }

diff --git a/frontend/src/pages/Domains/Domains.tsx b/frontend/src/pages/Domains/Domains.tsx
@@ -35,6 +35,14 @@ export const Domains: React.FC = () => {
   const [filters, setFilters] = useState<Query<Domain>['filters']>([]);
   const [loadingError, setLoadingError] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [filterModel, setFilterModel] = useState({
+    items: filters.map((filter) => ({
+      id: filter.id,
+      field: filter.field,
+      value: filter.value,
+      operator: filter.operator
+    }))
+  });
 
   const fetchDomains = useCallback(
     async (q: Query<Domain>) => {
@@ -64,7 +72,6 @@ export const Domains: React.FC = () => {
     page: 0,
     pageSize: PAGE_SIZE,
     pageCount: 0,
-    sort: [],
     filters: filters
   });
 
@@ -73,7 +80,6 @@ export const Domains: React.FC = () => {
     fetchDomains({
       page: 1,
       pageSize: PAGE_SIZE,
-      sort: [],
       filters: []
     });
   }, [fetchDomains]);
@@ -182,21 +188,26 @@ export const Domains: React.FC = () => {
                 fetchDomains({
                   page: model.page + 1,
                   pageSize: model.pageSize,
-                  sort: paginationModel.sort,
                   filters: paginationModel.filters
                 });
               }}
               filterMode="server"
+              filterModel={filterModel}
               onFilterModelChange={(model) => {
                 const filters = model.items.map((item) => ({
                   id: item.field,
-                  value: item.value
+                  field: item.field,
+                  value: item.value,
+                  operator: item.operator
                 }));
                 setFilters(filters);
+                setFilterModel((prevFilterModel) => ({
+                  ...prevFilterModel,
+                  items: filters
+                }));
                 fetchDomains({
                   page: paginationModel.page + 1,
                   pageSize: paginationModel.pageSize,
-                  sort: paginationModel.sort,
                   filters: filters
                 });
               }}

diff --git a/frontend/src/pages/Risk/TopVulnerableDomains.tsx b/frontend/src/pages/Risk/TopVulnerableDomains.tsx
@@ -70,6 +70,11 @@ const TopVulnerableDomains = (props: { data: Point[] }) => {
   //Custom Bar Layer to allow for top to bottom tab navigation
   const CustomBarLayer = ({ bars }: { bars: any[]; [key: string]: any }) => {
     const reversedBars = [...bars].reverse();
+    const filteredVulnTableLink = '/inventory/vulnerabilities';
+    const filteredVulnTableLinkHandler = (
+      filteredVulnTableLink: string,
+      domain: string
+    ) => history.push(filteredVulnTableLink, { domain: domain });
     return reversedBars.map((bar) => (
       <Tooltip
         arrow
@@ -100,10 +105,20 @@ const TopVulnerableDomains = (props: { data: Point[] }) => {
           } in Domain:${' '}
           ${bar.data.indexValue}`}
             onClick={() => {
-              history.push(
-                `/inventory/vulnerabilities?domain=${bar.data.label}&severity=${bar.data.id}`
+              filteredVulnTableLinkHandler(
+                filteredVulnTableLink,
+                bar.data.indexValue
               );
             }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                filteredVulnTableLinkHandler(
+                  filteredVulnTableLink,
+                  bar.data.indexValue
+                );
+              }
+            }}
           />
         </g>
       </Tooltip>

diff --git a/frontend/src/pages/Risk/TopVulnerablePorts.tsx b/frontend/src/pages/Risk/TopVulnerablePorts.tsx
@@ -43,6 +43,15 @@ const TopVulnerablePorts = (props: { data: Point[] }) => {
               );
               window.location.reload();
             }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                history.push(
+                  `/inventory?filters[0][field]=services.port&filters[0][values][0]=n_${bar.data.indexValue}_n&filters[0][type]=any`
+                );
+                window.location.reload();
+              }
+            }}
           />
         </g>
       </Tooltip>

diff --git a/frontend/src/pages/Risk/VulnerabilityBarChart.tsx b/frontend/src/pages/Risk/VulnerabilityBarChart.tsx
@@ -23,6 +23,11 @@ const VulnerabilityBarChart = (props: {
   const { cardRoot, cardSmall, header, chartSmall } = RiskStyles.classesRisk;
   const [ariaLabel, setAriaLabel] = useState('');
   const ariaLiveRef = useRef<HTMLDivElement>(null);
+  const filteredVulnTableLink = '/inventory/vulnerabilities';
+  const filteredVulnTableLinkHandler = (
+    filteredVulnTableLink: string,
+    severity: string
+  ) => history.push(filteredVulnTableLink, { severity: severity });
 
   const CustomBarLayer = ({ bars }: { bars: any[]; [key: string]: any }) => (
     <>
@@ -45,10 +50,19 @@ const VulnerabilityBarChart = (props: {
               tabIndex={0}
               aria-label={`${bar.data.value} ${bar.data.indexValue} level severities in this organization.`}
               onClick={() => {
-                //To-Do: Fix onClick so that it correctly sends user to All Vulns table with severity level as a filter.
                 if (type === 'vulns') {
-                  history.push(
-                    `/inventory/vulnerabilities?severity=${bar.indexValue}`
+                  filteredVulnTableLinkHandler(
+                    `${filteredVulnTableLink}`,
+                    `${bar.data.indexValue}`
+                  );
+                }
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  filteredVulnTableLinkHandler(
+                    filteredVulnTableLink,
+                    bar.data.indexValue
                   );
                 }
               }}

diff --git a/frontend/src/pages/Scans/ScanTasksView.tsx b/frontend/src/pages/Scans/ScanTasksView.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Query, Scan } from 'types';
-import { ScanTask } from 'types';
+import { OrgQuery } from 'types/org-query';
+import { Scan, ScanTask } from 'types';
 import { useAuthContext } from 'context';
 // @ts-ignore:next-line
 import { formatDistanceToNow, parseISO } from 'date-fns';
@@ -117,7 +117,7 @@ export const ScanTasksView: React.FC = () => {
   const PAGE_SIZE = 15;
 
   const fetchScanTasks = useCallback(
-    async (query: Query<ScanTask>) => {
+    async (query: OrgQuery<ScanTask>) => {
       const { page, sort, filters } = query;
       try {
         const tableFilters: {