From 733abe1aa776747a709d39374cbceebeafec6c8c Mon Sep 17 00:00:00 2001 From: RachelElysia <71795832+RachelElysia@users.noreply.github.com> Date: Mon, 18 Jul 2022 16:37:38 -0400 Subject: [PATCH] Manage Host Page: Render host disk space (#6593) --- .../StackedWhiteBoxes/StackedWhiteBoxes.jsx | 1 - .../CreateIntegrationModal.tsx | 2 - .../AddMemberModal/AddMemberModal.tsx | 2 +- .../hosts/ManageHostsPage/HostTableConfig.tsx | 65 ++++++++++++++++++- .../pages/hosts/ManageHostsPage/_styles.scss | 45 +++++++++++++ .../hosts/details/DeviceUserPage/_styles.scss | 6 ++ .../details/HostDetailsPage/_styles.scss | 6 ++ .../details/cards/HostSummary/HostSummary.tsx | 53 +++------------ frontend/utilities/helpers.ts | 27 +++++++- 9 files changed, 156 insertions(+), 51 deletions(-) diff --git a/frontend/components/StackedWhiteBoxes/StackedWhiteBoxes.jsx b/frontend/components/StackedWhiteBoxes/StackedWhiteBoxes.jsx index 84659d8821..454e16bd1a 100644 --- a/frontend/components/StackedWhiteBoxes/StackedWhiteBoxes.jsx +++ b/frontend/components/StackedWhiteBoxes/StackedWhiteBoxes.jsx @@ -3,7 +3,6 @@ import PropTypes from "prop-types"; import { Link } from "react-router"; import classnames from "classnames"; -import FleetIcon from "components/icons/FleetIcon"; import CloseIcon from "../../../assets/images/icon-close-fleet-black-16x16@2x.png"; const baseClass = "stacked-white-boxes"; diff --git a/frontend/pages/admin/IntegrationsPage/components/CreateIntegrationModal/CreateIntegrationModal.tsx b/frontend/pages/admin/IntegrationsPage/components/CreateIntegrationModal/CreateIntegrationModal.tsx index e6d3868db6..2eecd8a06d 100644 --- a/frontend/pages/admin/IntegrationsPage/components/CreateIntegrationModal/CreateIntegrationModal.tsx +++ b/frontend/pages/admin/IntegrationsPage/components/CreateIntegrationModal/CreateIntegrationModal.tsx @@ -3,8 +3,6 @@ import React, { useState, useEffect } from "react"; import Modal from "components/Modal"; // @ts-ignore import Dropdown from "components/forms/fields/Dropdown"; -// @ts-ignore -import FleetIcon from "components/icons/FleetIcon"; import Spinner from "components/Spinner"; import { IIntegration, IIntegrations } from "interfaces/integration"; import IntegrationForm from "../IntegrationForm"; diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AddMemberModal/AddMemberModal.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AddMemberModal/AddMemberModal.tsx index bb7a815c04..73e30002db 100644 --- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AddMemberModal/AddMemberModal.tsx +++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPage/components/AddMemberModal/AddMemberModal.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState, useEffect } from "react"; +import React, { useCallback, useState } from "react"; import { INewMembersBody, ITeam } from "interfaces/team"; import endpoints from "utilities/endpoints"; diff --git a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx index 07558f2e38..82cf3c5926 100644 --- a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx +++ b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx @@ -13,6 +13,8 @@ import LinkCell from "components/TableContainer/DataTable/LinkCell/LinkCell"; import StatusCell from "components/TableContainer/DataTable/StatusCell/StatusCell"; import TextCell from "components/TableContainer/DataTable/TextCell/TextCell"; import { + diskSpaceIndicator, + diskSpaceTooltip, humanHostMemory, humanHostUptime, humanHostLastSeen, @@ -54,6 +56,17 @@ interface ICellProps { }; } +interface INumberCellProps { + cell: { + value: number; + }; + row: { + original: IHost; + getToggleRowSelectedProps: () => IGetToggleAllRowsSelectedProps; + toggleRowSelected: () => void; + }; +} + interface IDeviceUserCellProps { cell: { value: IDeviceUser[]; @@ -176,7 +189,57 @@ const allHostTableHeaders: IDataColumn[] = [ ), }, { - title: "OS", + title: "Disk space available", + Header: (cellProps: IHeaderProps) => ( + + ), + accessor: "gigs_disk_space_available", + Cell: (cellProps: INumberCellProps): JSX.Element => { + const { id, percent_disk_space_available } = cellProps.row.original; + + if (cellProps.cell.value === 0) { + return <>No data available; + } + return ( + <> +
+
+
+
+
+ + + {diskSpaceTooltip(cellProps.cell.value)} + + {" "} + {cellProps.cell.value} GB + + ); + }, + }, + { + title: "Operating system", Header: (cellProps: IHeaderProps) => ( { - const diskSpaceTooltip = () => { - const diskSpaceAvailable = titleData.gigs_disk_space_available; - switch (true) { - case diskSpaceAvailable < 16: - return ( - - Not enough disk space
- available to install most
- small operating systems
- updates. - - ); - case diskSpaceAvailable < 32: - return ( - - Not enough disk space
- available to install most
- large operating systems
- updates. - - ); - default: - return ( - - Enough disk space available
- to install most operating
- systems updates. - - ); - } - }; - - const diskSpaceIndicator = () => { - const diskSpaceAvailable = titleData.gigs_disk_space_available; - switch (true) { - case diskSpaceAvailable < 16: - return "red"; - case diskSpaceAvailable < 32: - return "yellow"; - default: - return "green"; - } - }; if ( titleData && (titleData.gigs_disk_space_available > 0 || @@ -178,7 +137,9 @@ const HostSummary = ({ >
- {diskSpaceTooltip()} + + {diskSpaceTooltip(titleData.gigs_disk_space_available)} + {titleData.gigs_disk_space_available} GB available diff --git a/frontend/utilities/helpers.ts b/frontend/utilities/helpers.ts index 2b29e58235..f06587bee9 100644 --- a/frontend/utilities/helpers.ts +++ b/frontend/utilities/helpers.ts @@ -18,7 +18,6 @@ import { } from "interfaces/target"; import { ITeam, ITeamSummary } from "interfaces/team"; import { IUser } from "interfaces/user"; -import { IVulnerability } from "interfaces/vulnerability"; import stringUtils from "utilities/strings"; import sortUtils from "utilities/sort"; @@ -92,6 +91,30 @@ const isHost = (target: ISelectTargetsEntity) => { return "hostname" in target; }; +export const diskSpaceIndicator = (diskSpaceAvailable: number) => { + switch (true) { + case diskSpaceAvailable < 16: + return "red"; + case diskSpaceAvailable < 32: + return "yellow"; + default: + return "green"; + } +}; + +export const diskSpaceTooltip = ( + diskSpaceAvailable: number +): string | undefined => { + switch (true) { + case diskSpaceAvailable < 16: + return "Not enough disk space available to install most small operating systems updates."; + case diskSpaceAvailable < 32: + return "Not enough disk space available to install most large operating systems updates."; + default: + return "Enough disk space available to install most operating systems updates."; + } +}; + const filterTarget = (targetType: string) => { return (target: ISelectTargetsEntity) => { const id = @@ -804,6 +827,8 @@ export const wrapFleetHelper = ( export default { addGravatarUrlToResource, + diskSpaceIndicator, + diskSpaceTooltip, formatConfigDataForServer, formatLabelResponse, formatFloatAsPercentage,