diff --git a/changes/40489-reorder-host-columns b/changes/40489-reorder-host-columns new file mode 100644 index 0000000000..2a2788fb3b --- /dev/null +++ b/changes/40489-reorder-host-columns @@ -0,0 +1 @@ +- Reordered the columns on the Manage Hosts page \ No newline at end of file diff --git a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx index 422c51512e..2e2ce8e521 100644 --- a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx +++ b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx @@ -168,34 +168,7 @@ const allHostTableHeaders = (teamId?: number): IHostTableColumnConfig[] => [ }, disableHidden: true, }, - { - title: "Hostname", - Header: (cellProps: IHostTableHeaderProps) => ( - - ), - accessor: "hostname", - id: "hostname", - Cell: (cellProps: IHostTableStringCellProps) => ( - - ), - }, - { - title: "Computer name", - Header: (cellProps: IHostTableHeaderProps) => ( - - ), - accessor: "computer_name", - id: "computer_name", - Cell: (cellProps: IHostTableStringCellProps) => ( - - ), - }, + // Fleet { title: "Fleet", Header: (cellProps: IHostTableHeaderProps) => ( @@ -207,6 +180,237 @@ const allHostTableHeaders = (teamId?: number): IHostTableColumnConfig[] => [ ), }, + // Operating system (OS) + { + title: "Operating system", + Header: (cellProps: IHostTableHeaderProps) => ( + + ), + accessor: "os_version", + id: "os_version", + // TODO(android): is Android supported? what about the os versions endpoint and dashboard card? + Cell: (cellProps: IHostTableStringCellProps) => { + const os_version = cellProps.cell.value; + const versionForRender = ROLLING_ARCH_LINUX_VERSIONS.includes( + os_version + ) ? ( + // wrap a tooltip around the "rolling" suffix + <> + {os_version.slice(0, -8)}  + + + ) : ( + os_version + ); + return ; + }, + }, + // Hardware model + { + title: "Hardware model", + Header: (cellProps: IHostTableHeaderProps) => ( + + ), + accessor: "hardware_model", + id: "hardware_model", + Cell: (cellProps: IHostTableStringCellProps) => ( + + ), + }, + // User email + { + title: "User email", + Header: "User email", + disableSortBy: true, + accessor: "device_mapping", + id: "device_mapping", + Cell: (cellProps: IDeviceUserCellProps) => { + // TODO(android): is android supported? + const numUsers = cellProps.cell.value?.length || 0; + const users = condenseDeviceUsers(cellProps.cell.value || []); + if (users.length > 1) { + return ( + + + + ); + } + if (users.length === 1) { + return ; + } + return ; + }, + }, + // UUID + { + title: "UUID", + Header: (cellProps: IHostTableHeaderProps) => ( + + ), + accessor: "uuid", + id: "uuid", + Cell: ({ cell: { value } }: IHostTableStringCellProps) => + value ? : , + }, + // Serial number + { + title: "Serial number", + Header: (cellProps: IHostTableHeaderProps) => ( + + ), + accessor: "hardware_serial", + id: "hardware_serial", + Cell: (cellProps: IHostTableStringCellProps) => { + // TODO(android): is iOS/iPadOS supported? + if ( + isAndroid(cellProps.row.original.platform) || + isBYODAccountDrivenUserEnrollment( + cellProps.row.original.mdm.enrollment_status + ) + ) { + return NotSupported; + } + return ; + }, + }, + // Last fetched + { + title: "Last fetched", + Header: (cellProps: IHostTableHeaderProps) => { + const titleWithToolTip = ( + + The last time the host +
reported vitals. + + } + > + Last fetched +
+ ); + return ( + + ); + }, + accessor: "detail_updated_at", + id: "detail_updated_at", + Cell: (cellProps: IHostTableStringCellProps) => ( + // TODO(android): android doesn't support refetch? + + ), + }, + // Disk space available + { + title: "Disk space available", + Header: (cellProps: IHostTableHeaderProps) => ( + + ), + accessor: "gigs_disk_space_available", + id: "gigs_disk_space_available", + Cell: (cellProps: IHostTableNumberCellProps) => { + const { + platform, + percent_disk_space_available, + gigs_disk_space_available, + gigs_total_disk_space, + gigs_all_disk_space, + } = cellProps.row.original; + if (platform === "chrome") { + return NotSupported; + } + return ( + + ); + }, + }, + // CPU + { + title: "CPU", + Header: "CPU", + disableSortBy: true, + accessor: "cpu_type", + id: "cpu_type", + Cell: (cellProps: IHostTableStringCellProps) => { + if ( + cellProps.row.original.platform === "ios" || + cellProps.row.original.platform === "ipados" + ) { + return NotSupported; + } + return ; + }, + }, + // RAM + { + title: "RAM", + Header: (cellProps: IHostTableHeaderProps) => ( + + ), + accessor: "memory", + id: "memory", + Cell: (cellProps: IHostTableNumberCellProps) => { + if ( + cellProps.row.original.platform === "ios" || + cellProps.row.original.platform === "ipados" + ) { + return NotSupported; + } + return ( + + ); + }, + }, + // MAC address + { + title: "MAC address", + Header: (cellProps: IHostTableHeaderProps) => ( + + ), + accessor: "primary_mac", + id: "primary_mac", + Cell: (cellProps: IHostTableStringCellProps) => { + // TODO(android): is iOS/iPadOS supported? + if (isAndroid(cellProps.row.original.platform)) { + return NotSupported; + } + return ; + }, + }, + // Status { title: "Status", Header: (cellProps: IHostTableHeaderProps) => { @@ -257,6 +461,7 @@ const allHostTableHeaders = (teamId?: number): IHostTableColumnConfig[] => [ return ; }, }, + // Issues { title: "Issues", Header: (cellProps: IHostTableHeaderProps) => ( @@ -277,128 +482,7 @@ const allHostTableHeaders = (teamId?: number): IHostTableColumnConfig[] => [ ); }, }, - { - title: "Disk space available", - Header: (cellProps: IHostTableHeaderProps) => ( - - ), - accessor: "gigs_disk_space_available", - id: "gigs_disk_space_available", - Cell: (cellProps: IHostTableNumberCellProps) => { - const { - platform, - percent_disk_space_available, - gigs_disk_space_available, - gigs_total_disk_space, - gigs_all_disk_space, - } = cellProps.row.original; - if (platform === "chrome") { - return NotSupported; - } - return ( - - ); - }, - }, - { - title: "Operating system", - Header: (cellProps: IHostTableHeaderProps) => ( - - ), - accessor: "os_version", - id: "os_version", - // TODO(android): is Android supported? what about the os versions endpoint and dashboard card? - Cell: (cellProps: IHostTableStringCellProps) => { - const os_version = cellProps.cell.value; - const versionForRender = ROLLING_ARCH_LINUX_VERSIONS.includes( - os_version - ) ? ( - // wrap a tooltip around the "rolling" suffix - <> - {os_version.slice(0, -8)}  - - - ) : ( - os_version - ); - return ; - }, - }, - { - title: "Osquery", - Header: (cellProps: IHostTableHeaderProps) => ( - - ), - accessor: "osquery_version", - id: "osquery_version", - Cell: (cellProps: IHostTableStringCellProps) => { - if (isMobilePlatform(cellProps.row.original.platform)) { - return NotSupported; - } - return ; - }, - }, - { - title: "User email", - Header: "User email", - disableSortBy: true, - accessor: "device_mapping", - id: "device_mapping", - Cell: (cellProps: IDeviceUserCellProps) => { - // TODO(android): is android supported? - const numUsers = cellProps.cell.value?.length || 0; - const users = condenseDeviceUsers(cellProps.cell.value || []); - if (users.length > 1) { - return ( - - - - ); - } - if (users.length === 1) { - return ; - } - return ; - }, - }, - { - title: "Private IP address", - Header: (cellProps: IHostTableHeaderProps) => ( - - ), - accessor: "primary_ip", - id: "primary_ip", - Cell: (cellProps: IHostTableStringCellProps) => { - if (isMobilePlatform(cellProps.row.original.platform)) { - return NotSupported; - } - return ; - }, - }, + // MDM status { title: "MDM status", Header: () => { @@ -422,6 +506,7 @@ const allHostTableHeaders = (teamId?: number): IHostTableColumnConfig[] => [ id: "mdm.enrollment_status", Cell: HostMdmStatusCell, }, + // MDM server URL { title: "MDM server URL", Header: () => { @@ -453,6 +538,55 @@ const allHostTableHeaders = (teamId?: number): IHostTableColumnConfig[] => [ return {DEFAULT_EMPTY_CELL_VALUE}; }, }, + // Hostname + { + title: "Hostname", + Header: (cellProps: IHostTableHeaderProps) => ( + + ), + accessor: "hostname", + id: "hostname", + Cell: (cellProps: IHostTableStringCellProps) => ( + + ), + }, + // Computer name + { + title: "Computer name", + Header: (cellProps: IHostTableHeaderProps) => ( + + ), + accessor: "computer_name", + id: "computer_name", + Cell: (cellProps: IHostTableStringCellProps) => ( + + ), + }, + // Private IP address + { + title: "Private IP address", + Header: (cellProps: IHostTableHeaderProps) => ( + + ), + accessor: "primary_ip", + id: "primary_ip", + Cell: (cellProps: IHostTableStringCellProps) => { + if (isMobilePlatform(cellProps.row.original.platform)) { + return NotSupported; + } + return ; + }, + }, + // Public IP address { title: "Public IP address", Header: (cellProps: IHostTableHeaderProps) => ( @@ -476,38 +610,25 @@ const allHostTableHeaders = (teamId?: number): IHostTableColumnConfig[] => [ ); }, }, + // Osquery { - title: "Last fetched", - Header: (cellProps: IHostTableHeaderProps) => { - const titleWithToolTip = ( - - The last time the host -
reported vitals. - - } - > - Last fetched -
- ); - return ( - - ); - }, - accessor: "detail_updated_at", - id: "detail_updated_at", - Cell: (cellProps: IHostTableStringCellProps) => ( - // TODO(android): android doesn't support refetch? - ( + ), + accessor: "osquery_version", + id: "osquery_version", + Cell: (cellProps: IHostTableStringCellProps) => { + if (isMobilePlatform(cellProps.row.original.platform)) { + return NotSupported; + } + return ; + }, }, + // Last seen { title: "Last seen", Header: (cellProps: IHostTableHeaderProps) => { @@ -544,16 +665,7 @@ const allHostTableHeaders = (teamId?: number): IHostTableColumnConfig[] => [ ); }, }, - { - title: "UUID", - Header: (cellProps: IHostTableHeaderProps) => ( - - ), - accessor: "uuid", - id: "uuid", - Cell: ({ cell: { value } }: IHostTableStringCellProps) => - value ? : , - }, + // Last restarted { title: "Last restarted", Header: (cellProps: IHostTableHeaderProps) => ( @@ -580,96 +692,6 @@ const allHostTableHeaders = (teamId?: number): IHostTableColumnConfig[] => [ ); }, }, - { - title: "CPU", - Header: "CPU", - disableSortBy: true, - accessor: "cpu_type", - id: "cpu_type", - Cell: (cellProps: IHostTableStringCellProps) => { - if ( - cellProps.row.original.platform === "ios" || - cellProps.row.original.platform === "ipados" - ) { - return NotSupported; - } - return ; - }, - }, - { - title: "RAM", - Header: (cellProps: IHostTableHeaderProps) => ( - - ), - accessor: "memory", - id: "memory", - Cell: (cellProps: IHostTableNumberCellProps) => { - if ( - cellProps.row.original.platform === "ios" || - cellProps.row.original.platform === "ipados" - ) { - return NotSupported; - } - return ( - - ); - }, - }, - { - title: "MAC address", - Header: (cellProps: IHostTableHeaderProps) => ( - - ), - accessor: "primary_mac", - id: "primary_mac", - Cell: (cellProps: IHostTableStringCellProps) => { - // TODO(android): is iOS/iPadOS supported? - if (isAndroid(cellProps.row.original.platform)) { - return NotSupported; - } - return ; - }, - }, - { - title: "Serial number", - Header: (cellProps: IHostTableHeaderProps) => ( - - ), - accessor: "hardware_serial", - id: "hardware_serial", - Cell: (cellProps: IHostTableStringCellProps) => { - // TODO(android): is iOS/iPadOS supported? - if ( - isAndroid(cellProps.row.original.platform) || - isBYODAccountDrivenUserEnrollment( - cellProps.row.original.mdm.enrollment_status - ) - ) { - return NotSupported; - } - return ; - }, - }, - { - title: "Hardware model", - Header: (cellProps: IHostTableHeaderProps) => ( - - ), - accessor: "hardware_model", - id: "hardware_model", - Cell: (cellProps: IHostTableStringCellProps) => ( - - ), - }, ]; const defaultHiddenColumns = [