Fleet UI: Filter by low disk space hosts on various platforms (#8647)

changes/bug-8546-low-disk-space-by-platform-filter

@@ -0,0 +1 @@
+* UI allows for filtering low disk space hosts by platform!

frontend/pages/DashboardPage/DashboardPage.tsx

@@ -413,6 +413,7 @@ const DashboardPage = (): JSX.Element => {
         lowDiskSpaceCount={lowDiskSpaceCount}
         isLoadingHosts={isHostSummaryFetching}
         showHostsUI={showHostsUI}
+        selectedPlatformLabelId={selectedPlatformLabelId}
       />
     ),
   });

frontend/pages/DashboardPage/cards/LowDiskSpaceHosts/LowDiskSpaceHosts.tsx

@@ -12,6 +12,7 @@ interface IHostSummaryProps {
   lowDiskSpaceCount: number;
   isLoadingHosts: boolean;
   showHostsUI: boolean;
+  selectedPlatformLabelId?: number;
 }
 
 const LowDiskSpaceHosts = ({
@@ -19,6 +20,7 @@ const LowDiskSpaceHosts = ({
   lowDiskSpaceCount,
   isLoadingHosts,
   showHostsUI,
+  selectedPlatformLabelId,
 }: IHostSummaryProps): JSX.Element => {
   // build the manage hosts URL filtered by low disk space only
   // currently backend cannot filter by both low disk space and label
@@ -26,7 +28,9 @@ const LowDiskSpaceHosts = ({
     low_disk_space: lowDiskSpaceGb,
   };
   const queryString = buildQueryStringFromParams(queryParams);
-  const endpoint = PATHS.MANAGE_HOSTS;
+  const endpoint = selectedPlatformLabelId
+    ? PATHS.MANAGE_HOSTS_LABEL(selectedPlatformLabelId)
+    : PATHS.MANAGE_HOSTS;
   const path = `${endpoint}?${queryString}`;
 
   return (

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx

@@ -1560,6 +1560,13 @@ const ManageHostsPage = ({
     ) {
       const renderFilterPill = () => {
         switch (true) {
+          // backend allows for pill combos label x low disk space
+          case showSelectedLabel && !!lowDiskSpaceHosts:
+            return (
+              <>
+                {renderLabelFilterPill()} {renderLowDiskSpaceFilterBlock()}
+              </>
+            );
           case showSelectedLabel:
             return renderLabelFilterPill();
           case !!policyId:

frontend/pages/hosts/ManageHostsPage/_styles.scss

@@ -242,6 +242,7 @@
     display: flex;
     align-items: center;
     margin-bottom: $pad-medium;
+    gap: $pad-small; // between multiple filter pills
   }
 
   &__policies-filter-pill {

frontend/pages/hosts/ManageHostsPage/components/FilterPill/FilterPill.tsx

@@ -35,7 +35,10 @@ const FilterPill = ({
       aria-label={`hosts filtered by ${label}`}
     >
       <>
-        <span data-tip={tooltipDescription} data-for="filter-pill-tooltip">
+        <span
+          data-tip={tooltipDescription}
+          data-for={`filter-pill-tooltip-${label}`}
+        >
           <div className={labelClasses}>
             {icon && <img src={icon} alt="" />}
             {label}
@@ -55,7 +58,7 @@ const FilterPill = ({
             place="bottom"
             effect="solid"
             backgroundColor="#3e4771"
-            id="filter-pill-tooltip"
+            id={`filter-pill-tooltip-${label}`}
             data-html
           >
             <span>{tooltipDescription}</span>

frontend/utilities/url/index.ts

@@ -68,6 +68,11 @@ export const reconcileMutuallyExclusiveHostParams = ({
   osVersion,
 }: IMutuallyExclusiveHostParams): Record<string, unknown> => {
   if (label) {
+    // backend api now allows label x low disk space
+    // all other params are still mutually exclusive
+    if (lowDiskSpaceHosts) {
+      return { low_disk_space: lowDiskSpaceHosts };
+    }
     return {};
   }