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

@@ -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": {

ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap

@@ -15,7 +15,16 @@ exports[`<Silence /> matches snapshot when data is present in alertStore 1`] = `
 <div class=\\"card mt-1 border-0 p-1\\">
   <div class=\\"card-text mb-0\\">
     <span class=\\"text-muted my-1\\">
-      Fake silence
+      <span width=\\"0\\">
+        <span>
+        </span>
+        <span>
+          Fake silence
+        </span>
+        <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
+          …
+        </span>
+      </span>
       <span class=\\"blockquote-footer pt-1\\">
         <span class=\\"float-right cursor-pointer\\">
           <div class
@@ -71,7 +80,16 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
 <div class=\\"card mt-1 border-0 p-1\\">
   <div class=\\"card-text mb-0\\">
     <span class=\\"text-muted my-1\\">
-      Fake silence
+      <span width=\\"0\\">
+        <span>
+        </span>
+        <span>
+          Fake silence
+        </span>
+        <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
+          …
+        </span>
+      </span>
       <span class=\\"blockquote-footer pt-1\\">
         <span class=\\"float-right cursor-pointer\\">
           <div class

ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.js

@@ -9,6 +9,8 @@ import hash from "object-hash";
 import moment from "moment";
 import Moment from "react-moment";
 
+import Truncate from "react-truncate";
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
 import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
@@ -33,19 +35,25 @@ import { DeleteSilence } from "./DeleteSilence";
 
 import "./index.css";
 
-const SilenceComment = ({ silence }) => {
+const SilenceComment = ({ silence, collapsed }) => {
+  const showLines = 2;
   if (silence.jiraURL) {
     return (
       <a href={silence.jiraURL} target="_blank" rel="noopener noreferrer">
         <FontAwesomeIcon className="mr-1" icon={faExternalLinkAlt} />
-        {silence.comment}
+        <Truncate lines={collapsed ? showLines : false}>
+          {silence.comment}
+        </Truncate>
       </a>
     );
   }
-  return silence.comment;
+  return (
+    <Truncate lines={collapsed ? showLines : false}>{silence.comment}</Truncate>
+  );
 };
 SilenceComment.propTypes = {
-  silence: APISilence.isRequired
+  silence: APISilence.isRequired,
+  collapsed: PropTypes.bool.isRequired
 };
 
 const SilenceExpiryBadgeWithProgress = ({ silence, progress }) => {
@@ -305,7 +313,10 @@ const Silence = inject("alertStore")(
           <div className="card mt-1 border-0 p-1">
             <div className="card-text mb-0">
               <span className="text-muted my-1">
-                <SilenceComment silence={silence} />
+                <SilenceComment
+                  silence={silence}
+                  collapsed={this.collapse.value}
+                />
                 <span className="blockquote-footer pt-1">
                   <span
                     className="float-right cursor-pointer"

ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.test.js

@@ -168,13 +168,23 @@ describe("<Silence />", () => {
     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", () => {

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"