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 = [