(Released bugs) Fleet UI label bugs: Dynamic platform labels, chromeos dashboard filters for missing chromeos hosts (#16680)

changes/16669-fix-hardcoded-label-bug

@@ -0,0 +1 @@
+- Fixed built in platform labels bug

frontend/interfaces/host_summary.ts

@@ -1,15 +1,10 @@
+import { ILabelSummary } from "./label";
+
 export interface IHostSummaryPlatforms {
   platform: string;
   hosts_count: number;
 }
 
-export interface IHostSummaryLabel {
-  id: number;
-  name: string;
-  description: string;
-  label_type: "regular" | "builtin";
-}
-
 export interface IHostSummary {
   all_linux_count: number;
   totals_hosts_count: number;
@@ -20,5 +15,5 @@ export interface IHostSummary {
   new_count: number;
   missing_30_days_count?: number; // premium feature
   low_disk_space_count?: number; // premium feature
-  builtin_labels: IHostSummaryLabel[];
+  builtin_labels: ILabelSummary[];
 }

frontend/pages/DashboardPage/DashboardPage.tsx

@@ -447,6 +447,7 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
         linuxCount={linuxCount}
         chromeCount={chromeCount}
         isLoadingHostsSummary={isHostSummaryFetching}
+        builtInLabels={labels}
         showHostsUI={showHostsUI}
         selectedPlatform={selectedPlatform}
         errorHosts={!!errorHosts}

frontend/pages/DashboardPage/cards/HostsSummary/HostsSummary.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import PATHS from "router/paths";
 
-import labelsAPI from "services/entities/labels";
+import { PLATFORM_NAME_TO_LABEL_NAME } from "utilities/constants";
 import DataError from "components/DataError";
 import { SelectedPlatform } from "interfaces/platform";
-import { useQuery } from "react-query";
-import { ILabelSpecResponse } from "interfaces/label";
+import { IHostSummary } from "interfaces/host_summary";
 
 import SummaryTile from "./SummaryTile";
 
@@ -18,6 +17,7 @@ interface IHostSummaryProps {
   linuxCount: number;
   chromeCount: number;
   isLoadingHostsSummary: boolean;
+  builtInLabels?: IHostSummary["builtin_labels"];
   showHostsUI: boolean;
   errorHosts: boolean;
   selectedPlatform?: SelectedPlatform;
@@ -30,6 +30,7 @@ const HostsSummary = ({
   linuxCount,
   chromeCount,
   isLoadingHostsSummary,
+  builtInLabels,
   showHostsUI,
   errorHosts,
   selectedPlatform,
@@ -39,59 +40,83 @@ const HostsSummary = ({
   if (showHostsUI) {
     opacity = isLoadingHostsSummary ? { opacity: 0.4 } : { opacity: 1 };
   }
-  // get the id for the label for chrome hosts - this will be unique to each Fleet instance
-  const { isLoading: isLoadingChromeLabelId, data: chromeLabelId } = useQuery<
-    ILabelSpecResponse,
-    Error,
-    number
-  >("chromeLabelId", () => labelsAPI.specByName("chrome"), {
-    select: ({ specs }) => specs.id,
-  });
 
-  const renderMacCount = (teamId?: number) => (
-    <SummaryTile
-      iconName="darwin"
-      circledIcon
-      count={macCount}
-      isLoading={isLoadingHostsSummary}
-      showUI={showHostsUI}
-      title={`macOS host${macCount === 1 ? "" : "s"}`}
-      path={PATHS.MANAGE_HOSTS_LABEL(7).concat(
-        teamId !== undefined ? `?team_id=${teamId}` : ""
-      )}
-    />
-  );
+  const renderMacCount = (teamId?: number) => {
+    const macLabelId = builtInLabels?.find((builtin) => {
+      return builtin.name === PLATFORM_NAME_TO_LABEL_NAME.darwin;
+    })?.id;
 
-  const renderWindowsCount = (teamId?: number) => (
-    <SummaryTile
-      iconName="windows"
-      circledIcon
-      count={windowsCount}
-      isLoading={isLoadingHostsSummary}
-      showUI={showHostsUI}
-      title={`Windows host${windowsCount === 1 ? "" : "s"}`}
-      path={PATHS.MANAGE_HOSTS_LABEL(10).concat(
-        teamId !== undefined ? `?team_id=${teamId}` : ""
-      )}
-    />
-  );
+    if (isLoadingHostsSummary || macLabelId === undefined) {
+      return <></>;
+    }
 
-  const renderLinuxCount = (teamId?: number) => (
-    <SummaryTile
-      iconName="linux"
-      circledIcon
-      count={linuxCount}
-      isLoading={isLoadingHostsSummary}
-      showUI={showHostsUI}
-      title={`Linux host${linuxCount === 1 ? "" : "s"}`}
-      path={PATHS.MANAGE_HOSTS_LABEL(12).concat(
-        teamId !== undefined ? `?team_id=${teamId}` : ""
-      )}
-    />
-  );
+    return (
+      <SummaryTile
+        iconName="darwin"
+        circledIcon
+        count={macCount}
+        isLoading={isLoadingHostsSummary}
+        showUI={showHostsUI}
+        title={`macOS host${macCount === 1 ? "" : "s"}`}
+        path={PATHS.MANAGE_HOSTS_LABEL(macLabelId).concat(
+          teamId !== undefined ? `?team_id=${teamId}` : ""
+        )}
+      />
+    );
+  };
+
+  const renderWindowsCount = (teamId?: number) => {
+    const windowsLabelId = builtInLabels?.find(
+      (builtin) => builtin.name === PLATFORM_NAME_TO_LABEL_NAME.windows
+    )?.id;
+
+    if (isLoadingHostsSummary || windowsLabelId === undefined) {
+      return <></>;
+    }
+    return (
+      <SummaryTile
+        iconName="windows"
+        circledIcon
+        count={windowsCount}
+        isLoading={isLoadingHostsSummary}
+        showUI={showHostsUI}
+        title={`Windows host${windowsCount === 1 ? "" : "s"}`}
+        path={PATHS.MANAGE_HOSTS_LABEL(windowsLabelId).concat(
+          teamId !== undefined ? `?team_id=${teamId}` : ""
+        )}
+      />
+    );
+  };
+
+  const renderLinuxCount = (teamId?: number) => {
+    const linuxLabelId = builtInLabels?.find(
+      (builtin) => builtin.name === PLATFORM_NAME_TO_LABEL_NAME.linux
+    )?.id;
+
+    if (isLoadingHostsSummary || linuxLabelId === undefined) {
+      return <></>;
+    }
+    return (
+      <SummaryTile
+        iconName="linux"
+        circledIcon
+        count={linuxCount}
+        isLoading={isLoadingHostsSummary}
+        showUI={showHostsUI}
+        title={`Linux host${linuxCount === 1 ? "" : "s"}`}
+        path={PATHS.MANAGE_HOSTS_LABEL(linuxLabelId).concat(
+          teamId !== undefined ? `?team_id=${teamId}` : ""
+        )}
+      />
+    );
+  };
 
   const renderChromeCount = (teamId?: number) => {
-    if (isLoadingChromeLabelId || chromeLabelId === undefined) {
+    const chromeLabelId = builtInLabels?.find(
+      (builtin) => builtin.name === PLATFORM_NAME_TO_LABEL_NAME.chrome
+    )?.id;
+
+    if (isLoadingHostsSummary || chromeLabelId === undefined) {
       return <></>;
     }
 

frontend/utilities/constants.tsx

@@ -234,12 +234,13 @@ export const SCHEDULE_PLATFORM_DROPDOWN_OPTIONS: IPlatformDropdownOptions[] = [
   { label: "Linux", value: "linux" },
 ];
 
+// Builtin label names returned from API
 export const PLATFORM_NAME_TO_LABEL_NAME = {
   all: "",
   darwin: "macOS",
   windows: "MS Windows",
   linux: "All Linux",
-  chrome: "ChromeOS",
+  chrome: "chrome",
 };
 
 export const HOSTS_SEARCH_BOX_PLACEHOLDER =