Manage Host Page: Render host disk space (#6593)

2026-05-23 17:08:53 +00:00 · 2022-07-18 16:37:38 -04:00 · 2022-07-18 16:37:38 -04:00 · 733abe1aa7
commit 733abe1aa7
parent f4dcd73fed
9 changed files with 156 additions and 51 deletions
--- 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";
--- 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";
--- 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";
--- 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) => (
+      <HeaderCell
+        value={cellProps.column.title}
+        isSortedDesc={cellProps.column.isSortedDesc}
+      />
+    ),
+    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 (
+        <>
+          <div
+            className="gigs_disk_space_available__cell__disk-space-wrapper"
+            data-tip
+            data-for={`disk-space__${id}`}
+          >
+            <div className="gigs_disk_space_available__cell__disk-space">
+              <div
+                className={`gigs_disk_space_available__cell__disk-space-${diskSpaceIndicator(
+                  cellProps.cell.value
+                )}`}
+                style={{
+                  width: `${100 - percent_disk_space_available}%`,
+                }}
+              />
+            </div>
+          </div>
+          <ReactTooltip
+            place="bottom"
+            type="dark"
+            effect="solid"
+            backgroundColor="#3e4771"
+            id={`disk-space__${id}`}
+            data-html
+          >
+            <span className={`tooltip__tooltip-text`}>
+              {diskSpaceTooltip(cellProps.cell.value)}
+            </span>
+          </ReactTooltip>{" "}
+          <span>{cellProps.cell.value} GB</span>
+        </>
+      );
+    },
+  },
+  {
+    title: "Operating system",
    Header: (cellProps: IHeaderProps) => (
      <HeaderCell
        value={cellProps.column.title}
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss
@ -135,6 +135,51 @@
                  color: $ui-fleet-black-50;
                }
              }
+
+              .gigs_disk_space_available__cell {
+                overflow: auto;
+                white-space: nowrap;
+
+                &__disk-space-wrapper {
+                  display: inline-block;
+
+                  &:hover {
+                    cursor: help;
+                  }
+                }
+
+                &__disk-space {
+                  display: inline-block;
+                  height: 4px;
+                  width: 50px;
+                  background-color: $ui-fleet-blue-15;
+                  border-radius: 2px;
+                  margin-right: $pad-small;
+                  overflow: hidden;
+                  margin-bottom: 2px;
+                }
+
+                &__disk-space-green {
+                  background-color: $ui-success;
+                  height: 100%;
+                }
+
+                &__disk-space-yellow {
+                  background-color: $ui-warning;
+                  height: 100%;
+                }
+
+                &__disk-space-red {
+                  background-color: $ui-error;
+                  height: 100%;
+                }
+
+                .tooltip__tooltip-text {
+                  display: block;
+                  white-space: normal;
+                  max-width: 160px;
+                }
+              }
            }
          }
        }
--- a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
+++ b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
@ -105,6 +105,12 @@
        height: 100%;
      }

+      #disk-space-tooltip {
+        display: block;
+        white-space: normal;
+        max-width: 160px;
+      }
+
      &__header {
        color: $core-fleet-black;
        font-weight: $bold;
--- a/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
+++ b/frontend/pages/hosts/details/HostDetailsPage/_styles.scss
@ -102,6 +102,12 @@
        height: 100%;
      }

+      #disk-space-tooltip {
+        display: block;
+        white-space: normal;
+        max-width: 160px;
+      }
+
      &__header {
        color: $core-fleet-black;
        font-weight: $bold;
--- a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
+++ b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx
@ -4,6 +4,8 @@ import ReactTooltip from "react-tooltip";

 import Button from "components/buttons/Button";
 import {
+  diskSpaceIndicator,
+  diskSpaceTooltip,
  humanHostMemory,
  humanHostDetailUpdated,
  wrapFleetHelper,
@ -121,49 +123,6 @@ const HostSummary = ({
  );

  const renderDiskSpace = () => {
-    const diskSpaceTooltip = () => {
-      const diskSpaceAvailable = titleData.gigs_disk_space_available;
-      switch (true) {
-        case diskSpaceAvailable < 16:
-          return (
-            <span className={`${baseClass}__tooltip-text`}>
-              Not enough disk space <br />
-              available to install most <br />
-              small operating systems <br />
-              updates.
-            </span>
-          );
-        case diskSpaceAvailable < 32:
-          return (
-            <span className={`${baseClass}__tooltip-text`}>
-              Not enough disk space <br />
-              available to install most <br />
-              large operating systems <br />
-              updates.
-            </span>
-          );
-        default:
-          return (
-            <span className={`${baseClass}__tooltip-text`}>
-              Enough disk space available <br />
-              to install most operating <br />
-              systems updates.
-            </span>
-          );
-      }
-    };
-
-    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 = ({
          >
            <div className="info-flex__disk-space">
              <div
-                className={`info-flex__disk-space-${diskSpaceIndicator()}`}
+                className={`info-flex__disk-space-${diskSpaceIndicator(
+                  titleData.gigs_disk_space_available
+                )}`}
                style={{
                  width: `${100 - titleData.percent_disk_space_available}%`,
                }}
@ -192,7 +153,9 @@ const HostSummary = ({
            id="disk-space-tooltip"
            backgroundColor="#3e4771"
          >
-            {diskSpaceTooltip()}
+            <span className={`${baseClass}__tooltip-text`}>
+              {diskSpaceTooltip(titleData.gigs_disk_space_available)}
+            </span>
          </ReactTooltip>
          {titleData.gigs_disk_space_available} GB available
        </span>
--- 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,