diff --git a/ui/src/Components/LabelSetList/index.js b/ui/src/Components/LabelSetList/index.js new file mode 100644 index 000000000..758ece060 --- /dev/null +++ b/ui/src/Components/LabelSetList/index.js @@ -0,0 +1,53 @@ +import React from "react"; +import PropTypes from "prop-types"; + +import hash from "object-hash"; + +import { AlertStore } from "Stores/AlertStore"; +import { StaticLabel } from "Components/Labels/StaticLabel"; + +// take a list of groups and outputs a list of label sets, this ignores +// the receiver, so we'll end up with only unique alerts +const GroupListToUniqueLabelsList = groups => { + const alerts = {}; + for (const group of groups) { + for (const alert of group.alerts) { + const alertLabels = Object.assign( + {}, + group.labels, + group.shared.labels, + alert.labels + ); + const alertHash = hash(alertLabels); + alerts[alertHash] = alertLabels; + } + } + return Object.values(alerts); +}; + +// used in new silence form preview stage and when deleting silences +const LabelSetList = ({ alertStore, labelsList }) => + labelsList.length > 0 ? ( +
No alerts matched
+ ); +LabelSetList.propTypes = { + alertStore: PropTypes.instanceOf(AlertStore).isRequired, + labelsList: PropTypes.arrayOf(PropTypes.object).isRequired +}; + +export { LabelSetList, GroupListToUniqueLabelsList }; diff --git a/ui/src/Components/SilenceModal/SilencePreview/index.js b/ui/src/Components/SilenceModal/SilencePreview/index.js index 6f3144736..46fff071d 100644 --- a/ui/src/Components/SilenceModal/SilencePreview/index.js +++ b/ui/src/Components/SilenceModal/SilencePreview/index.js @@ -4,8 +4,6 @@ import PropTypes from "prop-types"; import { observable, action } from "mobx"; import { observer } from "mobx-react"; -import hash from "object-hash"; - import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft"; import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle"; @@ -13,7 +11,10 @@ import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclama import { AlertStore, FormatBackendURI, FormatAlertsQ } from "Stores/AlertStore"; import { SilenceFormStore } from "Stores/SilenceFormStore"; -import { StaticLabel } from "Components/Labels/StaticLabel"; +import { + LabelSetList, + GroupListToUniqueLabelsList +} from "Components/LabelSetList"; import { MatcherToFilter, AlertManagersToFilter } from "../Matchers"; const FetchError = ({ message }) => ( @@ -28,27 +29,6 @@ FetchError.propTypes = { message: PropTypes.node.isRequired }; -const Preview = ({ alertStore, labelsList }) => ( -