UI – Add and update performance impact features to uitilize metrics that include live query runs (#15642)

Merging during freeze with approval from all stakeholders, including verbal approval from @sharon-fdm 

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

frontend/components/modals/ShowQueryModal/ShowQueryModal.tsx

@@ -3,16 +3,19 @@ import React from "react";
 import FleetAce from "components/FleetAce";
 import Modal from "components/Modal";
 import Button from "components/buttons/Button";
+import PerformanceImpactCell from "components/TableContainer/DataTable/PerformanceImpactCell";
 
 const baseClass = "show-query-modal";
 
 interface IShowQueryModalProps {
   onCancel: () => void;
   query?: string;
+  impact?: string;
 }
 
 const ShowQueryModal = ({
   query,
+  impact,
   onCancel,
 }: IShowQueryModalProps): JSX.Element => {
   return (
@@ -30,6 +33,12 @@ const ShowQueryModal = ({
           wrapEnabled
           readOnly
         />
+        {impact && (
+          <div className={`${baseClass}__performance-impact`}>
+            Performance impact:{" "}
+            <PerformanceImpactCell value={{ indicator: impact }} />
+          </div>
+        )}
         <div className="modal-cta-wrap">
           <Button onClick={onCancel} variant="brand">
             Done

frontend/components/modals/ShowQueryModal/_styles.scss

@@ -1,4 +1,8 @@
 .show-query-modal {
+  display: flex;
+  flex-direction: column;
+  gap: $pad-large;
+
   .yaml-ace {
     min-height: 0;
   }
@@ -6,4 +10,24 @@
   .yaml-ace__label {
     height: 0;
   }
+
+  &__performance-impact {
+    display: flex;
+    align-items: center;
+    gap: $pad-small;
+
+    .data-table__pill {
+      font-size: $xxx-small;
+      font-weight: $xbold;
+      padding: 6px 12px;
+
+      .__react_component_tooltip {
+        @include tooltip-text;
+      }
+    }
+  }
+
+  .modal-cta-wrap {
+    margin-top: initial;
+  }
 }