From 4f3a0c2e63b5ec9361db89bd7ad0e66733f70937 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Mon, 16 Sep 2019 21:30:52 +0100 Subject: [PATCH] feat(ui): use accordion layout for main modal --- .../AlertGroupCollapseConfiguration.js | 8 +- .../Configuration/AlertGroupConfiguration.js | 5 +- .../AlertGroupSortConfiguration.js | 6 +- .../Configuration/AlertGroupTitleBarColor.js | 7 +- .../AlertGroupWidthConfiguration.js | 5 +- .../Configuration/FetchConfiguration.js | 3 +- .../Configuration/FilterBarConfiguration.js | 7 +- ...ertGroupCollapseConfiguration.test.js.snap | 7 +- .../AlertGroupConfiguration.test.js.snap | 5 +- .../AlertGroupSortConfiguration.test.js.snap | 7 +- .../AlertGroupTitleBarColor.test.js.snap | 7 +- .../AlertGroupWidthConfiguration.test.js.snap | 5 +- .../FetchConfiguration.test.js.snap | 5 +- .../FilterBarConfiguration.test.js.snap | 7 +- .../__snapshots__/index.test.js.snap | 714 +++++---- .../MainModal/Configuration/index.js | 47 +- ui/src/Components/MainModal/Help.js | 393 ++--- .../MainModal/__snapshots__/Help.test.js.snap | 1392 +++++++++-------- .../MainModalContent.test.js.snap | 714 +++++---- 19 files changed, 1879 insertions(+), 1465 deletions(-) diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js b/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js index 338343f2c..e6820a9e9 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js +++ b/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js @@ -54,12 +54,7 @@ const AlertGroupCollapseConfiguration = observer( const { settingsStore } = this.props; return ( -
-
- -
+
diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupTitleBarColor.js b/ui/src/Components/MainModal/Configuration/AlertGroupTitleBarColor.js index 9868772cd..8bf71aca2 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupTitleBarColor.js +++ b/ui/src/Components/MainModal/Configuration/AlertGroupTitleBarColor.js @@ -22,12 +22,7 @@ const AlertGroupTitleBarColor = observer( const { settingsStore } = this.props; return ( -
-
- -
+
- +
- +
-
- -
+
matches snapshot with default values 1`] = ` " -
-
- -
+
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.js.snap index 42182bb06..41ac24836 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.js.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.js.snap @@ -2,10 +2,7 @@ exports[` matches snapshot with default values 1`] = ` " -
- +
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap index f17713985..2c271d048 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap @@ -2,12 +2,7 @@ exports[` matches snapshot with default values 1`] = ` " -
-
- -
+
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupTitleBarColor.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupTitleBarColor.test.js.snap index 69dc194cf..1dc05774d 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupTitleBarColor.test.js.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupTitleBarColor.test.js.snap @@ -2,12 +2,7 @@ exports[` matches snapshot with default values 1`] = ` " -
-
- -
+
matches snapshot with default values 1`] = ` " -
- +
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.js.snap index 2b69bd1c6..c6005c4d4 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.js.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.js.snap @@ -2,10 +2,7 @@ exports[` matches snapshot with default values 1`] = ` " -
- +
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/FilterBarConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/FilterBarConfiguration.test.js.snap index f7d820b3c..2b3bb3931 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/FilterBarConfiguration.test.js.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/FilterBarConfiguration.test.js.snap @@ -2,12 +2,7 @@ exports[` matches snapshot with default values 1`] = ` " -
-
- -
+
matches snapshot 1`] = ` " -
-
- -
- - - 10s - - -
-
+ +
+
+
+
+ Refresh interval
- - - - 30s - - -
+ -
- -
- - - 120s - - -
-
-
-
-
-
- -
-
- - - - -
-
-
-
-
-
- -
-
- - - - -
-
-
-
-
- -
- - - 300 - - -
-
-
- - - - 420 - - -
-
- -
- - - 800 - - -
-
-
-
-
- -
- - - 1 - - -
-
-
- - - - 5 - - -
-
- -
- - - 10 - - -
-
-
-
-
-
- -
-
-
-
-
- Collapse on mobile -
-
-
- + +
+
+
+
+
+
+
+ + + 10s + + +
+
-
+ + + + 30s + + +
+
+
-
-
-
- - -
- - - - + + + 120s + +
-
-
-
-
- +
+
+
+
+ Filter bar configuration +
+
+ + + + +
+
-
-
-
-
-
-
- Use defaults from karma config file +
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+ Alert group titlebar configuration +
+
+ + + + +
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+ Minimal alert group width +
+
+ + + + +
+
+
+
+
+
+
+ + + 300 + + +
+
-
-
+ + + 420 + + +
- + +
+ + + 800 + + +
+
+
+
+
+
+
+
+
+ Default number of alerts to show per group +
+
+ + + + +
+
+
+
+
+
+
+ + + 1 + + +
+
+
+ + + + 5 + + +
+
+ +
+ + + 10 + + +
+
+
+
+
+
+
+
+
+ Default alert group display +
+
+ + + + +
+
+
+
+
+
+
+
+
+
+ Collapse on mobile +
+
+
-
+ +
+
-
-
- - -
- + + +
- - - + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ Grid sort order +
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+ Use defaults from karma config file +
+
+
+ +
+
+
+
+
+
+ + +
+ + + + +
+
+
diff --git a/ui/src/Components/MainModal/Configuration/index.js b/ui/src/Components/MainModal/Configuration/index.js index d4a64cc8c..75c2014aa 100644 --- a/ui/src/Components/MainModal/Configuration/index.js +++ b/ui/src/Components/MainModal/Configuration/index.js @@ -2,6 +2,7 @@ import React from "react"; import PropTypes from "prop-types"; import { Settings } from "Stores/Settings"; +import { Accordion } from "Components/Accordion"; import { FetchConfiguration } from "./FetchConfiguration"; import { FilterBarConfiguration } from "./FilterBarConfiguration"; import { AlertGroupConfiguration } from "./AlertGroupConfiguration"; @@ -11,20 +12,38 @@ import { AlertGroupCollapseConfiguration } from "./AlertGroupCollapseConfigurati import { AlertGroupTitleBarColor } from "./AlertGroupTitleBarColor"; const Configuration = ({ settingsStore }) => ( - - -
- -
- -
- -
- -
- -
- + + } + extraProps={{ open: true }} + /> + } + /> + } + /> + } + /> + } + /> + + } + /> + } + /> ); Configuration.propTypes = { diff --git a/ui/src/Components/MainModal/Help.js b/ui/src/Components/MainModal/Help.js index db7aa6b95..8c7e1618f 100644 --- a/ui/src/Components/MainModal/Help.js +++ b/ui/src/Components/MainModal/Help.js @@ -1,6 +1,8 @@ import React from "react"; import PropTypes from "prop-types"; +import { Accordion } from "Components/Accordion"; + const FilterOperatorHelp = ({ operator, description, children }) => (
@@ -62,203 +64,216 @@ FilterExample.propTypes = { }; 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

-
- + + + 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. + +
+ } + extraProps={{ open: true }} + /> + + ", "<"]} + > + + 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. + + + + } + /> + + - - 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.*/. - - + operators={["=", "!=", "=~", "!~"]} + > + + 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 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 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 suppressed by silence abc123456789. - - - Match alerts suppressed by any silence except{" "} - abc123456789. - - + + Match alerts suppressed by silence abc123456789. + + + Match alerts suppressed by any silence except{" "} + abc123456789. + + - - - 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.*/. - - + + + 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.*/. - - + +
+ 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. - - + +
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. - - - -
+ ", "<"]} + > + + Match alerts older than 15 minutes. + + + Match alerts older than 1 hour. + + + Match alerts more recent than 10 hours and 30 minutes. + + + + } + />
); diff --git a/ui/src/Components/MainModal/__snapshots__/Help.test.js.snap b/ui/src/Components/MainModal/__snapshots__/Help.test.js.snap index 6121c16e5..cb8a2c241 100644 --- a/ui/src/Components/MainModal/__snapshots__/Help.test.js.snap +++ b/ui/src/Components/MainModal/__snapshots__/Help.test.js.snap @@ -2,741 +2,821 @@ exports[` matches snapshot 1`] = ` " -
-

- Filter operators -

-
-
- - = - - Exact match -
-
-
- Example: - - key=value - -
-
- True if compared alert attribute value is equal to - - value - - . -
-
-
- - != - - Negative match -
-
-
- Example: - - key!=value - -
-
- True if compared alert attribute is missing or have a value that is not equal to - - value - - . -
-
-
- - =~ - - Regular expression match -
-
-
- Example: - - key=~value - -
-
- True if compared alert attribute value matches - - value - - regex. -
-
-
- - !~ - - Negative regular expression match -
-
-
- Example: - - key!~value - -
-
- False if compared alert attribute value matches - - value - - regex. -
-
-
- - > - - Greater than match -
-
-
- Example: - - key>value - -
-
- True if compared alert attribute value is greater than - - value - - . -
-
-
- - < - - Less than match -
-
-
- Example: - - key<value - -
-
- True if compared alert attribue value is less than - - value - - . -
-
-
-
-

- Filtering using alert labels -

-
-
- Match alerts based on any label -
-
+
+
+
+
- Supported operators: - - = - - - != - - - =~ - - - !~ - - - > - - - < - + Fiter operators
- Examples: + + + +
-
    -
  • +
+
+
+
+
+
+ + = + + Exact match +
+
- - alertname=UnableToPing - + Example: + + key=value +
- Match alerts with label + True if compared alert attribute value is equal to - alertname - - equal to - - UnableToPing + value .
- -
  • +
    • +
    + + != + + Negative match +
    +
    - - hostname=localhost - + Example: + + key!=value +
    - Match alerts with label + True if compared alert attribute is missing or have a value that is not equal to - hostname - - equal to - - localhost + value .
    - -
  • +
    • +
    + + =~ + + Regular expression match +
    +
    - - service!=apache3 - + Example: + + key=~value +
    - Match alerts with label + True if compared alert attribute value matches - service + value - missing or not equal to + regex. +
    +
    +
    + + !~ + + Negative regular expression match +
    +
    +
    + Example: - apache3 + key!~value + +
    +
    + False if compared alert attribute value matches + + value + + regex. +
    +
    +
    + + > + + Greater than match +
    +
    +
    + Example: + + key>value + +
    +
    + True if compared alert attribute value is greater than + + value .
    - -
  • +
    • +
    + + < + + Less than match +
    +
    - - service=~apache - + Example: + + key<value +
    - Match alerts with label + True if compared alert attribue value is less than - service - - matching regular expression - - /.*apache.*/ + value .
    - -
  • -
    - - service=~apache[1-3] - -
    -
    - Match alerts with label - - service - - matching regular expression - - /.*apache[1-3].*/ - - . -
    -
    • -
  • -
    - - priority>4 - -
    -
    - 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 based on the Alertmanager instance name they were collected from -
    -
    +
    +
    +
    - Supported operators: - - = - - - != - - - =~ - - - !~ - + Filtering using alert labels
    - Examples: + + + +
    -
      -
    • +
    +
    +
    +
    +
    +
    + Match alerts based on any label +
    +
    - - @alertmanager=prod - + Supported operators: + + = + + + != + + + =~ + + + !~ + + + > + + + < +
    - Match alerts collected from Alertmanager instance named - - prod - - . + Examples:
    - -
  • -
    - - @alertmanager!=dev - -
    -
    - Match alerts collected from Alertmanager instances except for the one named - - dev - - . -
    -
    • -
  • -
    - - @alertmanager=~prod - -
    -
    - Match alerts collected from Alertmanager instances with names matching regular expression - - /.*prod.*/ - - . -
    -
    • - -
    -
    - Match alerts based on the receiver name -
    -
    +
      +
    • +
      + + alertname=UnableToPing + +
      +
      + Match alerts with label + + alertname + + equal to + + UnableToPing + + . +
      +
      • +
    • +
      + + hostname=localhost + +
      +
      + Match alerts with label + + hostname + + equal to + + localhost + + . +
      +
      • +
    • +
      + + service!=apache3 + +
      +
      + Match alerts with label + + service + + missing or not equal to + + apache3 + + . +
      +
      • +
    • +
      + + service=~apache + +
      +
      + Match alerts with label + + service + + matching regular expression + + /.*apache.*/ + + . +
      +
      • +
    • +
      + + service=~apache[1-3] + +
      +
      + Match alerts with label + + service + + matching regular expression + + /.*apache[1-3].*/ + + . +
      +
      • +
    • +
      + + priority>4 + +
      +
      + Match alerts with label + + priority + + value + + > + + than + + 4 + + . Value will be casted to integer if possible, string comparision will be used as fallback. +
      +
      • +
    +
    +
    +
    +
    +
    +
    +
    +
    - Supported operators: - - = - - - != - - - =~ - - - !~ - + Filtering alerts using special filters
    - Examples: + + + +
    -
      -
    • +
    +
    +
    +
    +
    +
    + Match alerts based on the Alertmanager instance name they were collected from +
    +
    - - @receiver=default - + Supported operators: + + = + + + != + + + =~ + + + !~ +
    - Match alerts sent to the default receiver. + Examples:
    - -
  • +
      +
    • +
      + + @alertmanager=prod + +
      +
      + Match alerts collected from Alertmanager instance named + + prod + + . +
      +
      • +
    • +
      + + @alertmanager!=dev + +
      +
      + Match alerts collected from Alertmanager instances except for the one named + + dev + + . +
      +
      • +
    • +
      + + @alertmanager=~prod + +
      +
      + Match alerts collected from Alertmanager instances with names matching regular expression + + /.*prod.*/ + + . +
      +
      • +
    +
    • +
    + Match alerts based on the receiver name +
    +
    - - @receiver!=hipchat - + Supported operators: + + = + + + != + + + =~ + + + !~ +
    - Match alerts not sent to the hipchat receiver. + Examples:
    - -
  • +
      +
    • +
      + + @receiver=default + +
      +
      + Match alerts sent to the default receiver. +
      +
      • +
    • +
      + + @receiver!=hipchat + +
      +
      + Match alerts not sent to the hipchat receiver. +
      +
      • +
    • +
      + + @receiver=~email + +
      +
      + Match alerts sent to any receiver with name matching regular expression + + /.*email.*/ + + . +
      +
      • +
    +
    • +
    + Match alerts based on the state +
    +
    - - @receiver=~email - + Supported operators: + + = + + + != +
    - Match alerts sent to any receiver with name matching regular expression - - /.*email.*/ - - . + Examples:
    - - -
    -
    - Match alerts based on the state -
    -
    -
    - Supported operators: - - = - - - != - -
    -
    - Examples: -
    -
      -
    • +
        +
      • +
        + + @state=active + +
        +
        + Match only active alerts. +
        +
        • +
      • +
        + + @state!=active + +
        +
        + Match alerts that are not active, only suppressed and unprocessed will be matched. +
        +
        • +
      • +
        + + @state=suppressed + +
        +
        + Match only suppressed alerts. +
        +
        • +
      • +
        + + @state=unprocessed + +
        +
        + Match only unprocessed alerts. +
        +
        • +
      +
    +
    + Match suppressed alerts based on the silence ID +
    +
    - - @state=active - + Supported operators: + + = + + + != +
    - Match only active alerts. + Examples:
    - -
  • +
      +
    • +
      + + @silence_id=abc123456789 + +
      +
      + Match alerts suppressed by silence + + abc123456789 + + . +
      +
      • +
    • +
      + + @silence_id!=abc123456789 + +
      +
      + Match alerts suppressed by any silence except + + abc123456789 + + . +
      +
      • +
    +
    • +
    + Match alerts based on the author of silence +
    +
    - - @state!=active - + Supported operators: + + = + + + != + + + =~ + + + !~ +
    - Match alerts that are not active, only suppressed and unprocessed will be matched. + Examples:
    - -
  • +
      +
    • +
      + + @silence_author=me@example.com + +
      +
      + Match alerts silenced by + + me@example.com + + . +
      +
      • +
    • +
      + + @silence_author!=me@example.com + +
      +
      + Match alerts silenced by everyone except + + foo@example.com + + . +
      +
      • +
    • +
      + + @silence_author=~@example.com + +
      +
      + Match alerts silenced by author matching regular expression + + /.*@example.com.*/ + + . +
      +
      • +
    +
    • +
    + Match alerts based on the jira linked in the silence +
    +
    - - @state=suppressed - + Supported operators: + + = + + + != + + + =~ + + + !~ +
    - Match only suppressed alerts. + Examples:
    - -
  • +
      +
      + This is supported only if JIRA regexp are enabled and able to match JIRA ids in the silence comment body. +
      +
    • +
      + + @silence_jira=PROJECT-123 + +
      +
      + Match silenced alerts where detected JIRA issue id is equal to + + PROJECT-123 + + . +
      +
      • +
    • +
      + + @silence_jira!=PROJECT-123 + +
      +
      + Match silenced alerts where detected JIRA issue id is different than + + PROJECT-123 + + . +
      +
      • +
    • +
      + + @silence_jira=~PROJECT + +
      +
      + Match silenced alerts where detected JIRA issue id matches regular expression + + /.*PROJECT.*/ + + . +
      +
      • +
    +
    • +
    + Limit number of displayed alerts +
    +
    - - @state=unprocessed - + Supported operators: + + = +
    - Match only unprocessed alerts. + Examples:
    - - -
    -
    - Match suppressed alerts based on the silence ID -
    -
    -
    - Supported operators: - - = - - - != - -
    -
    - Examples: -
    -
      -
    • +
        +
        + Value must be a number >= 1. +
        +
      • +
        + + @limit=10 + +
        +
        + Limit number of displayed alerts to 10. +
        +
        • +
      +
    +
    + Match alerts based on creation timestamp +
    +
    - - @silence_id=abc123456789 - + Supported operators: + + > + + + < +
    - Match alerts suppressed by silence - - abc123456789 - - . + Examples:
    - -
  • -
    - - @silence_id!=abc123456789 - -
    -
    - Match alerts suppressed by any silence except - - abc123456789 - - . -
    -
    • - -
    -
    - Match alerts based on the author of silence -
    -
    -
    - Supported operators: - - = - - - != - - - =~ - - - !~ - -
    -
    - Examples: -
    -
      -
    • -
      - - @silence_author=me@example.com - -
      -
      - Match alerts silenced by - - me@example.com - - . -
      -
      • -
    • -
      - - @silence_author!=me@example.com - -
      -
      - Match alerts silenced by everyone except - - foo@example.com - - . -
      -
      • -
    • -
      - - @silence_author=~@example.com - -
      -
      - Match alerts silenced by author matching regular expression - - /.*@example.com.*/ - - . -
      -
      • -
    -
    -
    - Match alerts based on the jira linked in the silence -
    -
    -
    - Supported operators: - - = - - - != - - - =~ - - - !~ - -
    -
    - Examples: -
    -
      -
      - This is supported only if JIRA regexp are enabled and able to match JIRA ids in the silence comment body. -
      -
    • -
      - - @silence_jira=PROJECT-123 - -
      -
      - Match silenced alerts where detected JIRA issue id is equal to - - PROJECT-123 - - . -
      -
      • -
    • -
      - - @silence_jira!=PROJECT-123 - -
      -
      - Match silenced alerts where detected JIRA issue id is different than - - PROJECT-123 - - . -
      -
      • -
    • -
      - - @silence_jira=~PROJECT - -
      -
      - Match silenced alerts where detected JIRA issue id matches regular expression - - /.*PROJECT.*/ - - . -
      -
      • -
    -
    -
    - Limit number of displayed alerts -
    -
    -
    - Supported operators: - - = - -
    -
    - Examples: -
    -
      -
      - Value must be a number >= 1. -
      -
    • -
      - - @limit=10 - -
      -
      - Limit number of displayed alerts to 10. -
      -
      • -
    -
    -
    - Match alerts based on creation timestamp -
    -
    -
    - Supported operators: - - > - - - < - -
    -
    - Examples: -
    -
      -
    • -
      - - @age>15m - -
      -
      - Match alerts older than 15 minutes. -
      -
      • -
    • -
      - - @age>1h - -
      -
      - Match alerts older than 1 hour. -
      -
      • -
    • -
      - - @age<10h30m - -
      -
      - Match alerts more recent than 10 hours and 30 minutes. -
      -
      • -
    -
    -
    +
      +
    • +
      + + @age>15m + +
      +
      + Match alerts older than 15 minutes. +
      +
      • +
    • +
      + + @age>1h + +
      +
      + Match alerts older than 1 hour. +
      +
      • +
    • +
      + + @age<10h30m + +
      +
      + Match alerts more recent than 10 hours and 30 minutes. +
      +
      • +
    +
    +
    +
    +
    " diff --git a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap index ec289b8ce..709247dfe 100644 --- a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap +++ b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap @@ -21,294 +21,470 @@ exports[` matches snapshot 1`] = `
    -
    -
    - -
    - - - 10s - - -
    -
    + +
    +
    +
    +
    + Refresh interval
    - - - - 30s - - -
    + -
    -     -
    - - - 120s - - -
    -
    -
    -
    -
    -
    - -
    -
    - - - - -
    -
    -
    -
    -
    -
    - -
    -
    - - - - -
    -
    -
    -
    -
    - -
    - - - 300 - - -
    -
    -
    - - - - 420 - - -
    -
    -     -
    - - - 800 - - -
    -
    -
    -
    -
    - -
    - - - 1 - - -
    -
    -
    - - - - 5 - - -
    -
    -     -
    - - - 10 - - -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - Collapse on mobile -
    -
    -
    - + +
    +
    +
    +
    +
    +
    +
    + + + 10s + + +
    +
    +
    + + + + 30s + + +
    +
    +     +
    + + + 120s + + +
    +
    +
    +
    +
    +
    +
    +
    +
    + Filter bar configuration +
    +
    + + + + +
    +
    +
    +
    +
    +
    +
    + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    + Alert group titlebar configuration +
    +
    + + + + +
    +
    +
    +
    +
    +
    +
    + + -
    -
    -
    -
    -
    -
    - - -
    - - - - + +
    -
    -
    -
    -
    - +
    +
    +
    +
    + Minimal alert group width +
    +
    + + + + +
    +
    -
    -
    -
    -
    -
    -
    - Use defaults from karma config file +
    +
    +
    +
    + + + 300 + + +
    +
    -
    -
    + + + 420 + + +
    - + +
    + + + 800 + + +
    +
    +
    +
    +
    +
    +
    +
    +
    + Default number of alerts to show per group +
    +
    + + + + +
    +
    +
    +
    +
    +
    +
    + + + 1 + + +
    +
    +
    + + + + 5 + + +
    +
    +     +
    + + + 10 + + +
    +
    +
    +
    +
    +
    +
    +
    +
    + Default alert group display +
    +
    + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Collapse on mobile +
    +
    +
    -
    + +
    +
    -
    -
    - - -
    - + + +
    - - - + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Grid sort order +
    +
    + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Use defaults from karma config file +
    +
    +
    + +
    +
    +
    +
    +
    +
    + + +
    + + + + +
    +
    +