diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
new file mode 100644
index 000000000..dfaa05fd2
--- /dev/null
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RenderLinkAnnotation /> matches snapshot 1`] = `
+<a
+  className="text-nowrap text-truncate badge badge-secondary mr-1"
+  href="http://localhost/foo"
+  key="annotation name"
+  rel="noopener noreferrer"
+  target="_blank"
+>
+  <FontAwesomeIcon
+    border={false}
+    className=""
+    fixedWidth={false}
+    flip={null}
+    icon={
+      Object {
+        "icon": Array [
+          576,
+          512,
+          Array [],
+          "f35d",
+          "M576 24v127.984c0 21.461-25.96 31.98-40.971 16.971l-35.707-35.709-243.523 243.523c-9.373 9.373-24.568 9.373-33.941 0l-22.627-22.627c-9.373-9.373-9.373-24.569 0-33.941L442.756 76.676l-35.703-35.705C391.982 25.9 402.656 0 424.024 0H552c13.255 0 24 10.745 24 24zM407.029 270.794l-16 16A23.999 23.999 0 0 0 384 303.765V448H64V128h264a24.003 24.003 0 0 0 16.97-7.029l16-16C376.089 89.851 365.381 64 344 64H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V287.764c0-21.382-25.852-32.09-40.971-16.97z",
+        ],
+        "iconName": "external-link-alt",
+        "prefix": "fas",
+      }
+    }
+    inverse={false}
+    listItem={false}
+    mask={null}
+    pull={null}
+    pulse={false}
+    rotation={null}
+    size={null}
+    spin={false}
+    symbol={false}
+    transform={null}
+  />
+   
+  annotation name
+</a>
+`;
+
+exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=false 1`] = `
+"
+<div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation\\">
+  <svg aria-hidden=\\"true\\"
+       data-prefix=\\"fas\\"
+       data-icon=\\"search-plus\\"
+       class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
+       role=\\"img\\"
+       xmlns=\\"http://www.w3.org/2000/svg\\"
+       viewbox=\\"0 0 512 512\\"
+  >
+    <path fill=\\"currentColor\\"
+          d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+    >
+    </path>
+  </svg>
+  foo
+</div>
+"
+`;
+
+exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=true 1`] = `
+"
+<div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation\\">
+  <svg aria-hidden=\\"true\\"
+       data-prefix=\\"fas\\"
+       data-icon=\\"search-minus\\"
+       class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
+       role=\\"img\\"
+       xmlns=\\"http://www.w3.org/2000/svg\\"
+       viewbox=\\"0 0 512 512\\"
+  >
+    <path fill=\\"currentColor\\"
+          d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
+    >
+    </path>
+  </svg>
+  <span class=\\"text-muted\\">
+    foo:
+  </span>
+  <span class=\\"Linkify\\">
+    some long text
+  </span>
+</div>
+"
+`;
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.test.js
new file mode 100644
index 000000000..ed1edbbad
--- /dev/null
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.test.js
@@ -0,0 +1,100 @@
+import React from "react";
+
+import { shallow, mount } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
+
+import { AlertStore } from "Stores/AlertStore";
+import { RenderNonLinkAnnotation, RenderLinkAnnotation } from ".";
+
+let alertStore;
+
+beforeEach(() => {
+  alertStore = new AlertStore([]);
+});
+
+const ShallowLinkAnnotation = () => {
+  return shallow(
+    <RenderLinkAnnotation name="annotation name" value="http://localhost/foo" />
+  );
+};
+
+describe("<RenderLinkAnnotation />", () => {
+  it("matches snapshot", () => {
+    const tree = ShallowLinkAnnotation();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("contains a link", () => {
+    const tree = ShallowLinkAnnotation();
+    const link = tree.find("a[href='http://localhost/foo']");
+    expect(link).toHaveLength(1);
+    expect(link.text()).toMatch(/annotation name/);
+  });
+});
+
+const MockAfterUpdate = jest.fn();
+
+const ShallowNonLinkAnnotation = visible => {
+  return shallow(
+    <RenderNonLinkAnnotation
+      alertStore={alertStore}
+      name="foo"
+      value="some long text"
+      visible={visible}
+      afterUpdate={MockAfterUpdate}
+    />
+  );
+};
+
+const MountedNonLinkAnnotation = visible => {
+  return mount(
+    <RenderNonLinkAnnotation
+      alertStore={alertStore}
+      name="foo"
+      value="some long text"
+      visible={visible}
+      afterUpdate={MockAfterUpdate}
+    />
+  );
+};
+
+describe("<RenderNonLinkAnnotation />", () => {
+  it("matches snapshot when visible=true", () => {
+    const tree = ShallowNonLinkAnnotation(true);
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+
+  it("contains value when visible=true", () => {
+    const tree = ShallowNonLinkAnnotation(true);
+    expect(tree.html()).toMatch(/some long text/);
+  });
+
+  it("matches snapshot when visible=false", () => {
+    const tree = ShallowNonLinkAnnotation(false);
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+
+  it("doesn't contain value when visible=false", () => {
+    const tree = ShallowNonLinkAnnotation(false);
+    expect(tree.html()).not.toMatch(/some long text/);
+  });
+
+  it("clicking on + icon hides the value", () => {
+    const tree = MountedNonLinkAnnotation(true);
+    expect(tree.html()).toMatch(/fa-search-minus/);
+    expect(tree.html()).toMatch(/some long text/);
+    tree.find("div").simulate("click");
+    expect(tree.html()).toMatch(/fa-search-plus/);
+    expect(tree.html()).not.toMatch(/some long text/);
+  });
+
+  it("clicking on - icon shows the value", () => {
+    const tree = MountedNonLinkAnnotation(false);
+    expect(tree.html()).toMatch(/fa-search-plus/);
+    expect(tree.html()).not.toMatch(/some long text/);
+    tree.find("div").simulate("click");
+    expect(tree.html()).toMatch(/fa-search-minus/);
+    expect(tree.html()).toMatch(/some long text/);
+  });
+});