diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SoftwareVulnOSVersions.tsx b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SoftwareVulnOSVersions.tsx index 3a4dd631d2..e18fe84096 100644 --- a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SoftwareVulnOSVersions.tsx +++ b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SoftwareVulnOSVersions.tsx @@ -1,9 +1,13 @@ -import React, { useMemo } from "react"; +import React, { useCallback, useMemo } from "react"; +import { InjectedRouter } from "react-router"; + +import PATHS from "router/paths"; import { IVulnerability } from "interfaces/vulnerability"; - +import { buildQueryStringFromParams } from "utilities/url"; import Card from "components/Card"; import TableContainer from "components/TableContainer"; + import generateColumnConfigs from "./SwVulnOSTableConfig"; const baseClass = "software-vuln-os-versions"; @@ -11,13 +15,30 @@ const baseClass = "software-vuln-os-versions"; interface ISoftwareVulnOSVersions { osVersions: IVulnerability["os_versions"]; isPremiumTier: boolean; + router: InjectedRouter; } const SoftwareVulnOSVersions = ({ osVersions, isPremiumTier, + router, }: ISoftwareVulnOSVersions) => { - const columnConfigs = useMemo(() => generateColumnConfigs(isPremiumTier), []); + const columnConfigs = useMemo(() => generateColumnConfigs(isPremiumTier), [ + isPremiumTier, + ]); + + const onSelectSingleRow = useCallback( + ({ original: { os_version_id } }) => { + if (!os_version_id) { + return; + } + + router.push( + `${PATHS.MANAGE_HOSTS}?${buildQueryStringFromParams({ os_version_id })}` + ); + }, + [router] + ); const renderVulnerableOSTable = () => { return ( @@ -32,6 +53,8 @@ const SoftwareVulnOSVersions = ({ emptyComponent={() => <>} showMarkAllPages={false} isAllPagesSelected={false} + disableMultiRowSelect + onSelectSingleRow={onSelectSingleRow} /> ); }; diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SwVulnOSTableConfig.tsx b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SwVulnOSTableConfig.tsx index f70d062779..4764338b03 100644 --- a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SwVulnOSTableConfig.tsx +++ b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SwVulnOSTableConfig.tsx @@ -69,7 +69,11 @@ const generateColumnConfigs = (isPremiumTier: boolean): Column[] => { return ( <> - + ); }, diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SoftwareVulnSoftwareVersions.tsx b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SoftwareVulnSoftwareVersions.tsx index de2be0ee24..3f4b0d36b1 100644 --- a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SoftwareVulnSoftwareVersions.tsx +++ b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SoftwareVulnSoftwareVersions.tsx @@ -1,7 +1,12 @@ -import React, { useMemo } from "react"; +import React, { useCallback, useMemo } from "react"; + +import { InjectedRouter } from "react-router"; import { IVulnerability } from "interfaces/vulnerability"; +import PATHS from "router/paths"; +import { buildQueryStringFromParams } from "utilities/url"; + import Card from "components/Card"; import TableContainer from "components/TableContainer"; @@ -12,14 +17,32 @@ const baseClass = "software-vuln-software-versions"; interface ISoftwareVulnSoftwareVersions { vulnSoftware: IVulnerability["software"]; isPremiumTier: boolean; + router: InjectedRouter; } const SoftwareVulnSoftwareVersions = ({ vulnSoftware, isPremiumTier, + router, }: ISoftwareVulnSoftwareVersions) => { - const columnConfigs = useMemo(() => generateColumnConfigs(isPremiumTier), []); + const columnConfigs = useMemo(() => generateColumnConfigs(isPremiumTier), [ + isPremiumTier, + ]); + const onSelectSingleRow = useCallback( + ({ original: { id: software_title_id } }) => { + if (!software_title_id) { + return; + } + + router.push( + `${PATHS.MANAGE_HOSTS}?${buildQueryStringFromParams({ + software_title_id, + })}` + ); + }, + [router] + ); const renderVulnerableSoftwareTable = () => { return ( <>} showMarkAllPages={false} isAllPagesSelected={false} + disableMultiRowSelect + onSelectSingleRow={onSelectSingleRow} /> ); }; diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SwVulnSwTableConfig.tsx b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SwVulnSwTableConfig.tsx index aa15c555cd..86116b523f 100644 --- a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SwVulnSwTableConfig.tsx +++ b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SwVulnSwTableConfig.tsx @@ -25,18 +25,6 @@ interface IStringCellProps extends ICellProps { }; } -interface INumberCellProps extends ICellProps { - cell: { - value: number; - }; -} - -interface IVulnSoftwareCellProps extends ICellProps { - cell: { - value: IVulnerabilitySoftware; - }; -} - const generateColumnConfigs = (isPremiumTier: boolean): Column[] => { const configs = [ { @@ -86,6 +74,7 @@ const generateColumnConfigs = (isPremiumTier: boolean): Column[] => { ); diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnerabilityDetailsPage.tsx b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnerabilityDetailsPage.tsx index a3c62264a3..f47f06800a 100644 --- a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnerabilityDetailsPage.tsx +++ b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnerabilityDetailsPage.tsx @@ -74,12 +74,14 @@ const SoftwareVulnerabilityDetailsPage = ({ )} {!!vuln.software && vuln.software.length > 0 && ( )} diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/_styles.scss b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/_styles.scss index 3e6a7bdf02..bbe910cd13 100644 --- a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/_styles.scss +++ b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/_styles.scss @@ -47,14 +47,6 @@ justify-content: space-between; align-items: center; - // for showing and hiding "view all hosts" link on hover - .view-all-hosts-link { - opacity: 0; - transition: opacity 250ms; - &:hover { - opacity: 1; - } - } .w250 { min-width: initial; height: min-content; diff --git a/frontend/pages/hosts/details/cards/Queries/HostQueries.tsx b/frontend/pages/hosts/details/cards/Queries/HostQueries.tsx index 6e1ebee7a9..dc9030215e 100644 --- a/frontend/pages/hosts/details/cards/Queries/HostQueries.tsx +++ b/frontend/pages/hosts/details/cards/Queries/HostQueries.tsx @@ -107,7 +107,7 @@ const HostQueries = ({ disableCount disableMultiRowSelect isLoading={false} // loading state handled at parent level - {...{ onSelectSingleRow }} + onSelectSingleRow={onSelectSingleRow} /> )}