From 9c44ce040f12b36362cc4d64f52ccaf90df7593f Mon Sep 17 00:00:00 2001 From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com> Date: Tue, 6 Jun 2023 19:37:25 -0400 Subject: [PATCH] UI: Add ChromeOS supporting features to the ManageHosts page (#12185) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Addresses #11828 - [x] Add ChromeOS platform filter - [x] Increase dropdown widths to 180px for screen >1100px of: - [x] platform dropdown - [x] Labels dropdown (for consistency) - [x] Add new null empty cell value “Not supported” for Chromebooks - [x] Apply to the following columns: - [x] Disk space available - [x] MDM status - [x] MDM server URL - [x] Last restarted - [x] Fix a misaligned icon in the labels dropdown, other small fixes Screenshot 2023-06-06 at 7 09 26 PM # Checklist for submitter If some of the following don't apply, delete the relevant line. - [x] Changes file added for user-visible changes in `changes/` - [x] Manual QA for all new/changed functionality --------- Co-authored-by: Jacob Shandling --- changes/11828-chromeos-to-manage-hosts | 1 + .../components/NotSupported/NotSupported.tsx | 6 +++++ frontend/components/NotSupported/_styles.scss | 3 +++ frontend/components/NotSupported/index.ts | 1 + .../hosts/ManageHostsPage/HostTableConfig.tsx | 23 +++++++++++++++---- .../pages/hosts/ManageHostsPage/_styles.scss | 4 ++++ .../components/LabelFilterSelect/_styles.scss | 9 ++++++-- .../components/LabelFilterSelect/constants.ts | 1 + frontend/utilities/constants.ts | 2 ++ 9 files changed, 44 insertions(+), 6 deletions(-) create mode 100644 changes/11828-chromeos-to-manage-hosts create mode 100644 frontend/components/NotSupported/NotSupported.tsx create mode 100644 frontend/components/NotSupported/_styles.scss create mode 100644 frontend/components/NotSupported/index.ts diff --git a/changes/11828-chromeos-to-manage-hosts b/changes/11828-chromeos-to-manage-hosts new file mode 100644 index 0000000000..37533f30ed --- /dev/null +++ b/changes/11828-chromeos-to-manage-hosts @@ -0,0 +1 @@ +- Added features for ChromeOS support to the ManageHosts page diff --git a/frontend/components/NotSupported/NotSupported.tsx b/frontend/components/NotSupported/NotSupported.tsx new file mode 100644 index 0000000000..d40c2dbff6 --- /dev/null +++ b/frontend/components/NotSupported/NotSupported.tsx @@ -0,0 +1,6 @@ +import React from "react"; + +export const NotSupported = ( + Not supported +); +export default NotSupported; diff --git a/frontend/components/NotSupported/_styles.scss b/frontend/components/NotSupported/_styles.scss new file mode 100644 index 0000000000..115cad9ba8 --- /dev/null +++ b/frontend/components/NotSupported/_styles.scss @@ -0,0 +1,3 @@ +.not-supported { + color: $ui-fleet-black-50; +} diff --git a/frontend/components/NotSupported/index.ts b/frontend/components/NotSupported/index.ts new file mode 100644 index 0000000000..18c92173f5 --- /dev/null +++ b/frontend/components/NotSupported/index.ts @@ -0,0 +1 @@ +export { default } from "./NotSupported"; diff --git a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx index f53985e1f1..d228f54504 100644 --- a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx +++ b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx @@ -17,6 +17,8 @@ import TruncatedTextCell from "components/TableContainer/DataTable/TruncatedText import TooltipWrapper from "components/TooltipWrapper"; import HumanTimeDiffWithDateTip from "components/HumanTimeDiffWithDateTip"; import CustomLink from "components/CustomLink"; +import NotSupported from "components/NotSupported"; + import { humanHostMemory, humanHostLastRestart, @@ -286,12 +288,15 @@ const allHostTableHeaders: IDataColumn[] = [ /> ), accessor: "gigs_disk_space_available", - Cell: (cellProps: INumberCellProps): JSX.Element => { + Cell: (cellProps: INumberCellProps) => { const { id, platform, percent_disk_space_available, } = cellProps.row.original; + if (platform === "chrome") { + return NotSupported; + } return ( { - if (cellProps.cell.value) + if (cellProps.row.original.platform === "chrome") { + return NotSupported; + } + if (cellProps.cell.value) { return ; + } return {DEFAULT_EMPTY_CELL_VALUE}; }, }, @@ -433,10 +442,13 @@ const allHostTableHeaders: IDataColumn[] = [ accessor: "mdm.server_url", id: "mdm_server_url", Cell: (cellProps: ICellProps) => { + if (cellProps.row.original.platform === "chrome") { + return NotSupported; + } if (cellProps.cell.value) { return ; } - return ---; + return {DEFAULT_EMPTY_CELL_VALUE}; }, }, { @@ -565,8 +577,11 @@ const allHostTableHeaders: IDataColumn[] = [ ), accessor: "uptime", Cell: (cellProps: ICellProps) => { - const { uptime, detail_updated_at } = cellProps.row.original; + const { uptime, detail_updated_at, platform } = cellProps.row.original; + if (platform === "chrome") { + return NotSupported; + } return ( = { "All Linux": "linux", macOS: "darwin", "MS Windows": "windows", + chrome: "chrome", }; export const FILTERED_LINUX = ["Red Hat Linux", "CentOS Linux", "Ubuntu Linux"]; diff --git a/frontend/utilities/constants.ts b/frontend/utilities/constants.ts index fa246a31cd..a1a3ab65fe 100644 --- a/frontend/utilities/constants.ts +++ b/frontend/utilities/constants.ts @@ -161,6 +161,7 @@ export const PLATFORM_LABEL_DISPLAY_NAMES: Record = { "MS Windows": "Windows", "Red Hat Linux": "Red Hat Linux", "Ubuntu Linux": "Ubuntu Linux", + chrome: "ChromeOS", }; export const PLATFORM_LABEL_DISPLAY_ORDER = [ @@ -180,6 +181,7 @@ export const PLATFORM_LABEL_DISPLAY_TYPES: Record = { "MS Windows": "platform", "Red Hat Linux": "platform", "Ubuntu Linux": "platform", + chrome: "platform", }; interface IPlatformDropdownOptions {