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

Fix unreleased issues in software installers UI: Part 5 (#19033)

Browse source
This commit is contained in:
Sarah Gillespie 2024-05-15 12:43:12 -05:00 committed by GitHub
parent 40dc8e57ed
commit 48684fb6ca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 35 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
frontend/pages/hosts/details/cards/Software/InstallStatusCell/InstallStatusCell.tsx
View file

@ -1,10 +1,12 @@
import React, { ReactNode } from "react";
import ReactTooltip from "react-tooltip";
import { uniqueId } from "lodash";
import { SoftwareInstallStatus } from "interfaces/software";
import { dateAgo } from "utilities/date_format";
import Icon from "components/Icon";
import TooltipWrapper from "components/TooltipWrapper";
import TextCell from "components/TableContainer/DataTable/TextCell";
const baseClass = "install-status-cell";
@ -77,20 +79,30 @@ const InstallStatusCell = ({
}
const displayConfig = CELL_DISPLAY_OPTIONS[displayStatus];
const tooltipId = uniqueId();
return (
<TooltipWrapper
tipContent={displayConfig.tooltip(packageToInstall, installedAt)}
underline={false}
className={baseClass}
tooltipClass={`${baseClass}__status-tooltip`}
position="top"
>
<div className={`${baseClass}__status-content`}>
<div className={`${baseClass}__status-content`}>
<div
className={`${baseClass}__status-with-tooltip`}
data-tip
data-for={tooltipId}
>
<Icon name={displayConfig.iconName} />
<span>{displayConfig.displayText}</span>
</div>
</TooltipWrapper>
<ReactTooltip
className={`${baseClass}__status-tooltip`}
effect="solid"
backgroundColor="#3e4771"
id={tooltipId}
data-html
>
<span className={`${baseClass}__status-tooltip-text`}>
{displayConfig.tooltip(packageToInstall, installedAt)}
</span>
</ReactTooltip>
<span>{displayConfig.displayText}</span>
</div>
);
};

4
frontend/pages/hosts/details/cards/Software/InstallStatusCell/_styles.scss
View file

@ -8,4 +8,8 @@
&__status-tooltip {
text-align: center;
}
&__status-tooltip-text {
font-size: $xx-small;
}
}

10
frontend/pages/hosts/details/cards/Software/Software.tsx
View file

@ -2,6 +2,7 @@ import React, { useCallback, useContext, useMemo, useState } from "react";
import { InjectedRouter } from "react-router";
import { useQuery } from "react-query";
import { AxiosError } from "axios";
import { trimEnd, upperFirst } from "lodash";
import hostAPI, {
IGetHostSoftwareResponse,
@ -166,9 +167,14 @@ const SoftwareCard = ({
"Software is installing or will install when the host comes online."
);
} catch (e) {
const reason = getErrorReason(e);
const reason = upperFirst(trimEnd(getErrorReason(e), "."));
if (reason.includes("fleetd installed")) {
renderFlash("error", reason);
renderFlash("error", `Couldn't install. ${reason}.`);
} else if (reason.includes("can be installed only on")) {
renderFlash(
"error",
`Couldn't install. ${reason.replace("darwin", "macOS")}.`
);
} else {
renderFlash("error", "Couldn't install. Please try again.");
}