Refactor PillCell; adjust content and tooltip (#2001)

frontend/components/TableContainer/DataTable/PillCell/PillCell.tsx

@@ -7,23 +7,44 @@ interface IPillCellProps {
   value: [string, number];
 }
 
+const CELL_WIDTH = 194;
+const CELL_PADDING = 27;
+
+const PILL_WIDTHS: Record<string, number> = {
+  Minimal: 75,
+  Considerable: 108,
+  Excessive: 86,
+  Denylisted: 71,
+};
+
+const getTooltipOffset = (pillText: string) => {
+  const offset: Record<string, number> = {};
+
+  if (PILL_WIDTHS[pillText]) {
+    offset.left = CELL_WIDTH / 2 - (PILL_WIDTHS[pillText] / 2 + CELL_PADDING);
+  }
+
+  return offset;
+};
+
 const generateClassTag = (rawValue: string): string => {
   return rawValue.replace(" ", "-").toLowerCase();
 };
 
 const PillCell = (props: IPillCellProps): JSX.Element => {
   const { value } = props;
+  const [pillText, id] = value;
 
   const pillClassName = classnames(
     "data-table__pill",
-    `data-table__pill--${generateClassTag(value[0])}`
+    `data-table__pill--${generateClassTag(pillText)}`
   );
 
   const disable = () => {
-    switch (value[0]) {
+    switch (pillText) {
       case "Minimal":
         return false;
-      case "Considerate":
+      case "Considerable":
         return false;
       case "Excessive":
         return false;
@@ -35,7 +56,7 @@ const PillCell = (props: IPillCellProps): JSX.Element => {
   };
 
   const tooltipText = () => {
-    switch (value[0]) {
+    switch (pillText) {
       case "Minimal":
         return (
           <>
@@ -44,7 +65,7 @@ const PillCell = (props: IPillCellProps): JSX.Element => {
             performance.
           </>
         );
-      case "Considerate":
+      case "Considerable":
         return (
           <>
             Running this query <br /> frequently can have a <br /> noticeable
@@ -72,19 +93,20 @@ const PillCell = (props: IPillCellProps): JSX.Element => {
 
   return (
     <>
-      <div data-tip data-for={value[1].toString()} data-tip-disable={disable()}>
-        <span className={pillClassName}>{value[0]}</span>
+      <div data-tip data-for={id.toString()} data-tip-disable={disable()}>
+        <span className={pillClassName}>{pillText}</span>
       </div>
       <ReactTooltip
         place="bottom"
+        offset={getTooltipOffset(pillText)}
         type="dark"
         effect="solid"
         backgroundColor="#3e4771"
-        id={value[1].toString()}
+        id={id.toString()}
         data-html
       >
         <span
-          className={`tooltip ${generateClassTag(value[0])}__tooltip-text`}
+          className={`tooltip ${generateClassTag(pillText)}__tooltip-text`}
           style={{ width: "196px" }}
         >
           {tooltipText()}

frontend/pages/hosts/HostDetailsPage/PackTable/PackTableConfig.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import HeaderCell from "components/TableContainer/DataTable/HeaderCell/HeaderCell";
 import TextCell from "components/TableContainer/DataTable/TextCell";
 import PillCell from "components/TableContainer/DataTable/PillCell";
 import { IQueryStats } from "interfaces/query_stats";
@@ -54,7 +53,7 @@ const performanceIndicator = (scheduledQuery: IQueryStats): string => {
     return "Minimal";
   }
   if (indicator >= 2000 && indicator <= 4000) {
-    return "Considerate";
+    return "Considerable";
   }
   return "Excessive";
 };

frontend/pages/hosts/HostDetailsPage/_styles.scss

@@ -482,7 +482,7 @@
       background-color: $ui-vibrant-blue-10;
     }
 
-    .data-table__pill--considerate {
+    .data-table__pill--considerable {
       background-color: $ui-vibrant-blue-25;
     }