From d7c00213ff59d98f48fdeede6178076b1ef672eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 9 Sep 2018 22:20:18 +0100
Subject: [PATCH] refactor(ui): reorder alert action menu to make it look nicer
 with the header

---
 .../Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js    | 13 +++++++------
 .../AlertGrid/AlertGroup/Alert/AlertMenu.test.js    |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
index eadb02bdd..7ac4e5446 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
@@ -38,12 +38,6 @@ const MenuContent = onClickOutside(
         style={popperStyle}
         data-placement={popperPlacement}
       >
-        <div
-          className="dropdown-item cursor-pointer"
-          onClick={() => onSilenceClick(silenceFormStore, group, alert)}
-        >
-          <FontAwesomeIcon icon={faBellSlash} /> Silence this alert
-        </div>
         <h6 className="dropdown-header">Alert source links:</h6>
         {alert.alertmanager.map(am => (
           <a
@@ -57,6 +51,13 @@ const MenuContent = onClickOutside(
             {am.name}
           </a>
         ))}
+        <div className="dropdown-divider" />
+        <div
+          className="dropdown-item cursor-pointer"
+          onClick={() => onSilenceClick(silenceFormStore, group, alert)}
+        >
+          <FontAwesomeIcon icon={faBellSlash} /> Silence this alert
+        </div>
       </div>
     );
   }
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.js
index 963e67be6..d8bca5f3d 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.js
@@ -70,7 +70,7 @@ const MountedMenuContent = group => {
 describe("<MenuContent />", () => {
   it("clicking on 'Silence' icon opens the silence form modal", () => {
     const tree = MountedMenuContent(group);
-    const button = tree.find(".dropdown-item").at(0);
+    const button = tree.find(".dropdown-item").at(1);
     button.simulate("click");
     expect(silenceFormStore.toggle.visible).toBe(true);
   });