From ba3a572604679032a0f7535373185d8b8e9344bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 11 Oct 2018 12:23:22 +0100
Subject: [PATCH] feat(ui): add tooltips to silence matcher counters

---
 .../SilenceModal/SilenceMatch/MatchCounter.js | 28 +++++++++++++------
 .../LabelValueInput.test.js.snap              | 15 ++++++----
 .../__snapshots__/MatchCounter.test.js.snap   | 17 +++++++----
 3 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js b/ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js
index 5b3d66974..37ccec5f2 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js
+++ b/ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js
@@ -14,6 +14,7 @@ import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclama
 import { FormatBackendURI, FormatAlertsQ } from "Stores/AlertStore";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { SilenceFormMatcher } from "Models/SilenceForm";
+import { TooltipWrapper } from "Components/TooltipWrapper";
 import { MatcherToFilter, AlertManagersToFilter } from "../Matchers";
 
 const MatchCounter = observer(
@@ -93,7 +94,16 @@ const MatchCounter = observer(
 
       if (this.matchedAlerts.error !== null) {
         return (
-          <FontAwesomeIcon className="text-danger" icon={faExclamationCircle} />
+          <TooltipWrapper
+            title={`Failed to fetch alerts matching this label: ${
+              this.matchedAlerts.error
+            }`}
+          >
+            <FontAwesomeIcon
+              className="text-danger"
+              icon={faExclamationCircle}
+            />
+          </TooltipWrapper>
         );
       }
 
@@ -107,13 +117,15 @@ const MatchCounter = observer(
       });
 
       return (
-        <span
-          className="badge badge-light badge-pill"
-          style={{ fontSize: "85%" }}
-          data-hash={matcherHash}
-        >
-          {this.matchedAlerts.total}
-        </span>
+        <TooltipWrapper title="Number of alerts matching this label">
+          <span
+            className="badge badge-light badge-pill"
+            style={{ fontSize: "85%" }}
+            data-hash={matcherHash}
+          >
+            {this.matchedAlerts.total}
+          </span>
+        </TooltipWrapper>
       );
     }
   }
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
index 185dfd6c6..855ac2f66 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
+++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
@@ -5,12 +5,17 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
 <div class=\\"css-10nd86i\\">
   <div class=\\"css-7jxtyj\\">
     <div class=\\"css-10war8y\\">
-      <span class=\\"badge badge-light badge-pill\\"
-            style=\\"font-size:85%\\"
-            data-hash=\\"76ea01a7b7d0189a690ed2b409ad07a87dbd039c\\"
+      <div title=\\"Number of alerts matching this label\\"
+           class
+           style=\\"display:inline\\"
       >
-        0
-      </span>
+        <span class=\\"badge badge-light badge-pill\\"
+              style=\\"font-size:85%\\"
+              data-hash=\\"76ea01a7b7d0189a690ed2b409ad07a87dbd039c\\"
+        >
+          0
+        </span>
+      </div>
       <div>
         <div class=\\"css-1492t68\\">
           Label value
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap
index 9064ad4b4..79623f9aa 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap
+++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap
@@ -2,11 +2,18 @@
 
 exports[`<MatchCounter /> matches snapshot with empty matcher 1`] = `
 "
-<span class=\\"badge badge-light badge-pill\\"
-      style=\\"font-size: 85%;\\"
-      data-hash=\\"2153b6623363af13fa91f1ad35fa4cfc6462d349\\"
+<div class
+     style=\\"display: inline;\\"
+     data-tooltipped
+     aria-describedby=\\"tippy-tooltip-1\\"
+     data-original-title=\\"Number of alerts matching this label\\"
 >
-  0
-</span>
+  <span class=\\"badge badge-light badge-pill\\"
+        style=\\"font-size: 85%;\\"
+        data-hash=\\"2153b6623363af13fa91f1ad35fa4cfc6462d349\\"
+  >
+    0
+  </span>
+</div>
 "
 `;