From e3596dfbf463c026a8a4102d34a3e6bfbd6ee48d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Thu, 7 Mar 2019 23:01:11 +0000 Subject: [PATCH] feat(ui): truncate silences with long comments Only show first 2 lines of a silence comment by default, the rest should be visible only when silence details are visible --- ui/package.json | 1 + .../Silence/__snapshots__/index.test.js.snap | 22 +++++++++++++++++-- .../AlertGrid/AlertGroup/Silence/index.js | 21 +++++++++++++----- .../AlertGroup/Silence/index.test.js | 14 ++++++++++-- ui/yarn.lock | 5 +++++ 5 files changed, 54 insertions(+), 9 deletions(-) diff --git a/ui/package.json b/ui/package.json index bbd68b785..f5d03e367 100644 --- a/ui/package.json +++ b/ui/package.json @@ -47,6 +47,7 @@ "react-select": "2.4.1", "react-tippy": "1.2.3", "react-transition-group": "2.6.0", + "react-truncate": "2.4.0", "whatwg-fetch": "3.0.0" }, "scripts": { diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap index c8ae4c53f..9d27be0a8 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap @@ -15,7 +15,16 @@ exports[` matches snapshot when data is present in alertStore 1`] = `
- Fake silence + + + + + Fake silence + + + … + +
matches snapshot with expaned details 1`] = `
- Fake silence + + + + + Fake silence + + + … + +
{ +const SilenceComment = ({ silence, collapsed }) => { + const showLines = 2; if (silence.jiraURL) { return ( - {silence.comment} + + {silence.comment} + ); } - return silence.comment; + return ( + {silence.comment} + ); }; SilenceComment.propTypes = { - silence: APISilence.isRequired + silence: APISilence.isRequired, + collapsed: PropTypes.bool.isRequired }; const SilenceExpiryBadgeWithProgress = ({ silence, progress }) => { @@ -305,7 +313,10 @@ const Silence = inject("alertStore")(
- + ", () => { expect(toDiffableHtml(tree.html())).toMatchSnapshot(); }); - it("renders comment as link when jiraURL is set", () => { + it("renders comment as link when jiraURL is set and silence is collapsed", () => { alertStore.data.silences.default[silence.id].jiraURL = "http://jira.example.com"; const tree = MountedSilence(alertmanager).find("Silence"); const link = tree.find("a[href='http://jira.example.com']"); expect(link).toHaveLength(1); - expect(link.text()).toBe("Fake silence"); + expect(link.text()).toBe("Fake silence…"); + }); + + it("renders comment as link when jiraURL is set and silence is expaned", () => { + alertStore.data.silences.default[silence.id].jiraURL = + "http://jira.example.com"; + const tree = MountedSilence(alertmanager).find("Silence"); + tree.instance().collapse.toggle(); + const link = tree.find("a[href='http://jira.example.com']"); + expect(link).toHaveLength(1); + expect(link.text()).toBe("Fake silence…"); }); it("clears progress timer on unmount", () => { diff --git a/ui/yarn.lock b/ui/yarn.lock index bd7dba6b7..d24ceabcf 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -9508,6 +9508,11 @@ react-transition-group@2.6.0, react-transition-group@^2.2.1: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" +react-truncate@2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/react-truncate/-/react-truncate-2.4.0.tgz#3cf5ff09ab86f93e3c078d359f4de6d75aa60510" + integrity sha512-3QW11/COYwi6iPUaunUhl06DW5NJBJD1WkmxW5YxqqUu6kvP+msB3jfoLg8WRbu57JqgebjVW8Lknw6T5/QZdA== + "react@15.x.x - 16.x.x": version "16.8.3" resolved "https://registry.yarnpkg.com/react/-/react-16.8.3.tgz#c6f988a2ce895375de216edcfaedd6b9a76451d9"