Merge pull request #206 from cloudflare/silence-id

Show silence ID in the UI

Makefile

@@ -133,7 +133,7 @@ test-go: .build/vendor.ok
 	go test -bench=. -cover `go list ./... | grep -v /vendor/`
 
 .PHONY: test-js
-test-js:
+test-js: .build/deps-build-node.ok
 	npm test
 
 .PHONY: test

assets/static/unsee.js

@@ -1,6 +1,7 @@
 "use strict";
 
 const $ = window.$ = window.jQuery = require("jquery");
+const Clipboard = require("clipboard");
 const moment = require("moment");
 const Raven = require("raven-js");
 
@@ -43,6 +44,7 @@ var selectors = {
     refreshButton: "#refresh",
     errors: "#errors",
     instanceErrors: "#instance-errors",
+    clickToCopy: ".click-to-copy"
 };
 
 function parseAJAXError(xhr, textStatus) {
@@ -342,6 +344,16 @@ function onReady(localStore) {
             trigger: "hover"
         });
 
+        var clipboard = new Clipboard(selectors.clickToCopy);
+        clipboard.on("success", function(e) {
+            // flash element after copy
+            $(e.trigger).finish().fadeOut(100).fadeIn(300);
+            // hide tooltip after flash
+            $(e.trigger).tooltip("hide");
+            // reset focus
+            e.clearSelection();
+        });
+
         colors.init($("#alerts").data("static-color-labels").split(" "));
         templates.init();
         ui.setupModal();

assets/templates/alertgroup.html

@@ -150,6 +150,13 @@
               <%- am.name %>
             </div>
           <% } %>
+          <div class="label label-list label-default cursor-pointer click-to-copy"
+             title="Click to copy this silence ID to clipboard"
+             data-toggle="tooltip"
+             data-placement="top"
+             data-clipboard-text="<%- silence.id %>">
+             <%- silence.id %>
+          </div>
           <div class="label label-list label-default label-age label-ts cursor-help"
              data-toggle="tooltip"
              data-placement="top"