Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-24 09:28:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 52

Improve homepage latency by removing redundant requests (#5675)

Browse source
This commit is contained in:
Luke Heath 2022-05-12 10:58:50 -05:00 committed by GitHub
parent fba695be86
commit a95927340c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 47 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/interfaces/host_summary.ts
View file

@ -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[];
}

42
frontend/pages/Homepage/Homepage.tsx
View file

@ -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<string>("");
const [totalCount, setTotalCount] = useState<string | undefined>();
const [macCount, setMacCount] = useState<string>("0");
const [windowsCount, setWindowsCount] = useState<string>("0");
const [onlineCount, setOnlineCount] = useState<string | undefined>();
const [offlineCount, setOfflineCount] = useState<string | undefined>();
const [labels, setLabels] = useState<IHostSummaryLabel[]>();
const [macCount, setMacCount] = useState<number>(0);
const [windowsCount, setWindowsCount] = useState<number>(0);
const [linuxCount, setLinuxCount] = useState<number>(0);
const [onlineCount, setOnlineCount] = useState<number>(0);
const [offlineCount, setOfflineCount] = useState<number>(0);
const [showActivityFeedTitle, setShowActivityFeedTitle] = useState<boolean>(
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}
/>
),
});

4
frontend/pages/Homepage/cards/HostsStatus/HostsStatus.tsx
View file

@ -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;
}

89
frontend/pages/Homepage/cards/HostsSummary/HostsSummary.tsx
View file

@ -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<string | undefined>();
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<ILabelsResponse, Error, ILabel[]>(
["labels", currentTeamId, selectedPlatform],
() => labelsAPI.loadAll(),
{
select: (data: ILabelsResponse) => data.labels,
}
);
useQuery<IHostCountResponse, Error, number>(
[
"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 };