Queries and Scheduled Queries UI: Performance impact tooltips (#4201)

changes/issue-2750-performance-impact-information

@@ -0,0 +1 @@
+* UI clarifies performance impact of a query and its potential undetermined impact

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 <br /> resource consumption.
           </>
         );
+      case "Undetermined":
+        return (
+          <>
+            To see performance <br /> impact, this query must <br /> run as a
+            scheduled query <br /> on {hostDetails ? "this" : "at least one"}{" "}
+            host.
+          </>
+        );
       default:
         return null;
     }

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

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 (
+          <div>
+            <span className="queries-table__performance-impact-header">
+              Performance impact
+            </span>
+            <span
+              data-tip
+              data-for="queries-table__performance-impact-tooltip"
+              data-tip-disable={false}
+            >
+              <img alt="question icon" src={QuestionIcon} />
+            </span>
+            <ReactTooltip
+              className="queries-table__performance-impact-tooltip"
+              place="bottom"
+              type="dark"
+              effect="solid"
+              backgroundColor="#3e4771"
+              id="queries-table__performance-impact-tooltip"
+              data-html
+            >
+              <div style={{ textAlign: "center" }}>
+                This is the average <br />
+                performance impact <br />
+                across all hosts where this <br />
+                query was scheduled.
+              </div>
+            </ReactTooltip>
+          </div>
+        );
+      },
       disableSortBy: true,
       accessor: "performance",
       Cell: (cellProps) => <PillCell value={cellProps.cell.value} />,

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;
+  }
 }

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
+            <IconToolTip
+              isHtml
+              text={`This is the performance <br />impact on this host.`}
+            />
+          </>
+        );
+      },
       disableSortBy: true,
       accessor: "performance",
       Cell: (cellProps) => (
         <PillCell
           value={cellProps.cell.value}
           customIdPrefix="query-perf-pill"
+          hostDetails
         />
       ),
     },

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 (
+          <div>
+            <span className="queries-table__performance-impact-header">
+              Performance impact
+            </span>
+            <span
+              data-tip
+              data-for="queries-table__performance-impact-tooltip"
+              data-tip-disable={false}
+            >
+              <img alt="question icon" src={QuestionIcon} />
+            </span>
+            <ReactTooltip
+              className="queries-table__performance-impact-tooltip"
+              place="bottom"
+              type="dark"
+              effect="solid"
+              backgroundColor="#3e4771"
+              id="queries-table__performance-impact-tooltip"
+              data-html
+            >
+              <div style={{ textAlign: "center" }}>
+                This is the average <br />
+                performance impact <br />
+                across all hosts where this <br />
+                query was scheduled.
+              </div>
+            </ReactTooltip>
+          </div>
+        );
+      },
       disableSortBy: true,
       accessor: "performance",
       Cell: (cellProps) => (

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 {

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 (
+          <div>
+            <span className="queries-table__performance-impact-header">
+              Performance impact
+            </span>
+            <span
+              data-tip
+              data-for="queries-table__performance-impact-tooltip"
+              data-tip-disable={false}
+            >
+              <img alt="question icon" src={QuestionIcon} />
+            </span>
+            <ReactTooltip
+              className="queries-table__performance-impact-tooltip"
+              place="bottom"
+              type="dark"
+              effect="solid"
+              backgroundColor="#3e4771"
+              id="queries-table__performance-impact-tooltip"
+              data-html
+            >
+              <div style={{ textAlign: "center" }}>
+                This is the average <br />
+                performance impact <br />
+                across all hosts where this <br />
+                query was scheduled.
+              </div>
+            </ReactTooltip>
+          </div>
+        );
+      },
       disableSortBy: true,
       accessor: "performance",
       Cell: (cellProps) => <PillCell value={cellProps.cell.value} />,

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 {