From 96822e7f66537120d7eff370c717c298147badd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Wed, 30 Oct 2019 14:19:06 +0000 Subject: [PATCH] feat(ui): show matched alert count on silence browser --- .../__snapshots__/index.test.js.snap | 58 +++---- .../Grid/AlertGrid/AlertGroup/Silences.js | 2 + .../Labels/FilteringCounterBadge/index.js | 9 +- .../ManagedSilence/SilenceComment.js | 51 +++--- .../ManagedSilence/SilenceComment.test.js | 5 + .../__snapshots__/SilenceComment.test.js.snap | 128 ++++++++------- .../__snapshots__/index.test.js.snap | 146 ++++++++++-------- ui/src/Components/ManagedSilence/index.js | 7 + .../Components/ManagedSilence/index.test.js | 2 + .../Components/SilenceModal/Browser/index.js | 2 + .../SilenceModal/Browser/index.test.js | 5 + .../Components/SilenceModal/index.stories.js | 1 + 12 files changed, 252 insertions(+), 164 deletions(-) diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap index c255111d2..469f308a4 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap @@ -290,7 +290,7 @@ exports[` mathes snapshot when silence is rendered 1`] = `
-
+
mathes snapshot when silence is rendered 1`] = `
-
+
Mocked Silence
+
+ + — me@example.com + + + Expired + + +
-
-
-
- - — me@example.com - - - Expired - - -
-
- - +
+ - - + + + +
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silences.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silences.js index e14db7cdb..9786c2c41 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silences.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silences.js @@ -46,6 +46,8 @@ const RenderSilence = ( { const comment = silence.jiraURL ? ( @@ -28,10 +33,10 @@ const SilenceComment = ({ return (
-
+
-
+
{comment}
+
+ + — {silence.createdBy} + + {collapsed ? : null} +
-
-
-
- - — {silence.createdBy} - - {collapsed ? : null} -
-
- +
+
+ + +
@@ -61,8 +74,10 @@ const SilenceComment = ({ }; SilenceComment.propTypes = { silence: APISilence.isRequired, + alertCount: PropTypes.number.isRequired, collapsed: PropTypes.bool.isRequired, - collapseToggle: PropTypes.func.isRequired + collapseToggle: PropTypes.func.isRequired, + alertStore: PropTypes.instanceOf(AlertStore).isRequired }; export { SilenceComment }; diff --git a/ui/src/Components/ManagedSilence/SilenceComment.test.js b/ui/src/Components/ManagedSilence/SilenceComment.test.js index 0a0192da7..6cb01e817 100644 --- a/ui/src/Components/ManagedSilence/SilenceComment.test.js +++ b/ui/src/Components/ManagedSilence/SilenceComment.test.js @@ -5,12 +5,15 @@ import { mount } from "enzyme"; import toDiffableHtml from "diffable-html"; import { MockSilence } from "__mocks__/Alerts"; +import { AlertStore } from "Stores/AlertStore"; import { SilenceComment } from "./SilenceComment"; let silence; +let alertStore; beforeEach(() => { silence = MockSilence(); + alertStore = new AlertStore([]); }); afterEach(() => { @@ -23,6 +26,8 @@ const CollapseMock = jest.fn(); const MountedSilenceComment = collapsed => { return mount( Matches snapshot when collapsed 1`] = ` "
-
+
Matches snapshot when collapsed 1`] = `
-
+
Mocked Silence
+
+ + — me@example.com + + + Expired + + +
-
-
-
- - — me@example.com - - - Expired - - -
-
- - +
+
- - + + 123 + +
+ + + + +
" @@ -60,7 +72,7 @@ exports[` Matches snapshot when collapsed 1`] = ` exports[` Matches snapshot when expanded 1`] = ` "
-
+
Matches snapshot when expanded 1`] = `
-
+
Mocked Silence
+
+ + — me@example.com + +
-
-
-
- - — me@example.com - -
-
- - +
+
- - + + 123 + +
+ + + + +
" diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap index 980c6aa0e..ba645e8dd 100644 --- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap +++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap @@ -5,7 +5,7 @@ exports[` matches snapshot when collapsed 1`] = `
-
+
matches snapshot when collapsed 1`] = `
-
+
Mocked Silence
-
-
-
-
- - — me@example.com - - - Expires - -
-
+
+ + — me@example.com + + + Expires + +
+
+
-
- + +
-
- - +
+
- - + + 123 + +
+ + + + +
@@ -76,7 +88,7 @@ exports[` matches snapshot with expaned details 1`] = `
-
+
matches snapshot with expaned details 1`] = `
-
+
Mocked Silence
+
+ + — me@example.com + +
-
-
-
- - — me@example.com - -
-
- - +
+
- - + + 123 + +
+ + + + +
diff --git a/ui/src/Components/ManagedSilence/index.js b/ui/src/Components/ManagedSilence/index.js index bd816f8cb..9456171b2 100644 --- a/ui/src/Components/ManagedSilence/index.js +++ b/ui/src/Components/ManagedSilence/index.js @@ -17,6 +17,8 @@ const ManagedSilence = observer( class ManagedSilence extends Component { static propTypes = { cluster: PropTypes.string.isRequired, + alertCount: PropTypes.number.isRequired, + alertCountAlwaysVisible: PropTypes.bool.isRequired, silence: APISilence.isRequired, alertStore: PropTypes.instanceOf(AlertStore).isRequired, silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired, @@ -60,6 +62,8 @@ const ManagedSilence = observer( render() { const { cluster, + alertCount, + alertCountAlwaysVisible, silence, alertStore, silenceFormStore, @@ -71,7 +75,10 @@ const ManagedSilence = observer(
diff --git a/ui/src/Components/ManagedSilence/index.test.js b/ui/src/Components/ManagedSilence/index.test.js index f2fba5e95..51e54c9d0 100644 --- a/ui/src/Components/ManagedSilence/index.test.js +++ b/ui/src/Components/ManagedSilence/index.test.js @@ -54,6 +54,8 @@ const MountedManagedSilence = onDidUpdate => { return mount( { silence.id = `silence${index}`; silences.push({ cluster: cluster, + alertCount: 123, silence: silence }); } @@ -86,6 +87,7 @@ describe("", () => { JSON.stringify([ { cluster: cluster, + alertCount: 123, silence: silence } ]) @@ -102,6 +104,7 @@ describe("", () => { JSON.stringify([ { cluster: cluster, + alertCount: 123, silence: silence } ]) @@ -123,6 +126,7 @@ describe("", () => { JSON.stringify([ { cluster: cluster, + alertCount: 123, silence: silence } ]) @@ -172,6 +176,7 @@ describe("", () => { JSON.stringify([ { cluster: cluster, + alertCount: 123, silence: silence } ]) diff --git a/ui/src/Components/SilenceModal/index.stories.js b/ui/src/Components/SilenceModal/index.stories.js index 6e481760a..f9bd889b6 100644 --- a/ui/src/Components/SilenceModal/index.stories.js +++ b/ui/src/Components/SilenceModal/index.stories.js @@ -125,6 +125,7 @@ storiesOf("SilenceModal", module) silence.id = `silence${index}`; silences.push({ cluster: "am", + alertCount: index - 1, silence: silence }); }