diff --git a/changes/16669-fix-hardcoded-label-bug b/changes/16669-fix-hardcoded-label-bug new file mode 100644 index 0000000000..396dea3ef7 --- /dev/null +++ b/changes/16669-fix-hardcoded-label-bug @@ -0,0 +1 @@ +- Fixed built in platform labels bug diff --git a/frontend/interfaces/host_summary.ts b/frontend/interfaces/host_summary.ts index 1d9c13ce4f..3a16c7a3ad 100644 --- a/frontend/interfaces/host_summary.ts +++ b/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[]; } diff --git a/frontend/pages/DashboardPage/DashboardPage.tsx b/frontend/pages/DashboardPage/DashboardPage.tsx index 3a224d8b63..764b9872ef 100644 --- a/frontend/pages/DashboardPage/DashboardPage.tsx +++ b/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} diff --git a/frontend/pages/DashboardPage/cards/HostsSummary/HostsSummary.tsx b/frontend/pages/DashboardPage/cards/HostsSummary/HostsSummary.tsx index 625f291964..e7115b0f18 100644 --- a/frontend/pages/DashboardPage/cards/HostsSummary/HostsSummary.tsx +++ b/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) => ( - - ); + const renderMacCount = (teamId?: number) => { + const macLabelId = builtInLabels?.find((builtin) => { + return builtin.name === PLATFORM_NAME_TO_LABEL_NAME.darwin; + })?.id; - const renderWindowsCount = (teamId?: number) => ( - - ); + if (isLoadingHostsSummary || macLabelId === undefined) { + return <>; + } - const renderLinuxCount = (teamId?: number) => ( - - ); + return ( + + ); + }; + + const renderWindowsCount = (teamId?: number) => { + const windowsLabelId = builtInLabels?.find( + (builtin) => builtin.name === PLATFORM_NAME_TO_LABEL_NAME.windows + )?.id; + + if (isLoadingHostsSummary || windowsLabelId === undefined) { + return <>; + } + return ( + + ); + }; + + const renderLinuxCount = (teamId?: number) => { + const linuxLabelId = builtInLabels?.find( + (builtin) => builtin.name === PLATFORM_NAME_TO_LABEL_NAME.linux + )?.id; + + if (isLoadingHostsSummary || linuxLabelId === undefined) { + return <>; + } + return ( + + ); + }; 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 <>; } diff --git a/frontend/utilities/constants.tsx b/frontend/utilities/constants.tsx index 5807f57a51..557a40558b 100644 --- a/frontend/utilities/constants.tsx +++ b/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 =