From f3572dba611e852bc61c7fc683186e626ebd4d40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 26 Oct 2019 17:46:02 +0100
Subject: [PATCH] fix(ui): tweak silence display

---
 .../__snapshots__/index.test.js.snap          |  68 ++++++---
 .../ManagedSilence/SilenceComment.js          |  21 ++-
 .../__snapshots__/SilenceComment.test.js.snap | 104 ++++++++++---
 .../__snapshots__/index.test.js.snap          | 142 +++++++++++-------
 ui/src/Components/ManagedSilence/index.js     |  11 +-
 5 files changed, 234 insertions(+), 112 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
index 4e1fbe5fc..0d6ef4eb1 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
@@ -287,34 +287,54 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
     link
   </a>
   <div class=\\"components-grid-alertgrid-alertgroup-shared-silence rounded-0 border-0\\">
-    <div class=\\"card mb-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
+    <div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
       <div class=\\"card-header border-bottom-0\\">
         <div class=\\"d-flex flex-row justify-content-between\\">
           <div class=\\"flex-grow-1 flex-shrink-1 mr-2\\">
             <span class=\\"my-1\\">
-              <span class=\\"font-italic\\"
-                    width=\\"0\\"
-              >
-                <span>
-                </span>
-                <span>
-                  Mocked Silence
-                </span>
-                <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
-                  …
-                </span>
-              </span>
-              <span class=\\"blockquote-footer pt-1\\">
-                <cite class=\\"components-grid-alertgroup-silences mr-2\\">
-                  me@example.com
-                </cite>
-                <span class=\\"badge badge-danger align-text-bottom p-1\\">
-                  Expired
-                  <time datetime=\\"946688400000\\">
-                    14 hours ago
-                  </time>
-                </span>
-              </span>
+              <div class=\\"d-flex flex-row\\">
+                <div class=\\"flex-shrink-0 flex-grow-0  mr-2\\">
+                  <svg aria-hidden=\\"true\\"
+                       focusable=\\"false\\"
+                       data-prefix=\\"fas\\"
+                       data-icon=\\"bell-slash\\"
+                       class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
+                       role=\\"img\\"
+                       xmlns=\\"http://www.w3.org/2000/svg\\"
+                       viewbox=\\"0 0 640 512\\"
+                  >
+                    <path fill=\\"currentColor\\"
+                          d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
+                    >
+                    </path>
+                  </svg>
+                </div>
+                <div class=\\"flex-shrink-1 flex-grow-1\\">
+                  <span class=\\"font-italic\\"
+                        width=\\"0\\"
+                  >
+                    <span>
+                    </span>
+                    <span>
+                      Mocked Silence
+                    </span>
+                    <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
+                      …
+                    </span>
+                  </span>
+                  <span class=\\"blockquote-footer pt-1\\">
+                    <cite class=\\"components-grid-alertgroup-silences mr-2\\">
+                      me@example.com
+                    </cite>
+                    <span class=\\"badge badge-danger align-text-bottom p-1\\">
+                      Expired
+                      <time datetime=\\"946688400000\\">
+                        14 hours ago
+                      </time>
+                    </span>
+                  </span>
+                </div>
+              </div>
             </span>
           </div>
           <div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
diff --git a/ui/src/Components/ManagedSilence/SilenceComment.js b/ui/src/Components/ManagedSilence/SilenceComment.js
index fb3ca1f6c..a171c3b7e 100644
--- a/ui/src/Components/ManagedSilence/SilenceComment.js
+++ b/ui/src/Components/ManagedSilence/SilenceComment.js
@@ -5,14 +5,29 @@ import Truncate from "react-truncate";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
+import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash";
 
 import { APISilence } from "Models/API";
+import { SilenceProgress } from "./SilenceProgress";
 
 const SilenceComment = ({ silence, collapsed, afterUpdate }) => {
   const comment = (
-    <Truncate className="font-italic" lines={collapsed ? 2 : false}>
-      {silence.comment}
-    </Truncate>
+    <div className="d-flex flex-row">
+      <div className="flex-shrink-0 flex-grow-0  mr-2">
+        <FontAwesomeIcon icon={faBellSlash} className="text-muted" />
+      </div>
+      <div className="flex-shrink-1 flex-grow-1">
+        <Truncate className="font-italic" lines={collapsed ? 2 : false}>
+          {silence.comment}
+        </Truncate>
+        <span className="blockquote-footer pt-1">
+          <cite className="components-grid-alertgroup-silences mr-2">
+            {silence.createdBy}
+          </cite>
+          {collapsed ? <SilenceProgress silence={silence} /> : null}
+        </span>
+      </div>
+    </div>
   );
   if (silence.jiraURL) {
     return (
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
index 16ef62d63..754ad97fc 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
@@ -2,34 +2,90 @@
 
 exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
 "
-<span class=\\"font-italic\\"
-      width=\\"0\\"
->
-  <span>
-  </span>
-  <span>
-    Mocked Silence
-  </span>
-  <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
-    …
-  </span>
-</span>
+<div class=\\"d-flex flex-row\\">
+  <div class=\\"flex-shrink-0 flex-grow-0  mr-2\\">
+    <svg aria-hidden=\\"true\\"
+         focusable=\\"false\\"
+         data-prefix=\\"fas\\"
+         data-icon=\\"bell-slash\\"
+         class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
+         role=\\"img\\"
+         xmlns=\\"http://www.w3.org/2000/svg\\"
+         viewbox=\\"0 0 640 512\\"
+    >
+      <path fill=\\"currentColor\\"
+            d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
+      >
+      </path>
+    </svg>
+  </div>
+  <div class=\\"flex-shrink-1 flex-grow-1\\">
+    <span class=\\"font-italic\\"
+          width=\\"0\\"
+    >
+      <span>
+      </span>
+      <span>
+        Mocked Silence
+      </span>
+      <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
+        …
+      </span>
+    </span>
+    <span class=\\"blockquote-footer pt-1\\">
+      <cite class=\\"components-grid-alertgroup-silences mr-2\\">
+        me@example.com
+      </cite>
+      <span class=\\"badge badge-danger align-text-bottom p-1\\">
+        Expired
+        <time datetime=\\"946688400000\\">
+          20 years ago
+        </time>
+      </span>
+    </span>
+  </div>
+</div>
 "
 `;
 
 exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
 "
-<span class=\\"font-italic\\"
-      width=\\"0\\"
->
-  <span>
-  </span>
-  <span>
-    Mocked Silence
-  </span>
-  <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
-    …
-  </span>
-</span>
+<div class=\\"d-flex flex-row\\">
+  <div class=\\"flex-shrink-0 flex-grow-0  mr-2\\">
+    <svg aria-hidden=\\"true\\"
+         focusable=\\"false\\"
+         data-prefix=\\"fas\\"
+         data-icon=\\"bell-slash\\"
+         class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
+         role=\\"img\\"
+         xmlns=\\"http://www.w3.org/2000/svg\\"
+         viewbox=\\"0 0 640 512\\"
+    >
+      <path fill=\\"currentColor\\"
+            d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
+      >
+      </path>
+    </svg>
+  </div>
+  <div class=\\"flex-shrink-1 flex-grow-1\\">
+    <span class=\\"font-italic\\"
+          width=\\"0\\"
+    >
+      <span>
+      </span>
+      <span>
+        Mocked Silence
+      </span>
+      <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
+        …
+      </span>
+    </span>
+    <span class=\\"blockquote-footer pt-1\\">
+      <cite class=\\"components-grid-alertgroup-silences mr-2\\">
+        me@example.com
+      </cite>
+    </span>
+  </div>
+</div>
 "
 `;
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
index 916890ea0..ae8eda9f4 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
@@ -2,44 +2,64 @@
 
 exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
 "
-<div class=\\"card mb-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
+<div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
   <div class=\\"card-header border-bottom-0\\">
     <div class=\\"d-flex flex-row justify-content-between\\">
       <div class=\\"flex-grow-1 flex-shrink-1 mr-2\\">
         <span class=\\"my-1\\">
-          <span class=\\"font-italic\\"
-                width=\\"0\\"
-          >
-            <span>
-            </span>
-            <span>
-              Mocked Silence
-            </span>
-            <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
-              …
-            </span>
-          </span>
-          <span class=\\"blockquote-footer pt-1\\">
-            <cite class=\\"components-grid-alertgroup-silences mr-2\\">
-              me@example.com
-            </cite>
-            <span class=\\"badge badge-light nmb-05 align-text-bottom p-1\\">
-              Expires
-              <time datetime=\\"946688400000\\">
-                in 30 minutes
-              </time>
-              <div class=\\"progress silence-progress bg-white\\">
-                <div class=\\"progress-bar bg-success\\"
-                     role=\\"progressbar\\"
-                     style=\\"width: 50%;\\"
-                     aria-valuenow=\\"50\\"
-                     aria-valuemin=\\"0\\"
-                     aria-valuemax=\\"100\\"
+          <div class=\\"d-flex flex-row\\">
+            <div class=\\"flex-shrink-0 flex-grow-0  mr-2\\">
+              <svg aria-hidden=\\"true\\"
+                   focusable=\\"false\\"
+                   data-prefix=\\"fas\\"
+                   data-icon=\\"bell-slash\\"
+                   class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
+                   role=\\"img\\"
+                   xmlns=\\"http://www.w3.org/2000/svg\\"
+                   viewbox=\\"0 0 640 512\\"
+              >
+                <path fill=\\"currentColor\\"
+                      d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
                 >
-                </div>
-              </div>
-            </span>
-          </span>
+                </path>
+              </svg>
+            </div>
+            <div class=\\"flex-shrink-1 flex-grow-1\\">
+              <span class=\\"font-italic\\"
+                    width=\\"0\\"
+              >
+                <span>
+                </span>
+                <span>
+                  Mocked Silence
+                </span>
+                <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
+                  …
+                </span>
+              </span>
+              <span class=\\"blockquote-footer pt-1\\">
+                <cite class=\\"components-grid-alertgroup-silences mr-2\\">
+                  me@example.com
+                </cite>
+                <span class=\\"badge badge-light nmb-05 align-text-bottom p-1\\">
+                  Expires
+                  <time datetime=\\"946688400000\\">
+                    in 30 minutes
+                  </time>
+                  <div class=\\"progress silence-progress bg-white\\">
+                    <div class=\\"progress-bar bg-success\\"
+                         role=\\"progressbar\\"
+                         style=\\"width: 50%;\\"
+                         aria-valuenow=\\"50\\"
+                         aria-valuemin=\\"0\\"
+                         aria-valuemax=\\"100\\"
+                    >
+                    </div>
+                  </div>
+                </span>
+              </span>
+            </div>
+          </div>
         </span>
       </div>
       <div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
@@ -66,28 +86,48 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
 
 exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
 "
-<div class=\\"card mb-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
+<div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
   <div class=\\"card-header border-bottom-0\\">
     <div class=\\"d-flex flex-row justify-content-between\\">
       <div class=\\"flex-grow-1 flex-shrink-1 mr-2\\">
         <span class=\\"my-1\\">
-          <span class=\\"font-italic\\"
-                width=\\"0\\"
-          >
-            <span>
-            </span>
-            <span>
-              Mocked Silence
-            </span>
-            <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
-              …
-            </span>
-          </span>
-          <span class=\\"blockquote-footer pt-1\\">
-            <cite class=\\"components-grid-alertgroup-silences mr-2\\">
-              me@example.com
-            </cite>
-          </span>
+          <div class=\\"d-flex flex-row\\">
+            <div class=\\"flex-shrink-0 flex-grow-0  mr-2\\">
+              <svg aria-hidden=\\"true\\"
+                   focusable=\\"false\\"
+                   data-prefix=\\"fas\\"
+                   data-icon=\\"bell-slash\\"
+                   class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
+                   role=\\"img\\"
+                   xmlns=\\"http://www.w3.org/2000/svg\\"
+                   viewbox=\\"0 0 640 512\\"
+              >
+                <path fill=\\"currentColor\\"
+                      d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
+                >
+                </path>
+              </svg>
+            </div>
+            <div class=\\"flex-shrink-1 flex-grow-1\\">
+              <span class=\\"font-italic\\"
+                    width=\\"0\\"
+              >
+                <span>
+                </span>
+                <span>
+                  Mocked Silence
+                </span>
+                <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
+                  …
+                </span>
+              </span>
+              <span class=\\"blockquote-footer pt-1\\">
+                <cite class=\\"components-grid-alertgroup-silences mr-2\\">
+                  me@example.com
+                </cite>
+              </span>
+            </div>
+          </div>
         </span>
       </div>
       <div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
diff --git a/ui/src/Components/ManagedSilence/index.js b/ui/src/Components/ManagedSilence/index.js
index 6560988db..4b1fbfcac 100644
--- a/ui/src/Components/ManagedSilence/index.js
+++ b/ui/src/Components/ManagedSilence/index.js
@@ -14,7 +14,6 @@ import { SilenceFormStore, SilenceTabNames } from "Stores/SilenceFormStore";
 import { MountFade } from "Components/Animations/MountFade";
 import { SilenceComment } from "./SilenceComment";
 import { SilenceDetails } from "./SilenceDetails";
-import { SilenceProgress } from "./SilenceProgress";
 
 import "./index.scss";
 
@@ -66,7 +65,7 @@ const ManagedSilence = observer(
 
       return (
         <MountFade in={true}>
-          <div className="card mb-1 components-managed-silence">
+          <div className="card my-1 components-managed-silence">
             <div className="card-header border-bottom-0">
               <div className="d-flex flex-row justify-content-between">
                 <div className="flex-grow-1 flex-shrink-1 mr-2">
@@ -75,14 +74,6 @@ const ManagedSilence = observer(
                       silence={silence}
                       collapsed={this.collapse.value}
                     />
-                    <span className="blockquote-footer pt-1">
-                      <cite className="components-grid-alertgroup-silences mr-2">
-                        {silence.createdBy}
-                      </cite>
-                      {this.collapse.value ? (
-                        <SilenceProgress silence={silence} />
-                      ) : null}
-                    </span>
                   </span>
                 </div>
                 <div className="flex-grow-0 flex-shrink-0 mt-auto mb-0">