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