Merge pull request #107 from prymitive/source-links

Alert source links

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 
+import hash from "object-hash";
+
 import { Manager, Reference, Popper } from "react-popper";
 import onClickOutside from "react-onclickoutside";
 
@@ -42,6 +44,19 @@ const MenuContent = onClickOutside(
         >
           <FontAwesomeIcon icon={faBellSlash} /> Silence this alert
         </div>
+        <h6 className="dropdown-header">Alert source links:</h6>
+        {alert.alertmanager.map(am => (
+          <a
+            key={am.name}
+            className="dropdown-item"
+            href={am.source}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={afterClick}
+          >
+            {am.name}
+          </a>
+        ))}
       </div>
     );
   }
@@ -84,12 +99,16 @@ const AlertMenu = observer(
     render() {
       const { group, alert, silenceFormStore } = this.props;
 
+      const uniqueClass = `components-grid-alert-${group.id}-${hash(
+        alert.labels
+      )}`;
+
       return (
         <Manager>
           <Reference>
             {({ ref }) => (
               <span
-                className="components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer"
+                className={`components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer ${uniqueClass}`}
                 ref={ref}
                 onClick={this.collapse.toggle}
                 data-toggle="dropdown"
@@ -121,6 +140,7 @@ const AlertMenu = observer(
                   silenceFormStore={silenceFormStore}
                   afterClick={this.collapse.hide}
                   handleClickOutside={this.collapse.hide}
+                  outsideClickIgnoreClass={uniqueClass}
                 />
               )}
             </Popper>

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.test.js

@@ -74,4 +74,10 @@ describe("<MenuContent />", () => {
     button.simulate("click");
     expect(silenceFormStore.toggle.visible).toBe(true);
   });
+
+  it("source link points at alert source", () => {
+    const tree = MountedMenuContent(group);
+    const link = tree.find("a.dropdown-item[href='localhost/prometheus']");
+    expect(link.text()).toBe("default");
+  });
 });

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap

@@ -42,7 +42,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
       hidden
     </div>
   </div>
-  <span class=\\"components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer\\"
+  <span class=\\"components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer components-grid-alert-undefined-0988cb349635341c67d91bfe3454d2b3178c443c\\"
         data-toggle=\\"dropdown\\"
   >
     <svg aria-hidden=\\"true\\"