Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 08:58:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 111

Fleet UI: Fix disk space tooltip cut off, add tests (#18364)

Browse source
This commit is contained in:
RachelElysia 2024-04-18 09:38:39 -04:00 committed by GitHub
parent 4c69e9c656
commit fe259c7326
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 102 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
frontend/components/DiskSpaceGraph/DiskSpaceGraph.tests.tsx Normal file
View file

@ -0,0 +1,79 @@
import React from "react";
import { screen, render, fireEvent } from "@testing-library/react";
import DiskSpaceGraph from "./DiskSpaceGraph";
describe("Disk space graph", () => {
it("renders warning tooltip for <32gB when hovering over the yellow disk space graph for darwin or windows", async () => {
render(
<DiskSpaceGraph
baseClass="data-set"
gigsDiskSpaceAvailable={17}
percentDiskSpaceAvailable={10}
id="disk-space-graph"
platform="darwin"
tooltipPosition="bottom"
/>
);
expect(screen.getByTitle("disk space indicator")).toHaveStyle("width: 10%");
expect(screen.getByTitle("disk space indicator")).toHaveClass(
"data-set__disk-space--yellow"
);
await fireEvent.mouseOver(screen.getByTitle("disk space indicator"));
const tooltip = screen.getByText(
"Not enough disk space available to install most large operating systems updates."
);
expect(tooltip).toBeInTheDocument();
});
it("renders severe warning tooltip for <16 gBwhen hovering over the red disk space graph for darwin or windows", async () => {
render(
<DiskSpaceGraph
baseClass="data-set"
gigsDiskSpaceAvailable={5}
percentDiskSpaceAvailable={2}
id="disk-space-graph"
platform="windows"
tooltipPosition="bottom"
/>
);
expect(screen.getByTitle("disk space indicator")).toHaveStyle("width: 2%");
expect(screen.getByTitle("disk space indicator")).toHaveClass(
"data-set__disk-space--red"
);
await fireEvent.mouseOver(screen.getByTitle("disk space indicator"));
const tooltip = screen.getByText(
"Not enough disk space available to install most small operating systems updates."
);
expect(tooltip).toBeInTheDocument();
});
it("renders tooltip when hovering over the green disk space graph for darwin or windows", async () => {
render(
<DiskSpaceGraph
baseClass="data-set"
gigsDiskSpaceAvailable={33}
percentDiskSpaceAvailable={15}
id="disk-space-graph"
platform="windows"
tooltipPosition="bottom"
/>
);
expect(screen.getByTitle("disk space indicator")).toHaveStyle("width: 15%");
expect(screen.getByTitle("disk space indicator")).toHaveClass(
"data-set__disk-space--green"
);
await fireEvent.mouseOver(screen.getByTitle("disk space indicator"));
const tooltip = screen.getByText(
"Enough disk space available to install most operating systems updates."
);
expect(tooltip).toBeInTheDocument();
});
});

10
frontend/components/DiskSpaceGraph/DiskSpaceGraph.tsx
View file

@ -5,7 +5,7 @@ import { COLORS } from "styles/var/colors";
interface IDiskSpaceGraphProps {
baseClass: string;
gigsDiskSpaceAvailable: number | string;
gigsDiskSpaceAvailable: number | "---";
percentDiskSpaceAvailable: number;
id: string;
platform: string;
@ -20,6 +20,10 @@ const DiskSpaceGraph = ({
platform,
tooltipPosition = "top",
}: IDiskSpaceGraphProps): JSX.Element => {
if (gigsDiskSpaceAvailable === 0 || gigsDiskSpaceAvailable === "---") {
return <span className={`${baseClass}__data`}>No data available</span>;
}
const getDiskSpaceIndicatorColor = (): string => {
// return space-dependent graph colors for mac and windows hosts, green for linux
if (platform === "darwin" || platform === "windows") {
@ -44,10 +48,6 @@ const DiskSpaceGraph = ({
return undefined;
})();
if (gigsDiskSpaceAvailable === 0 || gigsDiskSpaceAvailable === "---") {
return <span className={`${baseClass}__data`}>No data available</span>;
}
return (
<span className={`${baseClass}__data`}>
<div

10
frontend/components/DiskSpaceGraph/_styles.scss
View file

@ -32,9 +32,11 @@
}
}
.disk-space-tooltip {
display: block;
white-space: normal;
max-width: 160px;
&__data {
.disk-space-tooltip {
display: block;
white-space: normal;
max-width: 160px;
}
}
}

20
frontend/pages/hosts/details/cards/HostSummary/HostSummary.tests.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { noop } from "lodash";
import { screen } from "@testing-library/react";
import { screen, waitFor } from "@testing-library/react";
import { createCustomRenderer } from "test/test-utils";
import createMockUser from "__mocks__/userMock";
@ -35,14 +35,18 @@ describe("Host Actions Dropdown", () => {
);
expect(screen.getByText("Agent")).toBeInTheDocument();
await user.hover(screen.getByText(new RegExp(orbitVersion, "i")));
await waitFor(() => {
waitFor(() => {
user.hover(screen.getByText(new RegExp(orbitVersion, "i")));
});
expect(
screen.getByText(new RegExp(osqueryVersion, "i"))
).toBeInTheDocument();
expect(
screen.getByText(new RegExp(fleetdVersion, "i"))
).toBeInTheDocument();
expect(
screen.getByText(new RegExp(osqueryVersion, "i"))
).toBeInTheDocument();
expect(
screen.getByText(new RegExp(fleetdVersion, "i"))
).toBeInTheDocument();
});
});
it("omit fleet desktop from tooltip if no fleet desktop version", async () => {