diff --git a/frontend/interfaces/host_summary.ts b/frontend/interfaces/host_summary.ts index 4937ee6ada..fcb0dd682a 100644 --- a/frontend/interfaces/host_summary.ts +++ b/frontend/interfaces/host_summary.ts @@ -12,11 +12,20 @@ export interface IHostSummaryPlatforms { hosts_count: number; } +export interface IHostSummaryLabel { + id: number; + name: string; + description: string; + label_type: string; +} + export interface IHostSummary { + all_linux_count: number; totals_hosts_count: number; platforms: IHostSummaryPlatforms[] | null; online_count: number; offline_count: number; mia_count: number; new_count: number; + builtin_labels: IHostSummaryLabel[]; } diff --git a/frontend/pages/Homepage/Homepage.tsx b/frontend/pages/Homepage/Homepage.tsx index 6cec20a092..60603abaea 100644 --- a/frontend/pages/Homepage/Homepage.tsx +++ b/frontend/pages/Homepage/Homepage.tsx @@ -5,7 +5,11 @@ import { find } from "lodash"; import hostSummaryAPI from "services/entities/host_summary"; import teamsAPI from "services/entities/teams"; -import { IHostSummary, IHostSummaryPlatforms } from "interfaces/host_summary"; +import { + IHostSummary, + IHostSummaryLabel, + IHostSummaryPlatforms, +} from "interfaces/host_summary"; import { IOsqueryPlatform } from "interfaces/platform"; import { ITeam } from "interfaces/team"; import sortUtils from "utilities/sort"; @@ -45,11 +49,12 @@ const Homepage = (): JSX.Element => { } = useContext(AppContext); const [selectedPlatform, setSelectedPlatform] = useState(""); - const [totalCount, setTotalCount] = useState(); - const [macCount, setMacCount] = useState("0"); - const [windowsCount, setWindowsCount] = useState("0"); - const [onlineCount, setOnlineCount] = useState(); - const [offlineCount, setOfflineCount] = useState(); + const [labels, setLabels] = useState(); + const [macCount, setMacCount] = useState(0); + const [windowsCount, setWindowsCount] = useState(0); + const [linuxCount, setLinuxCount] = useState(0); + const [onlineCount, setOnlineCount] = useState(0); + const [offlineCount, setOfflineCount] = useState(0); const [showActivityFeedTitle, setShowActivityFeedTitle] = useState( false ); @@ -90,16 +95,21 @@ const Homepage = (): JSX.Element => { { select: (data: IHostSummary) => data, onSuccess: (data: IHostSummary) => { - setOnlineCount(data.online_count.toLocaleString("en-US")); - setOfflineCount(data.offline_count.toLocaleString("en-US")); + setLabels(data.builtin_labels); + setOnlineCount(data.online_count); + setOfflineCount(data.offline_count); + const macHosts = data.platforms?.find( (platform: IHostSummaryPlatforms) => platform.platform === "darwin" ) || { platform: "darwin", hosts_count: 0 }; - setMacCount(macHosts.hosts_count.toLocaleString("en-US")); + const windowsHosts = data.platforms?.find( (platform: IHostSummaryPlatforms) => platform.platform === "windows" ) || { platform: "windows", hosts_count: 0 }; - setWindowsCount(windowsHosts.hosts_count.toLocaleString("en-US")); + + setMacCount(macHosts.hosts_count); + setWindowsCount(windowsHosts.hosts_count); + setLinuxCount(data.all_linux_count); setShowHostsUI(true); }, } @@ -118,14 +128,7 @@ const Homepage = (): JSX.Element => { }, total_host_count: (() => { if (!isHostSummaryFetching) { - if (totalCount) { - return totalCount; - } - - return ( - hostSummaryData?.totals_hosts_count.toLocaleString("en-US") || - undefined - ); + return `${hostSummaryData?.totals_hosts_count}` || undefined; } return undefined; @@ -136,10 +139,11 @@ const Homepage = (): JSX.Element => { currentTeamId={currentTeam?.id} macCount={macCount} windowsCount={windowsCount} + linuxCount={linuxCount} isLoadingHostsSummary={isHostSummaryFetching} showHostsUI={showHostsUI} selectedPlatform={selectedPlatform} - setTotalCount={setTotalCount} + labels={labels} /> ), }); diff --git a/frontend/pages/Homepage/cards/HostsStatus/HostsStatus.tsx b/frontend/pages/Homepage/cards/HostsStatus/HostsStatus.tsx index 8c58bfa78b..92140dd49e 100644 --- a/frontend/pages/Homepage/cards/HostsStatus/HostsStatus.tsx +++ b/frontend/pages/Homepage/cards/HostsStatus/HostsStatus.tsx @@ -3,8 +3,8 @@ import React from "react"; const baseClass = "hosts-status"; interface IHostSummaryProps { - onlineCount: string | undefined; - offlineCount: string | undefined; + onlineCount: number; + offlineCount: number; isLoadingHosts: boolean; showHostsUI: boolean; } diff --git a/frontend/pages/Homepage/cards/HostsSummary/HostsSummary.tsx b/frontend/pages/Homepage/cards/HostsSummary/HostsSummary.tsx index 4db7f6174e..45f719e311 100644 --- a/frontend/pages/Homepage/cards/HostsSummary/HostsSummary.tsx +++ b/frontend/pages/Homepage/cards/HostsSummary/HostsSummary.tsx @@ -1,11 +1,8 @@ -import React, { useState, useEffect } from "react"; -import { useQuery } from "react-query"; -import { ILabel } from "interfaces/label"; +import React, { useEffect } from "react"; import paths from "router/paths"; import { PLATFORM_NAME_TO_LABEL_NAME } from "utilities/constants"; -import hostCountAPI from "services/entities/host_count"; -import labelsAPI from "services/entities/labels"; +import { IHostSummaryLabel } from "interfaces/host_summary"; import WindowsIcon from "../../../../../assets/images/icon-windows-48x48@2x.png"; import LinuxIcon from "../../../../../assets/images/icon-linux-48x48@2x.png"; @@ -15,109 +12,49 @@ const baseClass = "hosts-summary"; interface IHostSummaryProps { currentTeamId: number | undefined; - macCount: string | undefined; - windowsCount: string | undefined; + macCount: number; + windowsCount: number; + linuxCount: number; isLoadingHostsSummary: boolean; showHostsUI: boolean; selectedPlatform: string; - setTotalCount: (count: string | undefined) => void; + labels?: IHostSummaryLabel[]; setActionURL?: (url: string) => void; } -interface ILabelsResponse { - labels: ILabel[]; -} - -interface IHostCountResponse { - count: number; -} - const HostsSummary = ({ currentTeamId, macCount, windowsCount, + linuxCount, isLoadingHostsSummary, showHostsUI, selectedPlatform, - setTotalCount, + labels, setActionURL, }: IHostSummaryProps): JSX.Element => { const { MANAGE_HOSTS } = paths; - const [linuxCount, setLinuxCount] = useState(); const getLabel = ( labelString: string, - labels: ILabel[] - ): ILabel | undefined => { - return Object.values(labels).find((label: ILabel) => { + summaryLabels: IHostSummaryLabel[] + ): IHostSummaryLabel | undefined => { + return Object.values(summaryLabels).find((label: IHostSummaryLabel) => { return label.label_type === "builtin" && label.name === labelString; }); }; - const { data: labels } = useQuery( - ["labels", currentTeamId, selectedPlatform], - () => labelsAPI.loadAll(), - { - select: (data: ILabelsResponse) => data.labels, - } - ); - - useQuery( - [ - "linux host count", - currentTeamId, - selectedPlatform, - macCount, - windowsCount, - ], - () => { - const linuxLabel = getLabel("All Linux", labels || []); - return ( - hostCountAPI.load({ - selectedLabels: [`labels/${linuxLabel?.id}`], - teamId: currentTeamId, - }) || { count: 0 } - ); - }, - { - select: (data: IHostCountResponse) => data.count, - enabled: !!labels, - onSuccess: (data: number) => { - setLinuxCount(data.toLocaleString("en-US")); - - // after we get the linux count, we can - // determine which count to use based on the platform - switch (selectedPlatform) { - case "darwin": - setTotalCount(macCount); - break; - case "windows": - setTotalCount(windowsCount); - break; - case "linux": - setTotalCount(data.toLocaleString("en-US")); - break; - default: - // will be set in the parent to the server's total - setTotalCount(undefined); - break; - } - }, - } - ); - // build the manage hosts URL useEffect(() => { if (labels) { let hostsURL = MANAGE_HOSTS; - // platform must go first since it's a URL slug rather than params if (selectedPlatform) { const labelValue = PLATFORM_NAME_TO_LABEL_NAME[ selectedPlatform as keyof typeof PLATFORM_NAME_TO_LABEL_NAME ]; - hostsURL += `/${getLabel(labelValue, labels)?.slug}`; + hostsURL += `/manage/labels/${getLabel(labelValue, labels)?.id}`; } if (currentTeamId) { @@ -128,7 +65,7 @@ const HostsSummary = ({ } }, [labels, selectedPlatform, currentTeamId]); - // Renders opaque information as host information is loading + // Renders semi-transparent screen as host information is loading let opacity = { opacity: 0 }; if (showHostsUI) { opacity = isLoadingHostsSummary ? { opacity: 0.4 } : { opacity: 1 };