diff --git a/changes/23512-clarify-expected-behavior-of-host-counts b/changes/23512-clarify-expected-behavior-of-host-counts new file mode 100644 index 000000000000..98e0b64acb81 --- /dev/null +++ b/changes/23512-clarify-expected-behavior-of-host-counts @@ -0,0 +1,2 @@ +- Clarify expected behavior of policy host counts, dashboard controls software count, and controls + os updates versions count. diff --git a/frontend/pages/DashboardPage/DashboardPage.tsx b/frontend/pages/DashboardPage/DashboardPage.tsx index 056acc965c17..51f846941fc2 100644 --- a/frontend/pages/DashboardPage/DashboardPage.tsx +++ b/frontend/pages/DashboardPage/DashboardPage.tsx @@ -322,7 +322,15 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => { setSoftwareTitleDetail( + Fleet periodically queries all hosts to +
+ retrieve software. Click to view +
+ hosts for the most up-to-date lists. + + } /> ); setShowSoftwareCard(true); diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/CurrentVersionSection/CurrentVersionSection.tsx b/frontend/pages/ManageControlsPage/OSUpdates/components/CurrentVersionSection/CurrentVersionSection.tsx index 7e1cc7f085d5..0b76c3189d0e 100644 --- a/frontend/pages/ManageControlsPage/OSUpdates/components/CurrentVersionSection/CurrentVersionSection.tsx +++ b/frontend/pages/ManageControlsPage/OSUpdates/components/CurrentVersionSection/CurrentVersionSection.tsx @@ -81,7 +81,17 @@ const CurrentVersionSection = ({ return ( + Fleet periodically queries all hosts to +
+ retrieve operating systems. Click to +
+ view hosts for the most up-to-date +
+ lists. + + } /> ); }; diff --git a/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx b/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx index dd0d122aae58..3b2ce1cb427b 100644 --- a/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx @@ -4,6 +4,7 @@ import { useQuery } from "react-query"; import { InjectedRouter } from "react-router/lib/Router"; import PATHS from "router/paths"; import { isEqual } from "lodash"; +import { formatDistanceToNowStrict } from "date-fns"; import { getNextLocationPath, wait } from "utilities/helpers"; @@ -44,6 +45,7 @@ import Spinner from "components/Spinner"; import TeamsDropdown from "components/TeamsDropdown"; import TableDataError from "components/DataError"; import MainContent from "components/MainContent"; +import LastUpdatedText from "components/LastUpdatedText"; import PoliciesTable from "./components/PoliciesTable"; import OtherWorkflowsModal from "./components/OtherWorkflowsModal"; @@ -776,22 +778,43 @@ const ManagePolicyPage = ({ } } - const renderPoliciesCount = (count?: number) => { + const renderPoliciesCountAndLastUpdated = ( + count?: number, + policies?: IPolicyStats[] + ) => { // Hide count if fetching count || there are errors OR there are no policy results with no a search filter const isFetchingCount = !isAllTeamsSelected ? isFetchingTeamCountMergeInherited : isFetchingGlobalCount; - const hideCount = + const hide = isFetchingCount || policiesErrors || (!policyResults && searchQuery === ""); - if (hideCount) { + if (hide) { return null; } + // Figure the time since the host counts were updated by finding first policy item with host_count_updated_at. + const updatedAt = + policies?.find((p) => !!p.host_count_updated_at)?.host_count_updated_at || + ""; - return ; + return ( + <> + + + Counts are updated hourly. Click host +
+ counts for the most up-to-date count. + + } + /> + + ); }; const renderMainTable = () => { @@ -815,7 +838,12 @@ const ManagePolicyPage = ({ currentTeam={currentTeamSummary} currentAutomatedPolicies={currentAutomatedPolicies} isPremiumTier={isPremiumTier} - renderPoliciesCount={() => renderPoliciesCount(globalPoliciesCount)} + renderPoliciesCount={() => + renderPoliciesCountAndLastUpdated( + globalPoliciesCount, + globalPolicies + ) + } searchQuery={searchQuery} sortHeader={sortHeader} sortDirection={sortDirection} @@ -844,7 +872,10 @@ const ManagePolicyPage = ({ currentTeam={currentTeamSummary} currentAutomatedPolicies={currentAutomatedPolicies} renderPoliciesCount={() => - renderPoliciesCount(teamPoliciesCountMergeInherited) + renderPoliciesCountAndLastUpdated( + teamPoliciesCountMergeInherited, + teamPolicies + ) } isPremiumTier={isPremiumTier} searchQuery={searchQuery} diff --git a/frontend/pages/policies/ManagePoliciesPage/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/_styles.scss index 4edf0c5432d9..1de07894b2ad 100644 --- a/frontend/pages/policies/ManagePoliciesPage/_styles.scss +++ b/frontend/pages/policies/ManagePoliciesPage/_styles.scss @@ -295,4 +295,8 @@ } } } + + .component__last-updated-text { + font-weight: normal; + } } diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PassingColumnHeader/PassingColumnHeader.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PassingColumnHeader/PassingColumnHeader.tsx index c3910fd4c0a1..7f9f85ca3c3a 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/PassingColumnHeader/PassingColumnHeader.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/components/PassingColumnHeader/PassingColumnHeader.tsx @@ -1,37 +1,20 @@ import Icon from "components/Icon"; import React from "react"; -import TooltipWrapper from "components/TooltipWrapper"; interface IPassingColumnHeaderProps { isPassing: boolean; - timeSinceHostCountUpdate: string; } const baseClass = "passing-column-header"; -const PassingColumnHeader = ({ - isPassing, - timeSinceHostCountUpdate, -}: IPassingColumnHeaderProps) => { +const PassingColumnHeader = ({ isPassing }: IPassingColumnHeaderProps) => { const iconName = isPassing ? "success" : "error"; const columnText = isPassing ? "Yes" : "No"; - const updateText = timeSinceHostCountUpdate - ? `Host count updated ${timeSinceHostCountUpdate}.` - : ""; return (
- - {updateText} -
Counts are updated hourly. - - } - > - {columnText} -
+ {columnText}
); }; diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx index 6db439a07392..88dc32998330 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx @@ -97,7 +97,6 @@ const PoliciesTable = ({ selectedTeamId: currentTeam?.id, hasPermissionAndPoliciesToDelete, }, - policiesList, isPremiumTier )} data={generateDataSet( diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx index 76e785d7416d..6f09884cb92c 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx @@ -2,11 +2,7 @@ // disable this rule as it was throwing an error in Header and Cell component // definitions for the selection row for some reason when we dont really need it. import React from "react"; -import { - formatDistanceToNowStrict, - millisecondsToHours, - millisecondsToMinutes, -} from "date-fns"; +import { millisecondsToHours, millisecondsToMinutes } from "date-fns"; import { Tooltip as ReactTooltip5 } from "react-tooltip-5"; // @ts-ignore import Checkbox from "components/forms/fields/Checkbox"; @@ -91,27 +87,10 @@ const generateTableHeaders = ( hasPermissionAndPoliciesToDelete?: boolean; tableType?: string; }, - policiesList: IPolicyStats[] = [], isPremiumTier?: boolean ): IDataColumn[] => { const { selectedTeamId, hasPermissionAndPoliciesToDelete } = options; const viewingTeamPolicies = selectedTeamId !== -1; - // Figure the time since the host counts were updated. - // First, find first policy item with host_count_updated_at. - const updatedAt = - policiesList.find((p) => !!p.host_count_updated_at) - ?.host_count_updated_at || ""; - let timeSinceHostCountUpdate = ""; - if (updatedAt) { - try { - timeSinceHostCountUpdate = formatDistanceToNowStrict( - new Date(updatedAt), - { addSuffix: true } - ); - } catch (e) { - // Do nothing. - } - } const tableHeaders: IDataColumn[] = [ { @@ -170,12 +149,7 @@ const generateTableHeaders = ( title: "Yes", Header: (cellProps) => ( - } + value={} isSortedDesc={cellProps.column.isSortedDesc} /> ), @@ -221,12 +195,7 @@ const generateTableHeaders = ( title: "No", Header: (cellProps) => ( - } + value={} isSortedDesc={cellProps.column.isSortedDesc} /> ),