mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 08:55:24 +00:00
Feat UI improve troubleshooting profile messaging (#16590)
related to #16417 Improve the error messages for windows mdm profile errors. This will now format the errors in the UI tooltip ![image](https://github.com/fleetdm/fleet/assets/1153709/a3f69d84-639f-47e9-b361-1cd7be238235)
This commit is contained in:
parent
ab55bd7bfd
commit
f0cb1017b6
@ -0,0 +1 @@
|
||||
- improve windows mdm profile error tooltip messages.
|
@ -7,7 +7,10 @@ import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
|
||||
import { COLORS } from "styles/var/colors";
|
||||
|
||||
interface ITooltipTruncatedTextCellProps {
|
||||
value: string | number | boolean;
|
||||
value: React.ReactNode;
|
||||
/** Tooltip to dispay. If this is provided then this will be rendered as the tooltip content. If
|
||||
* not the value will be displayed as the tooltip content. Defaults to `undefined` */
|
||||
tooltip?: React.ReactNode;
|
||||
/** If set to `true` the text inside the tooltip will break on words instead of any character.
|
||||
* By default the tooltip text breaks on any character.
|
||||
* Default is `false`.
|
||||
@ -20,6 +23,7 @@ const baseClass = "tooltip-truncated-cell";
|
||||
|
||||
const TooltipTruncatedTextCell = ({
|
||||
value,
|
||||
tooltip,
|
||||
tooltipBreakOnWord = false,
|
||||
classes = "w250",
|
||||
}: ITooltipTruncatedTextCellProps): JSX.Element => {
|
||||
@ -56,7 +60,7 @@ const TooltipTruncatedTextCell = ({
|
||||
delayHide={200} // need delay set to hover using clickable
|
||||
>
|
||||
<>
|
||||
{value}
|
||||
{tooltip ?? value}
|
||||
<div className="safari-hack"> </div>
|
||||
{/* Fixes triple click selecting next element in Safari */}
|
||||
</>
|
||||
|
@ -55,7 +55,7 @@ export interface IMdmSummaryResponse {
|
||||
mobile_device_management_solution: IMdmSolution[] | null;
|
||||
}
|
||||
|
||||
type ProfilePlatform = "darwin" | "windows";
|
||||
export type ProfilePlatform = "darwin" | "windows";
|
||||
|
||||
export interface IProfileLabel {
|
||||
name: string;
|
||||
|
@ -7,6 +7,7 @@ import {
|
||||
// FLEET_FILEVAULT_PROFILE_IDENTIFIER,
|
||||
IHostMdmProfile,
|
||||
MdmProfileStatus,
|
||||
ProfilePlatform,
|
||||
isWindowsDiskEncryptionStatus,
|
||||
} from "interfaces/mdm";
|
||||
import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
|
||||
@ -53,6 +54,46 @@ interface IDataColumn {
|
||||
sortType?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* generates the formatted tooltip for the error column.
|
||||
* the expected format of the error string is:
|
||||
* "key1: value1, key2: value2, key3: value3"
|
||||
*/
|
||||
const generateFormattedTooltip = (detail: string) => {
|
||||
const keyValuePairs = detail.split(/, */);
|
||||
const formattedElements = keyValuePairs.map((pair, index) => {
|
||||
const [key, value] = pair.split(/: */);
|
||||
return (
|
||||
<span key={key}>
|
||||
<b>{key.trim()}:</b> {value.trim()}
|
||||
{/* dont add the trailing comma for the last element */}
|
||||
{index !== keyValuePairs.length - 1 && (
|
||||
<>
|
||||
,<br />
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
});
|
||||
|
||||
return <>{formattedElements}</>;
|
||||
};
|
||||
|
||||
/**
|
||||
* generates the error tooltip for the error column. This will be formatted or
|
||||
* unformatted.
|
||||
*/
|
||||
const generateErrorTooltip = (
|
||||
cellValue: string,
|
||||
platform: ProfilePlatform,
|
||||
detail: string
|
||||
) => {
|
||||
if (platform !== "windows") {
|
||||
return cellValue;
|
||||
}
|
||||
return generateFormattedTooltip(detail);
|
||||
};
|
||||
|
||||
const tableHeaders: IDataColumn[] = [
|
||||
{
|
||||
title: "Name",
|
||||
@ -85,13 +126,25 @@ const tableHeaders: IDataColumn[] = [
|
||||
accessor: "detail",
|
||||
Cell: (cellProps: ICellProps): JSX.Element => {
|
||||
const profile = cellProps.row.original;
|
||||
|
||||
const value =
|
||||
(profile.status === "failed" && profile.detail) ||
|
||||
DEFAULT_EMPTY_CELL_VALUE;
|
||||
|
||||
const tooltip =
|
||||
profile.status === "failed"
|
||||
? generateErrorTooltip(
|
||||
value,
|
||||
cellProps.row.original.platform,
|
||||
profile.detail
|
||||
)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<TooltipTruncatedTextCell
|
||||
tooltipBreakOnWord
|
||||
value={
|
||||
(profile.status === "failed" && profile.detail) ||
|
||||
DEFAULT_EMPTY_CELL_VALUE
|
||||
}
|
||||
tooltip={tooltip}
|
||||
value={value}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user