From 37e25f58bcfa9ae65a6f1a4a49efc92ffd19cc48 Mon Sep 17 00:00:00 2001 From: RachelElysia <71795832+RachelElysia@users.noreply.github.com> Date: Thu, 28 Aug 2025 09:10:29 -0400 Subject: [PATCH] Fleet UI: Allow software + os filter onto manage host page (#32350) --- .../SoftwareOSDetailsPage.tsx | 2 ++ .../tables/OSKernelsTable/OSKernelsTable.tsx | 10 +++++++++- .../OSKernelsTable/OSKernelsTableConfig.tsx | 10 +++++++++- .../hosts/ManageHostsPage/ManageHostsPage.tsx | 7 +++++++ .../HostsFilterBlock/HostsFilterBlock.tsx | 11 +++++++++++ .../components/HostsFilterBlock/_styles.scss | 5 +++++ frontend/utilities/url/index.ts | 18 ++++++++++++------ 7 files changed, 55 insertions(+), 8 deletions(-) diff --git a/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx b/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx index 1d249d709f..afa621202f 100644 --- a/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx +++ b/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx @@ -136,6 +136,8 @@ export const KernelsCard = ({ > { }; interface ISoftwareVulnerabilitiesTableProps { + osName: string; + osVersion: string; data: IOperatingSystemKernels[]; isLoading: boolean; className?: string; @@ -53,6 +55,8 @@ interface IRowProps extends Row { } const OSKernelsTable = ({ + osName, + osVersion, data, isLoading, className, @@ -76,7 +80,11 @@ const OSKernelsTable = ({ } }; - const tableHeaders = generateTableConfig({ teamId: teamIdForApi }); + const tableHeaders = generateTableConfig({ + teamId: teamIdForApi, + osName, + osVersion, + }); const rendersOsKernelsVersionCount = () => ( diff --git a/frontend/pages/SoftwarePage/components/tables/OSKernelsTable/OSKernelsTableConfig.tsx b/frontend/pages/SoftwarePage/components/tables/OSKernelsTable/OSKernelsTableConfig.tsx index 7ea4a830c8..5a35a31262 100644 --- a/frontend/pages/SoftwarePage/components/tables/OSKernelsTable/OSKernelsTableConfig.tsx +++ b/frontend/pages/SoftwarePage/components/tables/OSKernelsTable/OSKernelsTableConfig.tsx @@ -20,6 +20,8 @@ import VulnerabilitiesCell from "../VulnerabilitiesCell"; interface IOsKernelsTableConfigProps { teamId?: number; + osName: string; + osVersion: string; } type IHostCountCellProps = INumberCellProps; @@ -27,7 +29,11 @@ type IVersionCellProps = IStringCellProps; type IViewAllHostsLinkProps = CellProps; type IVulnCellProps = CellProps; -const generateTableConfig = ({ teamId }: IOsKernelsTableConfigProps) => { +const generateTableConfig = ({ + teamId, + osName, + osVersion, +}: IOsKernelsTableConfigProps) => { const tableHeaders = [ { title: "Version", @@ -101,6 +107,8 @@ const generateTableConfig = ({ teamId }: IOsKernelsTableConfigProps) => { queryParams={{ software_version_id: cellProps.row.original.id, team_id: teamId, + os_name: osName, + os_version: osVersion, }} className="software-link" rowHover diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx index 4dd1cd0f9a..de58533bc7 100644 --- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx +++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx @@ -1044,6 +1044,13 @@ const ManageHostsPage = ({ newQueryParams.software_id = softwareId; } else if (softwareVersionId) { newQueryParams.software_version_id = softwareVersionId; + // Software version can be combined with os name and os version + // e.g. Kernel version 6.8.0-71.71 (software version) on Ubuntu 24.04.2LTS (os name and os version) + if (osVersionId || (osName && osVersion)) { + newQueryParams.os_version_id = osVersionId; + newQueryParams.os_name = osName; + newQueryParams.os_version = osVersion; + } } else if (softwareTitleId) { newQueryParams.software_title_id = softwareTitleId; if (softwareStatus && teamIdForApi !== API_ALL_TEAMS_ID) { diff --git a/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx b/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx index 0f8fe818f1..c3579325e1 100644 --- a/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx +++ b/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/HostsFilterBlock.tsx @@ -652,6 +652,17 @@ const HostsFilterBlock = ({ case !!softwareStatus: return renderSoftwareInstallStatusBlock(); case !!softwareId || !!softwareVersionId || !!softwareTitleId: + // Software version can be combined with os name and os version + // e.g. Kernel version 6.8.0-71.71 (software version) on Ubuntu 24.04.2LTS (os name and os version) + // Note: This is our only double filter available in the UI, are there others? + if (!!osVersionId || (!!osName && !!osVersion)) { + return ( +
+ {renderSoftwareFilterBlock()} + {renderOSFilterBlock()} +
+ ); + } return renderSoftwareFilterBlock(); case !!mdmId: return renderMDMSolutionFilterBlock(); diff --git a/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/_styles.scss index 69bfe130b3..b571b0b0b8 100644 --- a/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/_styles.scss +++ b/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/_styles.scss @@ -36,4 +36,9 @@ width: 150px; // Fits all dropdown options without resizing } } + + &__multi-filter { + display: flex; + gap: $pad-small; + } } diff --git a/frontend/utilities/url/index.ts b/frontend/utilities/url/index.ts index b2dca47655..17301c7309 100644 --- a/frontend/utilities/url/index.ts +++ b/frontend/utilities/url/index.ts @@ -252,18 +252,24 @@ export const reconcileMutuallyExclusiveHostParams = ({ case !!softwareStatus || !!softwareTitleId || !!softwareVersionId || - !!softwareId: - return reconcileSoftwareParams({ + !!softwareId: { + const params: Record = reconcileSoftwareParams({ teamId, softwareId, softwareVersionId, softwareTitleId, softwareStatus, }); - case !!softwareVersionId: - return { software_version_id: softwareVersionId }; - case !!softwareId: - return { software_id: softwareId }; + // Software version can be combined with os name and os version + // e.g. Kernel version 6.8.0-71.71 (software version) on Ubuntu 24.04.2LTS (os name and os version) + if (osVersionId) { + params.os_version_id = osVersionId; + } else if (osName && osVersion) { + params.os_name = osName; + params.os_version = osVersion; + } + return params; + } case !!osVersionId: return { os_version_id: osVersionId }; case !!osName && !!osVersion: