Fleet UI: Add tooltips to battery condition (#22550)

changes/19619-win-battery

@@ -1 +1,2 @@
-- Windows host details now include battery status
+- Windows host details now include battery status
+- UI includes information on how battery health is defined

frontend/pages/hosts/details/cards/About/About.tsx

@@ -13,6 +13,7 @@ import {
 import {
   DEFAULT_EMPTY_CELL_VALUE,
   MDM_STATUS_TOOLTIP,
+  BATTERY_TOOLTIP,
 } from "utilities/constants";
 import DataSet from "components/DataSet";
 
@@ -173,14 +174,21 @@ const About = ({
   const renderBattery = () => {
     if (
       aboutData.batteries === null ||
-      typeof aboutData.batteries !== "object"
+      typeof aboutData.batteries !== "object" ||
+      aboutData.batteries?.[0]?.health === "Unknown"
     ) {
       return null;
     }
     return (
       <DataSet
         title="Battery condition"
-        value={aboutData.batteries?.[0]?.health}
+        value={
+          <TooltipWrapper
+            tipContent={BATTERY_TOOLTIP[aboutData.batteries?.[0]?.health]}
+          >
+            {aboutData.batteries?.[0]?.health}
+          </TooltipWrapper>
+        }
       />
     );
   };

frontend/utilities/constants.tsx

@@ -336,6 +336,27 @@ export const MDM_STATUS_TOOLTIP: Record<string, string | React.ReactNode> = {
   ),
 };
 
+export const BATTERY_TOOLTIP: Record<string, string | React.ReactNode> = {
+  Normal: (
+    <span>
+      Current maximum capacity is at least
+      <br />
+      80% of its designed capacity and the
+      <br />
+      cycle count is below 1000.
+    </span>
+  ),
+  "Service recommended": (
+    <span>
+      Current maximum capacity has fallen
+      <br />
+      below 80% of its designed capacity
+      <br />
+      or the cycle count has reached 1000.
+    </span>
+  ),
+};
+
 export const DEFAULT_CREATE_USER_ERRORS = {
   email: "",
   name: "",