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:
Gabriel Hernandez 2024-02-08 16:28:26 +00:00 committed by GitHub
parent ab55bd7bfd
commit f0cb1017b6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 65 additions and 7 deletions

View File

@ -0,0 +1 @@
- improve windows mdm profile error tooltip messages.

View File

@ -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">&nbsp;</div>
{/* Fixes triple click selecting next element in Safari */}
</>

View File

@ -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;

View File

@ -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}
/>
);
},