From c3fbb1a6e8ceca61031444a600d5ef017bf7f328 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Sat, 14 Jul 2018 22:37:20 +0200 Subject: [PATCH] feat(ui): modal window with filters help --- ui/src/App.css | 3 + ui/src/App.scss | 4 + ui/src/Components/MainModal/Help.js | 247 +++++++++++++++++++++++++++ ui/src/Components/MainModal/index.js | 83 +++++++++ ui/src/Components/NavBar/index.js | 17 +- 5 files changed, 339 insertions(+), 15 deletions(-) create mode 100644 ui/src/Components/MainModal/Help.js create mode 100644 ui/src/Components/MainModal/index.js diff --git a/ui/src/App.css b/ui/src/App.css index c45f5e3d9..f2401a677 100644 --- a/ui/src/App.css +++ b/ui/src/App.css @@ -6391,5 +6391,8 @@ a.text-dark:hover, a.text-dark:focus { .bg-primary-transparent { background-color: rgba(69, 90, 100, 0.95); } +.bg-primary-transparent-80 { + background-color: rgba(59, 66, 71, 0.8); } + .cursor-pointer { cursor: pointer; } diff --git a/ui/src/App.scss b/ui/src/App.scss index 8480de54d..428a966d9 100644 --- a/ui/src/App.scss +++ b/ui/src/App.scss @@ -24,6 +24,10 @@ $dark: #3b4247; .bg-primary-transparent { background-color: rgba($primary, 0.95); } +// version for modals +.bg-primary-transparent-80 { + background-color: rgba($dark, 0.8); +} .cursor-pointer { cursor: pointer; diff --git a/ui/src/Components/MainModal/Help.js b/ui/src/Components/MainModal/Help.js new file mode 100644 index 000000000..ceabe6d56 --- /dev/null +++ b/ui/src/Components/MainModal/Help.js @@ -0,0 +1,247 @@ +import React from "react"; +import PropTypes from "prop-types"; + +const FilterOperatorHelp = ({ operator, description, children }) => ( + +
+ {operator} {description} +
+
+
+ Example: key{operator}value +
+
{children}
+
+ +); +FilterOperatorHelp.propTypes = { + operator: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + children: PropTypes.array +}; + +const QueryHelp = ({ title, operators, children }) => ( + +
{title}
+
+
+ Supported operators:{" "} + {operators.map(op => ( + + {op} + + ))} +
+
Examples:
+
    {children}
+
+ +); +QueryHelp.propTypes = { + title: PropTypes.string.isRequired, + operators: PropTypes.arrayOf(PropTypes.string).isRequired, + children: PropTypes.array +}; + +const FilterExample = ({ example, children }) => ( +
  • +
    + {example} +
    +
    {children}
    +
    • +); +FilterExample.propTypes = { + example: PropTypes.string.isRequired, + children: PropTypes.array +}; + +const Help = () => ( +
    +

    Filter operators

    +
    + + True if compared alert attribute value is equal to value. + + + True if compared alert attribute is missing or have a value that is not + equal to value. + + + True if compared alert attribute value matches value regex. + + + False if compared alert attribute value matches value{" "} + regex. + + + True if compared alert attribute value is greater than{" "} + value. + + + True if compared alert attribue value is less than value. + +
    + +
    +

    Filtering using alert labels

    +
    + ", "<"]} + > + + Match alerts with label alertname equal to{" "} + UnableToPing. + + + Match alerts with label hostname equal to{" "} + localhost. + + + Match alerts with label service missing or not equal to{" "} + apache3. + + + Match alerts with label service matching regular + expression /.*apache.*/. + + + Match alerts with label service matching regular + expression /.*apache[1-3].*/. + + + Match alerts with label priority value{" "} + > than 4. Value will be casted to + integer if possible, string comparision will be used as fallback. + + +
    +
    + +
    +

    Filtering alerts using special filters

    +
    + + + Match alerts collected from Alertmanager instance named{" "} + prod. + + + Match alerts collected from Alertmanager instances except for the + one named dev. + + + Match alerts collected from Alertmanager instances with names + matching regular expression /.*prod.*/. + + + + + + Match alerts sent to the default receiver. + + + Match alerts not sent to the hipchat receiver. + + + Match alerts sent to any receiver with name matching regular + expression /.*email.*/. + + + + + Match only active alerts. + + + Match alerts that are not active, only suppressed and unprocessed + will be matched. + + + Match only suppressed alerts. + + + Match only unprocessed alerts. + + + + + + Match alerts silenced by me@example.com. + + + Match alerts silenced by everyone except{" "} + foo@example.com. + + + Match alerts silenced by author matching regular expression{" "} + /.*@example.com.*/. + + + + +
    + This is supported only if JIRA regexp are enabled and able to match + JIRA ids in the silence comment body. +
    + + Match silenced alerts where detected JIRA issue id is equal to{" "} + PROJECT-123. + + + Match silenced alerts where detected JIRA issue id is different than{" "} + PROJECT-123. + + + Match silenced alerts where detected JIRA issue id matches regular + expression /.*PROJECT.*/. + +     + + +
    Value must be a number >= 1.
    + + Limit number of displayed alerts to 10. + +     + + ", "<"]} + > + + Match alerts older than 15 minutes. + + + Match alerts older than 1 hour. + + + Match alerts more recent than 10 hours and 30 minutes. + + +
    +
    +
    +); + +export { Help }; diff --git a/ui/src/Components/MainModal/index.js b/ui/src/Components/MainModal/index.js new file mode 100644 index 000000000..46e0fcf7b --- /dev/null +++ b/ui/src/Components/MainModal/index.js @@ -0,0 +1,83 @@ +import React, { Component } from "react"; + +import { observer } from "mobx-react"; +import { observable, action } from "mobx"; + +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faCog } from "@fortawesome/free-solid-svg-icons/faCog"; + +import { Help } from "./Help"; + +const MainModal = observer( + class MainModal extends Component { + toggle = observable( + { + show: false, + toggle() { + this.show = !this.show; + }, + hide() { + this.show = false; + } + }, + { toggle: action.bound, hide: action.bound } + ); + + componentDidUpdate() { + document.body.classList.toggle("modal-open", this.toggle.show); + } + + componentWillUnmount() { + document.body.classList.remove("modal-open"); + } + + render() { + return ( + + + {this.toggle.show ? ( +
    +
    +
    +
    +
    Help
    + +
    +
    + +
    +
    +
    +
    + ) : null} +     + ); + } + } +); + +export { MainModal }; diff --git a/ui/src/Components/NavBar/index.js b/ui/src/Components/NavBar/index.js index 8090f46a7..dfb26d14f 100644 --- a/ui/src/Components/NavBar/index.js +++ b/ui/src/Components/NavBar/index.js @@ -5,12 +5,10 @@ import { observer } from "mobx-react"; import ReactResizeDetector from "react-resize-detector"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faCog } from "@fortawesome/free-solid-svg-icons/faCog"; - import { AlertStore } from "Stores/AlertStore"; import { FetchIndicator } from "./FetchIndicator"; import { FilterInput } from "./FilterInput"; +import { MainModal } from "Components/MainModal"; import "./index.css"; @@ -35,18 +33,7 @@ const NavBar = observer( - + );