diff --git a/frontend/components/StatusIndicator/_styles.scss b/frontend/components/StatusIndicator/_styles.scss index ebe03cc1909..cf3729d901c 100644 --- a/frontend/components/StatusIndicator/_styles.scss +++ b/frontend/components/StatusIndicator/_styles.scss @@ -32,11 +32,10 @@ &--indeterminate { &:before { - background-color: $ui-offline; + display: none; // Do not show indicator for "---" statuses } } - // NOTE: We will move away from styling the indicator status depending // on the value passed to the component. Instead we have added an `indicator` // prop that will allow us explicitly define the desired status. This makes diff --git a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx index b172336c4cf..84e54dc1c42 100644 --- a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx +++ b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx @@ -42,7 +42,7 @@ import { } from "interfaces/datatable_config"; import PATHS from "router/paths"; import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants"; -import getHostStatusTooltipText from "../helpers"; +import { getHostStatusTooltipText } from "../helpers"; type IHostTableColumnConfig = Column & { // This is used to prevent these columns from being hidden. This will be @@ -119,42 +119,6 @@ const allHostTableHeaders = (teamId?: number): IHostTableColumnConfig[] => [ accessor: "display_name", id: "display_name", Cell: (cellProps: IHostTableStringCellProps) => { - if ( - // if the host is pending, we want to disable the link to host details - cellProps.row.original.mdm.enrollment_status === "Pending" && - // pending status is only supported for Apple devices - (cellProps.row.original.platform === "darwin" || - cellProps.row.original.platform === "ios" || - cellProps.row.original.platform === "ipados") && - // osquery version is populated along with the rest of host details so use it - // here to check if we already have host details and don't need to disable the link - !cellProps.row.original.osquery_version - ) { - return ( - <> - - {cellProps.cell.value} - - - - This host was ordered using
- Apple Business Manager
- (ABM). You will see host
- vitals when it is enrolled in Fleet.
-
-
- - ); - } return ( [ - Online hosts will respond to a live report. Offline hosts - won't respond to a live report because they may be shut down, - asleep, or not connected to the internet. + Online hosts will respond to a live report. Currently only + supported for macOS, Windows, and Linux. } className="status-header" @@ -449,9 +412,11 @@ const allHostTableHeaders = (teamId?: number): IHostTableColumnConfig[] => [ isAppleDevice(cellProps.row.original.platform) ) { const tooltip = { - tooltipText: getHostStatusTooltipText("---"), + tooltipText: getHostStatusTooltipText(DEFAULT_EMPTY_CELL_VALUE), }; - return ; + return ( + + ); } const value = cellProps.cell.value; diff --git a/frontend/pages/hosts/ManageHostsPage/HostsPageConfig.tsx b/frontend/pages/hosts/ManageHostsPage/HostsPageConfig.tsx index 3e4bfa0cdc4..ec9af0c439e 100644 --- a/frontend/pages/hosts/ManageHostsPage/HostsPageConfig.tsx +++ b/frontend/pages/hosts/ManageHostsPage/HostsPageConfig.tsx @@ -89,6 +89,12 @@ export const hostSelectStatuses = [ value: "new", helpText: "Hosts added to Fleet in the last 24 hours.", }, + { + disabled: false, + label: "Pending", + value: "pending", + helpText: "Hosts pending enrollment.", + }, ]; export const OS_SETTINGS_FILTER_OPTIONS = [ diff --git a/frontend/pages/hosts/ManageHostsPage/helpers.ts b/frontend/pages/hosts/ManageHostsPage/helpers.ts index d312e937f76..f4fc381ec49 100644 --- a/frontend/pages/hosts/ManageHostsPage/helpers.ts +++ b/frontend/pages/hosts/ManageHostsPage/helpers.ts @@ -5,7 +5,8 @@ export const isAcceptableStatus = (filter: string): boolean => { filter === "new" || filter === "online" || filter === "offline" || - filter === "missing" + filter === "missing" || + filter === "pending" ); }; diff --git a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx index 790857b955c..ffd6cda8047 100644 --- a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx +++ b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx @@ -1134,7 +1134,7 @@ const HostDetailsPage = ({ isHostTeamTechnician); const showSoftwareLibraryTab = isPremiumTier; - + const showReportsTab = mdm?.enrollment_status !== "Pending"; const showActivityCard = !isAndroidHost; const showAgentOptionsCard = !isIosOrIpadosHost && !isAndroidHost; const showLocalUserAccountsCard = !isIosOrIpadosHost && !isAndroidHost; @@ -1468,6 +1468,7 @@ const HostDetailsPage = ({ + + { const searchQuery = location.query.query ?? ""; const sortOption: SortOption = @@ -197,7 +199,9 @@ const HostReportsTab = ({ return ; } - if (totalCount === 0 && !searchQuery) { + // No reports should be available if MDM enrollment is pending so hide any previous reports + // that may be associated with the host to prevent confusion while pending + if ((totalCount === 0 && !searchQuery) || !showReportsTab) { return ; } diff --git a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx index 9bcbabbd627..bbe6a62e7d9 100644 --- a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx +++ b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx @@ -15,7 +15,7 @@ import { isOsSettingsDisplayPlatform, } from "interfaces/platform"; -import getHostStatusTooltipText from "pages/hosts/helpers"; +import { getHostStatus, getHostStatusTooltipText } from "pages/hosts/helpers"; import TooltipWrapper from "components/TooltipWrapper"; import Card from "components/Card"; @@ -23,7 +23,10 @@ import DataSet from "components/DataSet"; import StatusIndicator from "components/StatusIndicator"; import IssuesIndicator from "pages/hosts/components/IssuesIndicator"; -import { DATE_FNS_FORMAT_STRINGS } from "utilities/constants"; +import { + DATE_FNS_FORMAT_STRINGS, + DEFAULT_EMPTY_CELL_VALUE, +} from "utilities/constants"; import OSSettingsIndicator from "./OSSettingsIndicator"; import BootstrapPackageIndicator from "./BootstrapPackageIndicator/BootstrapPackageIndicator"; @@ -64,7 +67,7 @@ const HostSummary = ({ }: IHostSummaryProps): JSX.Element => { const classNames = classnames(baseClass, className); - const { status, platform, os_version } = summaryData; + const { status, platform, os_version, mdm } = summaryData; const isAndroidHost = isAndroid(platform); const isIosOrIpadosHost = isIPadOrIPhone(platform); @@ -188,9 +191,11 @@ const HostSummary = ({ title="Status" value={ diff --git a/frontend/pages/hosts/details/cards/Vitals/Vitals.tsx b/frontend/pages/hosts/details/cards/Vitals/Vitals.tsx index ebeaf2eea38..0a98b45ddf0 100644 --- a/frontend/pages/hosts/details/cards/Vitals/Vitals.tsx +++ b/frontend/pages/hosts/details/cards/Vitals/Vitals.tsx @@ -389,15 +389,18 @@ const Vitals = ({ key="mdm-status" title="MDM status" value={ - - { - MDM_ENROLLMENT_STATUS_UI_MAP[mdm.enrollment_status] - .displayName - } - +
+ {mdm.dep_profile_error && } + + { + MDM_ENROLLMENT_STATUS_UI_MAP[mdm.enrollment_status] + .displayName + } + +
} /> ), diff --git a/frontend/pages/hosts/details/cards/Vitals/_styles.scss b/frontend/pages/hosts/details/cards/Vitals/_styles.scss index 506b5efc233..7045a116520 100644 --- a/frontend/pages/hosts/details/cards/Vitals/_styles.scss +++ b/frontend/pages/hosts/details/cards/Vitals/_styles.scss @@ -54,7 +54,9 @@ } // OS version with requirement icon + tooltip truncation - &__os-version { + // MDM status may have an error icon if status is off + &__os-version, + &__mdm-status { display: flex; align-items: center; gap: $pad-xsmall; @@ -94,4 +96,4 @@ .text-muted { color: $ui-fleet-black-50; } -} \ No newline at end of file +} diff --git a/frontend/pages/hosts/helpers.ts b/frontend/pages/hosts/helpers.ts index 75fdba4bb61..c1257defa38 100644 --- a/frontend/pages/hosts/helpers.ts +++ b/frontend/pages/hosts/helpers.ts @@ -1,12 +1,22 @@ -// eslint-disable-next-line import/prefer-default-export -const getHostStatusTooltipText = (status: string): string => { +import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants"; + +export const getHostStatusTooltipText = (status: string): string => { if (status === "online") { return "Online hosts will respond to a live report."; } - if (status === "---") { + if (status === DEFAULT_EMPTY_CELL_VALUE) { return "Device is pending enrollment in Apple Business Manager and status is not yet available."; } return "Offline hosts won't respond to a live report because they may be shut down, asleep, or not connected to the internet."; }; -export default getHostStatusTooltipText; +export const getHostStatus = ( + status: string, + mdmEnrollmentStatus?: string +): string => { + if (mdmEnrollmentStatus === "Pending") { + return DEFAULT_EMPTY_CELL_VALUE; + } + + return status || DEFAULT_EMPTY_CELL_VALUE; +}; diff --git a/frontend/utilities/constants.tsx b/frontend/utilities/constants.tsx index 24de502bcd4..0b82139f55a 100644 --- a/frontend/utilities/constants.tsx +++ b/frontend/utilities/constants.tsx @@ -418,6 +418,7 @@ export const HOST_SUMMARY_DATA: (keyof IHost)[] = [ "display_name", // Not rendered on my device page "maintenance_window", // Not rendered on my device page "os_version", + "mdm", ]; export const HOST_VITALS_DATA = [