diff --git a/changes/issue-2750-performance-impact-information b/changes/issue-2750-performance-impact-information new file mode 100644 index 0000000000..6f01835f20 --- /dev/null +++ b/changes/issue-2750-performance-impact-information @@ -0,0 +1 @@ +* UI clarifies performance impact of a query and its potential undetermined impact \ No newline at end of file diff --git a/frontend/components/TableContainer/DataTable/PillCell/PillCell.tsx b/frontend/components/TableContainer/DataTable/PillCell/PillCell.tsx index 243a4dc58e..b3d3e8ef35 100644 --- a/frontend/components/TableContainer/DataTable/PillCell/PillCell.tsx +++ b/frontend/components/TableContainer/DataTable/PillCell/PillCell.tsx @@ -7,13 +7,18 @@ import ReactTooltip from "react-tooltip"; interface IPillCellProps { value: [string, number]; customIdPrefix?: string; + hostDetails?: boolean; } const generateClassTag = (rawValue: string): string => { return rawValue.replace(" ", "-").toLowerCase(); }; -const PillCell = ({ value, customIdPrefix }: IPillCellProps): JSX.Element => { +const PillCell = ({ + value, + customIdPrefix, + hostDetails, +}: IPillCellProps): JSX.Element => { const [pillText, id] = value; const pillClassName = classnames( @@ -29,6 +34,8 @@ const PillCell = ({ value, customIdPrefix }: IPillCellProps): JSX.Element => { return false; case "Excessive": return false; + case "Undetermined": + return false; default: return true; } @@ -65,6 +72,14 @@ const PillCell = ({ value, customIdPrefix }: IPillCellProps): JSX.Element => { excessive
resource consumption. ); + case "Undetermined": + return ( + <> + To see performance
impact, this query must
run as a + scheduled query
on {hostDetails ? "this" : "at least one"}{" "} + host. + + ); default: return null; } diff --git a/frontend/components/TableContainer/DataTable/_styles.scss b/frontend/components/TableContainer/DataTable/_styles.scss index b838c94944..f6068b6989 100644 --- a/frontend/components/TableContainer/DataTable/_styles.scss +++ b/frontend/components/TableContainer/DataTable/_styles.scss @@ -57,7 +57,7 @@ img { width: 16px; height: 16px; - vertical-align: sub; + vertical-align: top; } // do not resize button icons inside headers diff --git a/frontend/components/queries/PackQueriesListWrapper/PackQueriesTable/PackQueriesTableConfig.tsx b/frontend/components/queries/PackQueriesListWrapper/PackQueriesTable/PackQueriesTableConfig.tsx index 0cadf08e1b..8208e80205 100644 --- a/frontend/components/queries/PackQueriesListWrapper/PackQueriesTable/PackQueriesTableConfig.tsx +++ b/frontend/components/queries/PackQueriesListWrapper/PackQueriesTable/PackQueriesTableConfig.tsx @@ -2,6 +2,7 @@ // disable this rule as it was throwing an error in Header and Cell component // definitions for the selection row for some reason when we dont really need it. import React from "react"; +import ReactTooltip from "react-tooltip"; import { find } from "lodash"; import { performanceIndicator } from "fleet/helpers"; @@ -12,6 +13,7 @@ import PillCell from "components/TableContainer/DataTable/PillCell"; import TextCell from "components/TableContainer/DataTable/TextCell"; import { IScheduledQuery } from "interfaces/scheduled_query"; import { IDropdownOption } from "interfaces/dropdownOption"; +import QuestionIcon from "../../../../../assets/images/icon-question-16x16@2x.png"; interface IGetToggleAllRowsSelectedProps { checked: boolean; @@ -119,7 +121,38 @@ const generateTableHeaders = ( }, { title: "Performance impact", - Header: "Performance impact", + Header: () => { + return ( +
+ + Performance impact + + + question icon + + +
+ This is the average
+ performance impact
+ across all hosts where this
+ query was scheduled. +
+
+
+ ); + }, disableSortBy: true, accessor: "performance", Cell: (cellProps) => , diff --git a/frontend/components/queries/PackQueriesListWrapper/_styles.scss b/frontend/components/queries/PackQueriesListWrapper/_styles.scss index 9e0e667d91..fdffb18f15 100644 --- a/frontend/components/queries/PackQueriesListWrapper/_styles.scss +++ b/frontend/components/queries/PackQueriesListWrapper/_styles.scss @@ -40,4 +40,12 @@ font-size: $x-small; font-weight: $bold; } + + .queries-table__performance-impact-header { + margin-right: $pad-small; + } + + .queries-table__performance-impact-tooltip { + font-weight: 400; + } } diff --git a/frontend/pages/hosts/HostDetailsPage/PackTable/PackTableConfig.tsx b/frontend/pages/hosts/HostDetailsPage/PackTable/PackTableConfig.tsx index 9b460d49e6..b6393240e7 100644 --- a/frontend/pages/hosts/HostDetailsPage/PackTable/PackTableConfig.tsx +++ b/frontend/pages/hosts/HostDetailsPage/PackTable/PackTableConfig.tsx @@ -1,4 +1,5 @@ import React from "react"; +import ReactTooltip from "react-tooltip"; import { uniqueId } from "lodash"; import TextCell from "components/TableContainer/DataTable/TextCell"; @@ -79,13 +80,24 @@ const generatePackTableHeaders = (): IDataColumn[] => { }, { title: "Performance impact", - Header: "Performance impact", + Header: () => { + return ( + <> + Performance impact + impact on this host.`} + /> + + ); + }, disableSortBy: true, accessor: "performance", Cell: (cellProps) => ( ), }, diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesTableConfig.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesTableConfig.tsx index 000d34ae21..4f1599d711 100644 --- a/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesTableConfig.tsx +++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesTableConfig.tsx @@ -21,6 +21,7 @@ import PATHS from "router/paths"; import { IQuery } from "interfaces/query"; import { IUser } from "interfaces/user"; import { addGravatarUrlToResource } from "fleet/helpers"; +import QuestionIcon from "../../../../../../assets/images/icon-question-16x16@2x.png"; interface IQueryRow { id: string; @@ -106,7 +107,38 @@ const generateTableHeaders = (currentUser: IUser): IDataColumn[] => { }, { title: "Performance impact", - Header: "Performance impact", + Header: () => { + return ( +
+ + Performance impact + + + question icon + + +
+ This is the average
+ performance impact
+ across all hosts where this
+ query was scheduled. +
+
+
+ ); + }, disableSortBy: true, accessor: "performance", Cell: (cellProps) => ( diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/_styles.scss b/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/_styles.scss index 5d63d0c86c..0ebabdce78 100644 --- a/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/_styles.scss +++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/_styles.scss @@ -33,6 +33,14 @@ font-size: $x-small; color: $core-fleet-black; } + + .queries-table__performance-impact-header { + margin-right: $pad-small; + } + + .queries-table__performance-impact-tooltip { + font-weight: 400; + } } .no-queries { diff --git a/frontend/pages/schedule/ManageSchedulePage/components/ScheduleListWrapper/ScheduleTableConfig.tsx b/frontend/pages/schedule/ManageSchedulePage/components/ScheduleListWrapper/ScheduleTableConfig.tsx index 7c33e86a19..c194de8e56 100644 --- a/frontend/pages/schedule/ManageSchedulePage/components/ScheduleListWrapper/ScheduleTableConfig.tsx +++ b/frontend/pages/schedule/ManageSchedulePage/components/ScheduleListWrapper/ScheduleTableConfig.tsx @@ -2,6 +2,7 @@ // disable this rule as it was throwing an error in Header and Cell component // definitions for the selection row for some reason when we dont really need it. import React from "react"; +import ReactTooltip from "react-tooltip"; import { performanceIndicator, secondsToDhms } from "fleet/helpers"; // @ts-ignore @@ -12,6 +13,7 @@ import PillCell from "components/TableContainer/DataTable/PillCell"; import { IDropdownOption } from "interfaces/dropdownOption"; import { IGlobalScheduledQuery } from "interfaces/global_scheduled_query"; import { ITeamScheduledQuery } from "interfaces/team_scheduled_query"; +import QuestionIcon from "../../../../../../assets/images/icon-question-16x16@2x.png"; interface IGetToggleAllRowsSelectedProps { checked: boolean; @@ -107,7 +109,38 @@ const generateTableHeaders = ( }, { title: "Performance impact", - Header: "Performance impact", + Header: () => { + return ( +
+ + Performance impact + + + question icon + + +
+ This is the average
+ performance impact
+ across all hosts where this
+ query was scheduled. +
+
+
+ ); + }, disableSortBy: true, accessor: "performance", Cell: (cellProps) => , diff --git a/frontend/pages/schedule/ManageSchedulePage/components/ScheduleListWrapper/_styles.scss b/frontend/pages/schedule/ManageSchedulePage/components/ScheduleListWrapper/_styles.scss index 995f31597f..e377c8142c 100644 --- a/frontend/pages/schedule/ManageSchedulePage/components/ScheduleListWrapper/_styles.scss +++ b/frontend/pages/schedule/ManageSchedulePage/components/ScheduleListWrapper/_styles.scss @@ -69,6 +69,14 @@ margin: 0 12px 0 0; display: inline-block; } + + .queries-table__performance-impact-header { + margin-right: $pad-small; + } + + .queries-table__performance-impact-tooltip { + font-weight: 400; + } } .no-schedule {