From d41fbff99e2682fdb8be220ca5f1495b421dedd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Sun, 14 Jul 2019 19:09:20 +0100 Subject: [PATCH] feat(ui): show the number of hidden label on the overview modal We only render top 9 labels, add a counter showing how many were skipped --- .../OverviewModal/OverviewModalContent.js | 5 + .../OverviewModalContent.test.js | 11 + .../OverviewModalContent.test.js.snap | 355 +++++++++++++++++- 3 files changed, 370 insertions(+), 1 deletion(-) diff --git a/ui/src/Components/OverviewModal/OverviewModalContent.js b/ui/src/Components/OverviewModal/OverviewModalContent.js index dd6b2bc33..f05dde437 100644 --- a/ui/src/Components/OverviewModal/OverviewModalContent.js +++ b/ui/src/Components/OverviewModal/OverviewModalContent.js @@ -38,6 +38,11 @@ const LabelsTable = observer(({ alertStore }) => ( } /> ))} + {nameStats.values.length > 9 ? ( +
+ +{nameStats.values.length - 9} more +
+ ) : null} ))} diff --git a/ui/src/Components/OverviewModal/OverviewModalContent.test.js b/ui/src/Components/OverviewModal/OverviewModalContent.test.js index c337a6119..4fd65343f 100644 --- a/ui/src/Components/OverviewModal/OverviewModalContent.test.js +++ b/ui/src/Components/OverviewModal/OverviewModalContent.test.js @@ -37,6 +37,17 @@ describe("", () => { { value: "bar3", raw: "foo=bar3", hits: 4, percent: 25, offset: 75 } ] }, + { + name: "bar", + hits: 20, + values: Array.from(Array(20).keys()).map(i => ({ + value: `baz${i + 1}`, + raw: `bar=baz${i + 1}`, + hits: 1, + percent: 5, + offset: i * 5 + })) + }, { name: "alertname", hits: 5, diff --git a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap index 9946996cb..5f8dae447 100644 --- a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap +++ b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap @@ -142,6 +142,359 @@ exports[` matches snapshot with labels to show 1`] = ` + + + + + 20 + + bar + + + +
+ + + 1 + + + + bar: + + + baz1 + + + +
+
+
+
+
+
+ + + 1 + + + + bar: + + + baz2 + + + +
+
+
+
+
+
+
+
+ + + 1 + + + + bar: + + + baz3 + + + +
+
+
+
+
+
+
+
+ + + 1 + + + + bar: + + + baz4 + + + +
+
+
+
+
+
+
+
+ + + 1 + + + + bar: + + + baz5 + + + +
+
+
+
+
+
+
+
+ + + 1 + + + + bar: + + + baz6 + + + +
+
+
+
+
+
+
+
+ + + 1 + + + + bar: + + + baz7 + + + +
+
+
+
+
+
+
+
+ + + 1 + + + + bar: + + + baz8 + + + +
+
+
+
+
+
+
+
+ + + 1 + + + + bar: + + + baz9 + + + +
+
+
+
+
+
+
+
+ +11 more +
+ + matches snapshot with labels to show 1`] = `