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
+
+
+
+
+
+
+ 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
+
+
+
+
+
+
+ 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
+
+
+
+
+
+
+ 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 {