feat(ui): render an indicator icon when alert is inhibited

Right now we don't mark inhibted alerts in any way, so they look like silenced alerts with no silence details. Add an icon with tooltip so inhibited alerts can be easily distinguished from silenced onces
2026-05-17 04:16:42 +00:00 · 2019-03-05 11:02:08 +00:00
parent 7a0a587ddb
commit f099ccc0ea
6 changed files with 183 additions and 5 deletions
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/snapshots/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/snapshots/index.test.js.snap
@@ -1,5 +1,149 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`<Alert /> matches snapshot when inhibited 1`] = `
+"
+<li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
+  <div>
+    <div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
+      <svg aria-hidden=\\"true\\"
+           focusable=\\"false\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"search-minus\\"
+           class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 512 512\\"
+      >
+        <path fill=\\"currentColor\\"
+              d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+        >
+        </path>
+      </svg>
+      <span class=\\"text-muted\\">
+        help:
+      </span>
+      <span class=\\"Linkify\\">
+        some long text
+      </span>
+    </div>
+    <div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
+      <svg aria-hidden=\\"true\\"
+           focusable=\\"false\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"search-plus\\"
+           class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 512 512\\"
+      >
+        <path fill=\\"currentColor\\"
+              d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+        >
+        </path>
+      </svg>
+      hidden
+    </div>
+  </div>
+  <span class=\\"components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer components-grid-alert-099c5ca6d1c92f615b13056b935d0c8dee70f18c-0988cb349635341c67d91bfe3454d2b3178c443c\\"
+        data-toggle=\\"dropdown\\"
+  >
+    <svg aria-hidden=\\"true\\"
+         focusable=\\"false\\"
+         data-prefix=\\"fas\\"
+         data-icon=\\"caret-down\\"
+         class=\\"svg-inline--fa fa-caret-down fa-w-10 pr-1\\"
+         role=\\"img\\"
+         xmlns=\\"http://www.w3.org/2000/svg\\"
+         viewbox=\\"0 0 320 512\\"
+         style=\\"width: 0.8rem;\\"
+    >
+      <path fill=\\"currentColor\\"
+            d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
+      >
+      </path>
+    </svg>
+    <time datetime=\\"1534268200017\\">
+      a day ago
+    </time>
+  </span>
+  <div class
+       style=\\"display: inline;\\"
+       data-tooltipped
+       aria-describedby=\\"tippy-tooltip-3\\"
+       data-original-title=\\"This alert is inhibited by other alerts\\"
+  >
+    <span class=\\"text-nowrap text-truncate mr-1 badge badge-light\\">
+      <svg aria-hidden=\\"true\\"
+           focusable=\\"false\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"volume-mute\\"
+           class=\\"svg-inline--fa fa-volume-mute fa-w-16 text-success\\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 512 512\\"
+      >
+        <path fill=\\"currentColor\\"
+              d=\\"M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z\\"
+        >
+        </path>
+      </svg>
+    </span>
+  </div>
+  <div class
+       style=\\"display: inline;\\"
+       data-tooltipped
+       aria-describedby=\\"tippy-tooltip-4\\"
+       data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
+  >
+    <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+      <span class=\\"components-label-name\\">
+        job:
+      </span>
+      <span class=\\"components-label-value\\">
+        node_exporter
+      </span>
+    </span>
+  </div>
+  <div class
+       style=\\"display: inline;\\"
+       data-tooltipped
+       aria-describedby=\\"tippy-tooltip-5\\"
+       data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
+  >
+    <span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
+      <span class=\\"components-label-name\\">
+        cluster:
+      </span>
+      <span class=\\"components-label-value\\">
+        dev
+      </span>
+    </span>
+  </div>
+  <a href=\\"http://localhost\\"
+     target=\\"_blank\\"
+     rel=\\"noopener noreferrer\\"
+     class=\\"components-label-with-hover text-nowrap text-truncate badge mr-1 components-grid-annotation-link\\"
+  >
+    <svg aria-hidden=\\"true\\"
+         focusable=\\"false\\"
+         data-prefix=\\"fas\\"
+         data-icon=\\"external-link-alt\\"
+         class=\\"svg-inline--fa fa-external-link-alt fa-w-18 \\"
+         role=\\"img\\"
+         xmlns=\\"http://www.w3.org/2000/svg\\"
+         viewbox=\\"0 0 576 512\\"
+    >
+      <path fill=\\"currentColor\\"
+            d=\\"M576 24v127.984c0 21.461-25.96 31.98-40.971 16.971l-35.707-35.709-243.523 243.523c-9.373 9.373-24.568 9.373-33.941 0l-22.627-22.627c-9.373-9.373-9.373-24.569 0-33.941L442.756 76.676l-35.703-35.705C391.982 25.9 402.656 0 424.024 0H552c13.255 0 24 10.745 24 24zM407.029 270.794l-16 16A23.999 23.999 0 0 0 384 303.765V448H64V128h264a24.003 24.003 0 0 0 16.97-7.029l16-16C376.089 89.851 365.381 64 344 64H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V287.764c0-21.382-25.852-32.09-40.971-16.97z\\"
+      >
+      </path>
+    </svg>
+    link
+  </a>
+</li>
+"
+`;
+
 exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=false 1`] = `
 "
 <li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js
@@ -3,11 +3,15 @@ import PropTypes from "prop-types";

 import { observer } from "mobx-react";

+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faVolumeMute } from "@fortawesome/free-solid-svg-icons/faVolumeMute";
+
 import { APIAlert, APIGroup } from "Models/API";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { BorderClassMap } from "Common/Colors";
 import { StaticLabels } from "Common/Query";
 import { FilteringLabel } from "Components/Labels/FilteringLabel";
+import { TooltipWrapper } from "Components/TooltipWrapper";
 import { RenderNonLinkAnnotation, RenderLinkAnnotation } from "../Annotation";
 import { Silence } from "../Silence";
 import { AlertMenu } from "./AlertMenu";
@@ -80,6 +84,15 @@ const Alert = observer(
            alert={alert}
            silenceFormStore={silenceFormStore}
          />
+          {alert.alertmanager
+            .map(am => am.inhibitedBy.length)
+            .reduce((sum, x) => sum + x) > 0 ? (
+            <TooltipWrapper title="This alert is inhibited by other alerts">
+              <span className="text-nowrap text-truncate mr-1 badge badge-light">
+                <FontAwesomeIcon className="text-success" icon={faVolumeMute} />
+              </span>
+            </TooltipWrapper>
+          ) : null}
          {Object.entries(alert.labels).map(([name, value]) => (
            <FilteringLabel key={name} name={name} value={value} />
          ))}
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.js
@@ -66,6 +66,22 @@ describe("<Alert />", () => {
    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
  });

+  it("matches snapshot when inhibited", () => {
+    const alert = MockedAlert();
+    alert.alertmanager[0].inhibitedBy = ["123456"];
+    const group = MockAlertGroup({}, [alert], [], {});
+    const tree = MountedAlert(alert, group, false, false);
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+
+  it("renders inhibition icon when inhibited", () => {
+    const alert = MockedAlert();
+    alert.alertmanager[0].inhibitedBy = ["123456"];
+    const group = MockAlertGroup({}, [alert], [], {});
+    const tree = MountedAlert(alert, group, false, false);
+    expect(tree.find(".fa-volume-mute")).toHaveLength(1);
+  });
+
  it("renders @alertmanager label with showAlertmanagers=true", () => {
    const alert = MockedAlert();
    const group = MockAlertGroup({}, [alert], [], {});
@@ -106,7 +122,8 @@ describe("<Alert />", () => {
        startsAt: "2018-08-14T17:36:40.017867056Z",
        endsAt: "0001-01-01T00:00:00Z",
        source: "localhost/am1",
-        silencedBy: ["silence123456789"]
+        silencedBy: ["silence123456789"],
+        inhibitedBy: []
      },
      {
        name: "am2",
@@ -115,7 +132,8 @@ describe("<Alert />", () => {
        startsAt: "2018-08-14T17:36:40.017867056Z",
        endsAt: "0001-01-01T00:00:00Z",
        source: "localhost/am2",
-        silencedBy: ["silence123456789"]
+        silencedBy: ["silence123456789"],
+        inhibitedBy: []
      }
    ];
    const group = MockAlertGroup({}, [alert], [], {});
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.test.js
@@ -23,7 +23,8 @@ const alertmanager = {
  startsAt: "2000-01-01T10:00:00Z",
  endsAt: "0001-01-01T00:00:00Z",
  source: "localhost/prometheus",
-  silencedBy: ["4cf5fd82-1edd-4169-99d1-ff8415e72179"]
+  silencedBy: ["4cf5fd82-1edd-4169-99d1-ff8415e72179"],
+  inhibitedBy: []
 };

 const silence = {
--- a/ui/src/Models/API.js
+++ b/ui/src/Models/API.js
@@ -16,7 +16,8 @@ const APIAlertAlertmanagerState = PropTypes.exact({
  startsAt: PropTypes.string.isRequired,
  endsAt: PropTypes.string.isRequired,
  source: PropTypes.string.isRequired,
-  silencedBy: PropTypes.arrayOf(PropTypes.string).isRequired
+  silencedBy: PropTypes.arrayOf(PropTypes.string).isRequired,
+  inhibitedBy: PropTypes.arrayOf(PropTypes.string).isRequired
 });

 const APIAlert = PropTypes.exact({
--- a/ui/src/mocks/Alerts.js
+++ b/ui/src/mocks/Alerts.js
@@ -19,7 +19,8 @@ const MockAlert = (annotations, labels, state) => ({
      startsAt: "2018-08-14T17:36:40.017867056Z",
      endsAt: "0001-01-01T00:00:00Z",
      source: "localhost/prometheus",
-      silencedBy: []
+      silencedBy: [],
+      inhibitedBy: []
    }
  ],
  receiver: "by-name"