diff --git a/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap b/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap index ecb061e13..7f0088f71 100644 --- a/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap +++ b/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap @@ -6,48 +6,50 @@ exports[` matches snapshot with populated list 1`] = `

Affected alerts

- + " `; diff --git a/ui/src/Components/LabelSetList/index.js b/ui/src/Components/LabelSetList/index.js index 2dd272d3b..efb69ed22 100644 --- a/ui/src/Components/LabelSetList/index.js +++ b/ui/src/Components/LabelSetList/index.js @@ -61,28 +61,30 @@ const LabelSetList = observer( return labelsList.length > 0 ? (

Affected alerts

- +
+
    + {labelsList + .slice( + (this.pagination.activePage - 1) * this.maxPerPage, + this.pagination.activePage * this.maxPerPage + ) + .map(labels => ( +
  • + {Object.entries(labels).map(([name, value]) => ( + + ))} +
    • + ))} +
+
{labelsList.length > this.maxPerPage ? (
matches snapshot 1`] = `

Affected alerts

-
    -
  • - - - alertname: +
    +
      +
    • + + + alertname: + + + foo + - - foo + + + job: + + + foo + - - - - job: + + + instance: + + + foo1 + - - foo +
      • +
    • + + + alertname: + + + bar + - - - - instance: + + + job: + + + bar + - - foo1 + + + instance: + + + bar1 + - -
      • -
    • - - - alertname: +
      • +
    • + + + alertname: + + + bar + - - bar + + + job: + + + bar + - - - - job: + + + instance: + + + bar2 + - - bar - - - - - instance: - - - bar1 - - -
      • -
    • - - - alertname: - - - bar - - - - - job: - - - bar - - - - - instance: - - - bar2 - - -
      • -
    +
    • +
+
"