mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 08:55:24 +00:00
Host Details Page UI: Granulated disk space levels (#6586)
This commit is contained in:
RachelElysia
GitHub
parent
541432eb7f
commit
9ce5ef2f59
1
changes/issue-6551-disk-space-host-details
Normal file
1
changes/issue-6551-disk-space-host-details
Normal file
@ -0,0 +1 @@
|
||||
* Host details page shows new disk space tooltip and 3 status levels
|
||||
@ -21,9 +21,9 @@ describe("Fleet Desktop", () => {
|
||||
cy.findByText(/my device/i).should("exist");
|
||||
cy.getAttached(".status--online").should("exist");
|
||||
cy.getAttached(".info-flex").within(() => {
|
||||
cy.findByText(/operating system/i)
|
||||
.next()
|
||||
.contains(/ubuntu 20/i);
|
||||
cy.findByText(/ubuntu 20/i)
|
||||
.prev()
|
||||
.contains(/operating system/i);
|
||||
});
|
||||
cy.getAttached(".info-grid").within(() => {
|
||||
cy.findByText(/private ip address/i)
|
||||
|
||||
@ -114,11 +114,11 @@ class TargetDetails extends Component {
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Operating System</th>
|
||||
<th>Operating system</th>
|
||||
<td>{osVersion}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Osquery Version</th>
|
||||
<th>Osquery version</th>
|
||||
<td>{osqueryVersion}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
@ -75,6 +75,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__disk-space-wrapper {
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
|
||||
&__disk-space {
|
||||
display: inline-block;
|
||||
height: 4px;
|
||||
@ -83,18 +91,24 @@
|
||||
border-radius: 2px;
|
||||
margin-right: $pad-small;
|
||||
overflow: hidden;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&__disk-space-used {
|
||||
&__disk-space-green {
|
||||
background-color: $ui-success;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__disk-space-warning {
|
||||
&__disk-space-yellow {
|
||||
background-color: $ui-warning;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__disk-space-red {
|
||||
background-color: $ui-error;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__header {
|
||||
color: $core-fleet-black;
|
||||
font-weight: $bold;
|
||||
@ -419,7 +433,11 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section--policies .data-table-block .data-table__table thead .response__header {
|
||||
.section--policies
|
||||
.data-table-block
|
||||
.data-table__table
|
||||
thead
|
||||
.response__header {
|
||||
width: $col-md;
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,6 +72,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__disk-space-wrapper {
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
|
||||
&__disk-space {
|
||||
display: inline-block;
|
||||
height: 4px;
|
||||
@ -80,18 +88,24 @@
|
||||
border-radius: 2px;
|
||||
margin-right: $pad-small;
|
||||
overflow: hidden;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&__disk-space-used {
|
||||
&__disk-space-green {
|
||||
background-color: $ui-success;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__disk-space-warning {
|
||||
&__disk-space-yellow {
|
||||
background-color: $ui-warning;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__disk-space-red {
|
||||
background-color: $ui-error;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__header {
|
||||
color: $core-fleet-black;
|
||||
font-weight: $bold;
|
||||
|
||||
@ -123,6 +123,49 @@ 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 ||
|
||||
@ -130,18 +173,29 @@ const HostSummary = ({
|
||||
) {
|
||||
return (
|
||||
<span className="info-flex__data">
|
||||
<div className="info-flex__disk-space">
|
||||
<div
|
||||
className={
|
||||
titleData.percent_disk_space_available > 20
|
||||
? "info-flex__disk-space-used"
|
||||
: "info-flex__disk-space-warning"
|
||||
}
|
||||
style={{
|
||||
width: `${100 - titleData.percent_disk_space_available}%`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="info-flex__disk-space-wrapper"
|
||||
data-tip
|
||||
data-for="disk-space-tooltip"
|
||||
>
|
||||
<div className="info-flex__disk-space">
|
||||
<div
|
||||
className={`info-flex__disk-space-${diskSpaceIndicator()}`}
|
||||
style={{
|
||||
width: `${100 - titleData.percent_disk_space_available}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ReactTooltip
|
||||
place="bottom"
|
||||
type="dark"
|
||||
effect="solid"
|
||||
id="disk-space-tooltip"
|
||||
backgroundColor="#3e4771"
|
||||
>
|
||||
{diskSpaceTooltip()}
|
||||
</ReactTooltip>
|
||||
{titleData.gigs_disk_space_available} GB available
|
||||
</span>
|
||||
);
|
||||
|
||||
@ -18,6 +18,11 @@ body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
|
||||
.__react_component_tooltip.show {
|
||||
opacity: 1; // Overrides 0.9 default opacity
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user