From 6b08fc88cc75ebbb38dcfafc827beb661ea74fae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 6 Oct 2018 19:23:57 +0100
Subject: [PATCH] refactor(ui): drop alert count from silence preview

This will be confusing since we deduplicate receivers, drop the count and more info
---
 .../__snapshots__/index.test.js.snap             | 16 ++++++----------
 .../SilenceModal/SilencePreview/index.js         | 13 +++++++------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap b/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap
index a70beda82..b325ca1d5 100644
--- a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap
@@ -2,17 +2,13 @@
 
 exports[`<SilencePreview /> matches snapshot 1`] = `
 "
-<div class=\\"mb-2\\">
+<div class=\\"mb-3\\">
   <p class=\\"lead text-center\\">
-    This silence will match
-    <strong>
-      3
-    </strong>
-    alerts
+    Unique alert label sets (without receiver) matching this silence.
   </p>
   <div>
-    <ul class=\\"list-group list-group-flush px-2\\">
-      <li class=\\"list-group-item px-2 pt-2 pb-1\\">
+    <ul class=\\"list-group list-group-flush\\">
+      <li class=\\"list-group-item px-0 pt-2 pb-1\\">
         <span class=\\"components-label text-nowrap text-truncate badge badge-dark mw-100\\">
           alertname: foo
         </span>
@@ -23,7 +19,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
           instance: foo1
         </span>
       </li>
-      <li class=\\"list-group-item px-2 pt-2 pb-1\\">
+      <li class=\\"list-group-item px-0 pt-2 pb-1\\">
         <span class=\\"components-label text-nowrap text-truncate badge badge-dark mw-100\\">
           alertname: bar
         </span>
@@ -34,7 +30,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
           instance: bar1
         </span>
       </li>
-      <li class=\\"list-group-item px-2 pt-2 pb-1\\">
+      <li class=\\"list-group-item px-0 pt-2 pb-1\\">
         <span class=\\"components-label text-nowrap text-truncate badge badge-dark mw-100\\">
           alertname: bar
         </span>
diff --git a/ui/src/Components/SilenceModal/SilencePreview/index.js b/ui/src/Components/SilenceModal/SilencePreview/index.js
index ee83b4107..6f3144736 100644
--- a/ui/src/Components/SilenceModal/SilencePreview/index.js
+++ b/ui/src/Components/SilenceModal/SilencePreview/index.js
@@ -29,9 +29,9 @@ FetchError.propTypes = {
 };
 
 const Preview = ({ alertStore, labelsList }) => (
-  <ul className="list-group list-group-flush px-2">
+  <ul className="list-group list-group-flush">
     {labelsList.map(labels => (
-      <li key={hash(labels)} className="list-group-item px-2 pt-2 pb-1">
+      <li key={hash(labels)} className="list-group-item px-0 pt-2 pb-1">
         {Object.entries(labels).map(([name, value]) => (
           <StaticLabel
             key={name}
@@ -61,6 +61,8 @@ const SilencePreview = observer(
         alertLabels: [],
         error: null,
         fetch: null,
+        // take a list of groups and outputs a list of label sets, this ignores
+        // the receiver, so we'll end up with only unique alerts
         groupsToUniqueLabels(groups) {
           const alerts = {};
           for (const group of groups) {
@@ -123,15 +125,14 @@ const SilencePreview = observer(
 
       return (
         <React.Fragment>
-          <div className="mb-2">
+          <div className="mb-3">
             {this.matchedAlerts.error !== null ? (
               <FetchError message={this.matchedAlerts.error} />
             ) : (
               <React.Fragment>
                 <p className="lead text-center">
-                  This silence will match{" "}
-                  <strong>{this.matchedAlerts.alertLabels.length}</strong> alert
-                  {this.matchedAlerts.alertLabels.length > 1 ? "s" : ""}
+                  Unique alert label sets (without receiver) matching this
+                  silence.
                 </p>
                 <div>
                   <Preview