diff --git 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 index 23529f82a..464c2d83b 100644 --- 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[` matches snapshot when inhibited 1`] = ` +" +
  • +
    +
    + + + + + + help: + + + some long text + +
    +
    + + + + + hidden +
    +
    + + + + + + + +
    + + + + + + +
    +
    + + + job: + + + node_exporter + + +
    +
    + + + cluster: + + + dev + + +
    + + + + + + link + +
    • +" +`; + exports[` matches snapshot with showAlertmanagers=false showReceiver=false 1`] = ` "
  • diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js index 650582ea7..941365145 100644 --- 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 ? ( + + + + + + ) : null} {Object.entries(alert.labels).map(([name, value]) => ( ))} diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.js index f5efc1a1b..29490ee35 100644 --- 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("", () => { 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("", () => { 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("", () => { 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], [], {}); diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.test.js index e78c633e9..18dae9633 100644 --- 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 = { diff --git a/ui/src/Models/API.js b/ui/src/Models/API.js index 3c295d48b..f0294b602 100644 --- 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({ diff --git a/ui/src/__mocks__/Alerts.js b/ui/src/__mocks__/Alerts.js index 3bc685d0e..2d88a36ae 100644 --- 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"