Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix export hosts csv UI and editing hidden columns UI #17691

Merged
merged 2 commits into from
Mar 19, 2024
Merged

Fix export hosts csv UI and editing hidden columns UI #17691

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a00c8b6
fix export csv
ghernandez345 Mar 18, 2024
0bd3cb3
fix hidden columns to use id now
ghernandez345 Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 30 additions & 10 deletions frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
<HeaderCell value="Hosts" isSortedDesc={cellProps.column.isSortedDesc} />
),
accessor: "display_name",
id: "display_name",
Cell: (cellProps: IHostTableStringCellProps) => {
if (
// if the host is pending, we want to disable the link to host details
Expand Down Expand Up @@ -175,6 +176,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
/>
),
accessor: "hostname",
id: "hostname",
Cell: (cellProps: IHostTableStringCellProps) => (
<TextCell value={cellProps.cell.value} />
),
Expand All @@ -188,6 +190,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
/>
),
accessor: "computer_name",
id: "computer_name",
Cell: (cellProps: IHostTableStringCellProps) => (
<TextCell value={cellProps.cell.value} />
),
Expand All @@ -198,6 +201,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
<HeaderCell value="Team" isSortedDesc={cellProps.column.isSortedDesc} />
),
accessor: "team_name",
id: "team_name",
Cell: (cellProps) => (
<TextCell value={cellProps.cell.value} formatter={hostTeamName} />
),
Expand Down Expand Up @@ -228,6 +232,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
},
disableSortBy: true,
accessor: "status",
id: "status",
Cell: (cellProps: IHostTableStringCellProps) => {
const value = cellProps.cell.value;
const tooltip = {
Expand All @@ -241,6 +246,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
Header: "Issues",
disableSortBy: true,
accessor: "issues",
id: "issues",
Cell: (cellProps: IIssuesCellProps) => (
<IssueCell
issues={cellProps.row.original.issues}
Expand All @@ -257,6 +263,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
/>
),
accessor: "gigs_disk_space_available",
id: "gigs_disk_space_available",
Cell: (cellProps: IHostTableNumberCellProps) => {
const {
id,
Expand Down Expand Up @@ -286,6 +293,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
/>
),
accessor: "os_version",
id: "os_version",
Cell: (cellProps: IHostTableStringCellProps) => (
<TextCell value={cellProps.cell.value} />
),
Expand All @@ -299,6 +307,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
/>
),
accessor: "osquery_version",
id: "osquery_version",
Cell: (cellProps: IHostTableStringCellProps) => (
<TextCell value={cellProps.cell.value} />
),
Expand All @@ -308,6 +317,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
Header: "Used by",
disableSortBy: true,
accessor: "device_mapping",
id: "device_mapping",
Cell: (cellProps: IDeviceUserCellProps) => {
const numUsers = cellProps.cell.value?.length || 0;
const users = condenseDeviceUsers(cellProps.cell.value || []);
Expand Down Expand Up @@ -350,6 +360,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
/>
),
accessor: "primary_ip",
id: "primary_ip",
Cell: (cellProps: IHostTableStringCellProps) => (
<TextCell value={cellProps.cell.value} />
),
Expand All @@ -374,7 +385,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
},
disableSortBy: true,
accessor: (originalRow) => originalRow.mdm.enrollment_status,
id: "mdm_enrollment_status",
id: "mdm.enrollment_status",
Cell: HostMdmStatusCell,
},
{
Expand All @@ -397,7 +408,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
},
disableSortBy: true,
accessor: (originalRow) => originalRow.mdm.server_url,
id: "mdm_server_url",
id: "mdm.server_url",
Cell: (cellProps: IHostTableStringCellProps) => {
if (cellProps.row.original.platform === "chrome") {
return NotSupported;
Expand All @@ -421,6 +432,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
/>
),
accessor: "public_ip",
id: "public_ip",
Cell: (cellProps: IHostTableStringCellProps) => {
return (
<TextCell value={cellProps.cell.value ?? DEFAULT_EMPTY_CELL_VALUE} />
Expand Down Expand Up @@ -450,6 +462,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
);
},
accessor: "detail_updated_at",
id: "detail_updated_at",
Cell: (cellProps: IHostTableStringCellProps) => (
<TextCell
value={{ timeString: cellProps.cell.value }}
Expand Down Expand Up @@ -480,6 +493,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
);
},
accessor: "seen_time",
id: "seen_time",
Cell: (cellProps: IHostTableStringCellProps) => (
<TextCell
value={{ timeString: cellProps.cell.value }}
Expand All @@ -493,6 +507,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
<HeaderCell value="UUID" isSortedDesc={cellProps.column.isSortedDesc} />
),
accessor: "uuid",
id: "uuid",
Cell: (cellProps: IHostTableStringCellProps) => (
<TooltipTruncatedTextCell value={cellProps.cell.value} />
),
Expand All @@ -506,6 +521,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
/>
),
accessor: "last_restarted_at",
id: "last_restarted_at",
Cell: (cellProps: IHostTableStringCellProps) => {
const { platform, last_restarted_at } = cellProps.row.original;

Expand All @@ -527,6 +543,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
Header: "CPU",
disableSortBy: true,
accessor: "cpu_type",
id: "cpu_type",
Cell: (cellProps: IHostTableStringCellProps) => (
<TextCell value={cellProps.cell.value} />
),
Expand All @@ -537,6 +554,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
<HeaderCell value="RAM" isSortedDesc={cellProps.column.isSortedDesc} />
),
accessor: "memory",
id: "memory",
Cell: (cellProps: IHostTableNumberCellProps) => (
<TextCell value={cellProps.cell.value} formatter={humanHostMemory} />
),
Expand All @@ -550,6 +568,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
/>
),
accessor: "primary_mac",
id: "primary_mac",
Cell: (cellProps: IHostTableStringCellProps) => (
<TextCell value={cellProps.cell.value} />
),
Expand All @@ -563,6 +582,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
/>
),
accessor: "hardware_serial",
id: "hardware_serial",
Cell: (cellProps: IHostTableStringCellProps) => (
<TextCell value={cellProps.cell.value} />
),
Expand All @@ -576,6 +596,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
/>
),
accessor: "hardware_model",
id: "hardware_model",
Cell: (cellProps: IHostTableStringCellProps) => (
<TextCell value={cellProps.cell.value} />
),
Expand All @@ -590,8 +611,8 @@ const defaultHiddenColumns = [
"public_ip",
"cpu_type",
// TODO: should those be mdm.<blah>?
"mdm_server_url",
"mdm_enrollment_status",
"mdm.server_url",
"mdm.enrollment_status",
"memory",
"uptime",
"uuid",
Expand All @@ -616,17 +637,17 @@ const generateAvailableTableHeaders = ({
// skip over column headers that are not shown in free observer tier
if (isFreeTier && isOnlyObserver) {
if (
currentColumn.accessor === "team_name" ||
currentColumn.id === "team_name" ||
currentColumn.id === "selection"
) {
return columns;
}
// skip over column headers that are not shown in free admin/maintainer
} else if (isFreeTier) {
if (
currentColumn.accessor === "team_name" ||
currentColumn.id === "mdm_server_url" ||
currentColumn.id === "mdm_enrollment_status"
currentColumn.id === "team_name" ||
currentColumn.id === "mdm.server_url" ||
currentColumn.id === "mdm.enrollment_status"
) {
return columns;
}
Expand All @@ -646,7 +667,6 @@ const generateAvailableTableHeaders = ({

/**
* Will generate a host table column configuration that a user currently sees.
*
*/
const generateVisibleTableColumns = ({
hiddenColumns,
Expand All @@ -660,7 +680,7 @@ const generateVisibleTableColumns = ({
// remove columns set as hidden by the user.
return generateAvailableTableHeaders({ isFreeTier, isOnlyObserver }).filter(
(column) => {
return !hiddenColumns.includes(column.accessor as string);
return !hiddenColumns.includes(column.id as string);
}
);
};
Expand Down
10 changes: 6 additions & 4 deletions frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1295,10 +1295,12 @@ const ManageHostsPage = ({
isOnlyObserver,
});

const columnAccessors = tableColumns
.map((column) => (column.accessor ? column.accessor : ""))
.filter((element) => element);
visibleColumns = columnAccessors.join(",");
const columnIds = tableColumns
.map((column) => (column.id ? column.id : ""))
// "selection" colum does not include any relevent data for the CSV
// so we filter it out.
.filter((element) => element !== "" && element !== "selection");
visibleColumns = columnIds.join(",");
}

let options = {
Expand Down
18 changes: 8 additions & 10 deletions frontend/pages/hosts/ManageHostsPage/components/EditColumnsModal/EditColumnsModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,17 @@ const useCheckboxListStateManagement = (allColumns, hiddenColumns) => {
return allColumns.map((column) => {
return {
name: column.title,
accessor: column.accessor,
isChecked: !hiddenColumns.includes(column.accessor),
id: column.id,
isChecked: !hiddenColumns.includes(column.id),
disableHidden: column.disableHidden,
};
});
});

const updateColumnItems = (columnAccessor) => {
const updateColumnItems = (columnId) => {
setColumnItems((prevState) => {
const selectedColumn = columnItems.find(
(column) => column.accessor === columnAccessor
(column) => column.id === columnId
);
const updatedColumn = {
...selectedColumn,
Expand All @@ -31,9 +31,7 @@ const useCheckboxListStateManagement = (allColumns, hiddenColumns) => {

// this is replacing the column object with the updatedColumn we just created.
const newState = prevState.map((currentColumn) => {
return currentColumn.accessor === columnAccessor
? updatedColumn
: currentColumn;
return currentColumn.id === columnId ? updatedColumn : currentColumn;
});
return newState;
});
Expand All @@ -45,7 +43,7 @@ const useCheckboxListStateManagement = (allColumns, hiddenColumns) => {
const getHiddenColumns = (columns) => {
return columns
.filter((column) => !column.isChecked)
.map((column) => column.accessor);
.map((column) => column.id);
};

const EditColumnsModal = ({
Expand All @@ -67,11 +65,11 @@ const EditColumnsModal = ({
{columnItems.map((column) => {
if (column.disableHidden) return null;
return (
<div key={column.accessor}>
<div key={column.id}>
<Checkbox
name={column.name}
value={column.isChecked}
onChange={() => updateColumnItems(column.accessor)}
onChange={() => updateColumnItems(column.id)}
>
<span>{column.name}</span>
</Checkbox>
Expand Down
Loading