From 3a9f45d6f88fbb4722cf07c60ae4e8bbfa43b46a Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 10 Nov 2022 09:27:23 -0500
Subject: [PATCH] Fleet UI: Filter by low disk space hosts on various platforms
 (#8647)

---
 changes/bug-8546-low-disk-space-by-platform-filter         | 1 +
 frontend/pages/DashboardPage/DashboardPage.tsx             | 1 +
 .../cards/LowDiskSpaceHosts/LowDiskSpaceHosts.tsx          | 6 +++++-
 frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx   | 7 +++++++
 frontend/pages/hosts/ManageHostsPage/_styles.scss          | 1 +
 .../ManageHostsPage/components/FilterPill/FilterPill.tsx   | 7 +++++--
 frontend/utilities/url/index.ts                            | 5 +++++
 7 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 changes/bug-8546-low-disk-space-by-platform-filter

diff --git a/changes/bug-8546-low-disk-space-by-platform-filter b/changes/bug-8546-low-disk-space-by-platform-filter
new file mode 100644
index 0000000000..a606825053
--- /dev/null
+++ b/changes/bug-8546-low-disk-space-by-platform-filter
@@ -0,0 +1 @@
+* UI allows for filtering low disk space hosts by platform!
\ No newline at end of file
diff --git a/frontend/pages/DashboardPage/DashboardPage.tsx b/frontend/pages/DashboardPage/DashboardPage.tsx
index 57c7fbc65f..68cf55c678 100644
--- a/frontend/pages/DashboardPage/DashboardPage.tsx
+++ b/frontend/pages/DashboardPage/DashboardPage.tsx
@@ -413,6 +413,7 @@ const DashboardPage = (): JSX.Element => {
         lowDiskSpaceCount={lowDiskSpaceCount}
         isLoadingHosts={isHostSummaryFetching}
         showHostsUI={showHostsUI}
+        selectedPlatformLabelId={selectedPlatformLabelId}
       />
     ),
   });
diff --git a/frontend/pages/DashboardPage/cards/LowDiskSpaceHosts/LowDiskSpaceHosts.tsx b/frontend/pages/DashboardPage/cards/LowDiskSpaceHosts/LowDiskSpaceHosts.tsx
index 078e9e9053..3569c02e3a 100644
--- a/frontend/pages/DashboardPage/cards/LowDiskSpaceHosts/LowDiskSpaceHosts.tsx
+++ b/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 (
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
index 7181324268..e66005254a 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
+++ b/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:
diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss
index 3a202596a6..d9058f20fc 100644
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/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 {
diff --git a/frontend/pages/hosts/ManageHostsPage/components/FilterPill/FilterPill.tsx b/frontend/pages/hosts/ManageHostsPage/components/FilterPill/FilterPill.tsx
index 4b66eaed39..700ebc9756 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/FilterPill/FilterPill.tsx
+++ b/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>
diff --git a/frontend/utilities/url/index.ts b/frontend/utilities/url/index.ts
index 3f793d298e..d40763d5a1 100644
--- a/frontend/utilities/url/index.ts
+++ b/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 {};
   }