Fleet UI: Allow software + os filter onto manage host page (#32350)

frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx

@@ -136,6 +136,8 @@ export const KernelsCard = ({
   >
     <CardHeader header="Kernels" />
     <OSKernelsTable
+      osName={osVersion.name_only}
+      osVersion={osVersion.version}
       data={osVersion.kernels}
       isLoading={isLoading}
       router={router}

frontend/pages/SoftwarePage/components/tables/OSKernelsTable/OSKernelsTable.tsx

@@ -39,6 +39,8 @@ const NoKernelsDetected = (): JSX.Element => {
 };
 
 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 = () => (
     <TableCount name="items" count={data?.length} />

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<IOperatingSystemKernels>;
@@ -27,7 +29,11 @@ type IVersionCellProps = IStringCellProps<IOperatingSystemKernels>;
 type IViewAllHostsLinkProps = CellProps<IOperatingSystemKernels>;
 type IVulnCellProps = CellProps<IOperatingSystemKernels, string[] | null>;
 
-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

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) {

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 (
+              <div className={`${baseClass}__multi-filter`}>
+                {renderSoftwareFilterBlock()}
+                {renderOSFilterBlock()}
+              </div>
+            );
+          }
           return renderSoftwareFilterBlock();
         case !!mdmId:
           return renderMDMSolutionFilterBlock();

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;
+  }
 }

frontend/utilities/url/index.ts

@@ -252,18 +252,24 @@ export const reconcileMutuallyExclusiveHostParams = ({
     case !!softwareStatus ||
       !!softwareTitleId ||
       !!softwareVersionId ||
-      !!softwareId:
-      return reconcileSoftwareParams({
+      !!softwareId: {
+      const params: Record<string, unknown> = 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: