diff --git a/changes/issue-2822-dashboard-host-change-on-team b/changes/issue-2822-dashboard-host-change-on-team
new file mode 100644
index 0000000000..e9449c8a40
--- /dev/null
+++ b/changes/issue-2822-dashboard-host-change-on-team
@@ -0,0 +1 @@
+* Dashboard hosts change on team selection
\ No newline at end of file
diff --git a/cypress/integration/premium/admin.spec.ts b/cypress/integration/premium/admin.spec.ts
index 6f554a3322..efedf38ed7 100644
--- a/cypress/integration/premium/admin.spec.ts
+++ b/cypress/integration/premium/admin.spec.ts
@@ -92,6 +92,7 @@ describe(
cy.findByText(/back to queries/i).should("exist");
cy.visit("/queries/manage");
+ cy.wait(2000); // eslint-disable-line cypress/no-unnecessary-waiting
cy.findByText(/query all/i).click();
cy.wait(2000); // eslint-disable-line cypress/no-unnecessary-waiting
diff --git a/frontend/pages/Homepage/Homepage.tsx b/frontend/pages/Homepage/Homepage.tsx
index bf9e22eaf4..5609b9a548 100644
--- a/frontend/pages/Homepage/Homepage.tsx
+++ b/frontend/pages/Homepage/Homepage.tsx
@@ -25,6 +25,12 @@ interface ITeamsResponse {
const baseClass = "homepage";
+const TAGGED_TEMPLATES = {
+ hostsByTeamRoute: (teamId: number | undefined | null) => {
+ return `${teamId ? `/?team_id=${teamId}` : ""}`;
+ },
+};
+
const Homepage = (): JSX.Element => {
const { MANAGE_HOSTS } = paths;
const {
@@ -76,9 +82,14 @@ const Homepage = (): JSX.Element => {
-
+
{isPreviewMode && (
diff --git a/frontend/pages/Homepage/cards/HostsSummary/HostsSummary.tsx b/frontend/pages/Homepage/cards/HostsSummary/HostsSummary.tsx
index 42e1fe0e0c..405cc7ee6d 100644
--- a/frontend/pages/Homepage/cards/HostsSummary/HostsSummary.tsx
+++ b/frontend/pages/Homepage/cards/HostsSummary/HostsSummary.tsx
@@ -1,61 +1,100 @@
-import React, { useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { reduce } from "lodash";
+import React, { useState } from "react";
+import { useQuery } from "react-query";
import { ILabel } from "interfaces/label";
-// @ts-ignore
-import { getLabels } from "redux/nodes/components/ManageHostsPage/actions";
+
+import hostCountAPI from "services/entities/host_count";
+import labelsAPI from "services/entities/labels";
+
import WindowsIcon from "../../../../../assets/images/icon-windows-48x48@2x.png";
import LinuxIcon from "../../../../../assets/images/icon-linux-48x48@2x.png";
import MacIcon from "../../../../../assets/images/icon-mac-48x48@2x.png";
const baseClass = "hosts-summary";
-interface IRootState {
- entities: {
- labels: {
- isLoading: boolean;
- data: {
- [id: number]: ILabel;
- };
- };
- };
+interface IHostsSummaryProps {
+ currentTeamId: number | undefined;
}
-const PLATFORM_STRINGS = {
- macOS: ["macOS"],
- windows: ["MS Windows"],
- linux: ["All Linux"],
-};
+interface ILabelsResponse {
+ labels: ILabel[];
+}
-const HostsSummary = (): JSX.Element => {
- const dispatch = useDispatch();
+interface IHostCountResponse {
+ count: number;
+}
- useEffect(() => {
- dispatch(getLabels());
- }, []);
+const HostsSummary = ({ currentTeamId }: IHostsSummaryProps): JSX.Element => {
+ const [macCount, setMacCount] = useState();
+ const [windowsCount, setWindowsCount] = useState();
+ const [linuxCount, setLinuxCount] = useState();
- const labels = useSelector((state: IRootState) => state.entities.labels.data);
-
- // Builtin labels from state populate os counts
- const getCount = (platformTitles: string[]) => {
- return reduce(
- Object.values(labels),
- (total, label) => {
- return label.label_type === "builtin" &&
- platformTitles.includes(label.name) &&
- label.count
- ? total + label.count
- : total;
- },
- 0
- );
+ const getLabel = (labelString: string, labels: ILabel[]) => {
+ return Object.values(labels).filter((label: ILabel) => {
+ return label.label_type === "builtin" && label.name === labelString;
+ });
};
-
- const macCount = getCount(PLATFORM_STRINGS.macOS).toLocaleString("en-US");
- const windowsCount = getCount(PLATFORM_STRINGS.windows).toLocaleString(
- "en-US"
+ const { data: labels } = useQuery(
+ ["labels"],
+ () => labelsAPI.loadAll(),
+ {
+ select: (data: ILabelsResponse) => data.labels,
+ }
+ );
+
+ useQuery(
+ ["mac host count", currentTeamId],
+ () => {
+ const macOsLabel = getLabel("macOS", labels || []);
+ return (
+ hostCountAPI.load({
+ selectedLabels: [`labels/${macOsLabel[0].id}`],
+ teamId: currentTeamId,
+ }) || { count: 0 }
+ );
+ },
+ {
+ select: (data: IHostCountResponse) => data.count,
+ enabled: !!labels,
+ onSuccess: (data: number) => setMacCount(data.toLocaleString("en-US")),
+ }
+ );
+
+ useQuery(
+ ["windows host count", currentTeamId],
+ () => {
+ const windowsLabel = getLabel("MS Windows", labels || []);
+ return (
+ hostCountAPI.load({
+ selectedLabels: [`labels/${windowsLabel[0].id}`],
+ teamId: currentTeamId,
+ }) || { count: 0 }
+ );
+ },
+ {
+ select: (data: IHostCountResponse) => data.count,
+ enabled: !!labels,
+ onSuccess: (data: number) =>
+ setWindowsCount(data.toLocaleString("en-US")),
+ }
+ );
+
+ useQuery(
+ ["linux host count", currentTeamId],
+ () => {
+ const linuxLabel = getLabel("All Linux", labels || []);
+ return (
+ hostCountAPI.load({
+ selectedLabels: [`labels/${linuxLabel[0].id}`],
+ teamId: currentTeamId,
+ }) || { count: 0 }
+ );
+ },
+ {
+ select: (data: IHostCountResponse) => data.count,
+ enabled: !!labels,
+ onSuccess: (data: number) => setLinuxCount(data.toLocaleString("en-US")),
+ }
);
- const linuxCount = getCount(PLATFORM_STRINGS.linux).toLocaleString("en-US");
return (
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
index a125f45e4b..fe53e3e347 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
@@ -323,6 +323,10 @@ const ManageHostsPage = ({
),
};
+ if (queryParams.team_id) {
+ options.teamId = queryParams.team_id;
+ }
+
try {
const { hosts: returnedHosts, software } = await hostsAPI.loadAll(
options
@@ -350,6 +354,10 @@ const ManageHostsPage = ({
),
};
+ if (queryParams.team_id) {
+ options.teamId = queryParams.team_id;
+ }
+
try {
const { count: returnedHostCount } = await hostCountAPI.load(options);
setFilteredHostCount(returnedHostCount);
@@ -658,6 +666,10 @@ const ManageHostsPage = ({
newQueryParams.team_id = teamId;
}
+ if (queryParams.team_id) {
+ newQueryParams.team_id = queryParams.team_id;
+ }
+
if (policyId) {
newQueryParams.policy_id = policyId;
}