From a0cca7f0494c49c08c0b3a8e0ebecb1d45982d66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Thu, 11 Oct 2018 11:50:16 +0100 Subject: [PATCH] chore(ui): tweak affected alerts preview --- .../AlertGroup/Silence/DeleteSilence.js | 13 ++--- .../__snapshots__/index.test.js.snap | 49 ++++++++++--------- ui/src/Components/LabelSetList/index.js | 8 +-- ui/src/Components/LabelSetList/index.test.js | 6 +-- .../__snapshots__/index.test.js.snap | 8 +-- .../SilenceModal/SilencePreview/index.js | 16 ++---- 6 files changed, 46 insertions(+), 54 deletions(-) diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js index 673f588d4..b4de4a3a8 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js @@ -178,15 +178,10 @@ const DeleteSilenceModalContent = observer( ) ) : this.previewState.error === null ? ( -
-

- Alerts affected by this silence -

- -
+ ) : ( )} diff --git a/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap b/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap index 03fa35c73..34bc72fee 100644 --- a/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap +++ b/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap @@ -2,27 +2,32 @@ exports[` matches snapshot with populated list 1`] = ` " -
    -
  • - - foo: bar - -
    • -
  • - - job: node_exporter - -
    • -
  • - - instance: server1 - -
    • -
  • - - cluster: prod - -
    • -
+
+

+ Affected alerts +

+
    +
  • + + foo: bar + +
    • +
  • + + job: node_exporter + +
    • +
  • + + instance: server1 + +
    • +
  • + + cluster: prod + +
    • +
+
" `; diff --git a/ui/src/Components/LabelSetList/index.js b/ui/src/Components/LabelSetList/index.js index 54b4c9cb2..2dd272d3b 100644 --- a/ui/src/Components/LabelSetList/index.js +++ b/ui/src/Components/LabelSetList/index.js @@ -59,8 +59,9 @@ const LabelSetList = observer( const { alertStore, labelsList } = this.props; return labelsList.length > 0 ? ( - -
    +
    +

    Affected alerts

    +
      {labelsList .slice( (this.pagination.activePage - 1) * this.maxPerPage, @@ -91,7 +92,6 @@ const LabelSetList = observer( pageRangeDisplayed={5} onChange={this.pagination.onPageChange} hideFirstLastPages - hideDisabled innerClass="pagination justify-content-center" itemClass="page-item" linkClass="page-link" @@ -100,7 +100,7 @@ const LabelSetList = observer( />
    ) : null} - + ) : (

    No alerts matched

    ); diff --git a/ui/src/Components/LabelSetList/index.test.js b/ui/src/Components/LabelSetList/index.test.js index 0860bf03d..d8d4346bb 100644 --- a/ui/src/Components/LabelSetList/index.test.js +++ b/ui/src/Components/LabelSetList/index.test.js @@ -28,7 +28,7 @@ describe("", () => { it("renders labels on populated list", () => { const tree = MountedLabelSetList([{ foo: "bar" }]); expect(tree.text()).not.toBe("No alerts matched"); - expect(tree.text()).toBe("foo: bar"); + expect(tree.find("ul.list-group").text()).toBe("foo: bar"); }); it("matches snapshot with populated list", () => { @@ -59,8 +59,8 @@ describe("", () => { const tree = MountedLabelSetList( Array.from(Array(21), (_, i) => ({ instance: `server${i + 1}` })) ); - const pageLink = tree.find(".page-link").at(2); + const pageLink = tree.find(".page-link").at(3); pageLink.simulate("click"); - expect(tree.text()).toBe("instance: server21"); + expect(tree.find("ul.list-group").text()).toBe("instance: server21"); }); }); diff --git a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap b/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap index b325ca1d5..6e46ce125 100644 --- a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap +++ b/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap @@ -3,11 +3,11 @@ exports[` matches snapshot 1`] = ` "
    -

    - Unique alert label sets (without receiver) matching this silence. -

    -
      +

      + Affected alerts +

      +
      • alertname: foo diff --git a/ui/src/Components/SilenceModal/SilencePreview/index.js b/ui/src/Components/SilenceModal/SilencePreview/index.js index 46fff071d..41d3c8d2d 100644 --- a/ui/src/Components/SilenceModal/SilencePreview/index.js +++ b/ui/src/Components/SilenceModal/SilencePreview/index.js @@ -96,18 +96,10 @@ const SilencePreview = observer( {this.matchedAlerts.error !== null ? ( ) : ( - -

        - Unique alert label sets (without receiver) matching this - silence. -

        -
        - -
        -         + )}