Add a 'Remove Graph' link to the 'Graph' screen

zhaosijun · Jul 31, 2016 · 0b883e2 · 0b883e2
1 parent 6633df1
commit 0b883e2
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/web/ui/static/js/graph.js b/web/ui/static/js/graph.js
@@ -8,6 +8,7 @@ Handlebars.registerHelper('pathPrefix', function() { return PATH_PREFIX; });
 
 Prometheus.Graph = function(element, options) {
   this.el = element;
+  this.graphHtml = null;
   this.options = options;
   this.changeHandler = null;
   this.rickshawGraph = null;
@@ -45,8 +46,8 @@ Prometheus.Graph.prototype.initialize = function() {
 
   // Draw graph controls and container from Handlebars template.
 
-  var graphHtml = graphTemplate(self.options);
-  self.el.append(graphHtml);
+  self.graphHtml = $(graphTemplate(self.options));
+  self.el.append(self.graphHtml);
 
   // Get references to all the interesting elements in the graph container and
   // bind event handlers.
@@ -164,6 +165,12 @@ Prometheus.Graph.prototype.initialize = function() {
     self.expr.focus(); // refocusing
   });
 
+  var removeBtn = graphWrapper.find("[name=remove]");
+  removeBtn.click(function() {
+    self.remove();
+    return false;
+  });
+
   self.populateInsertableMetrics();
 
   if (self.expr.val()) {
@@ -612,6 +619,13 @@ Prometheus.Graph.prototype.handleConsoleResponse = function(data, textStatus) {
   }
 };
 
+Prometheus.Graph.prototype.remove = function() {
+  var self = this;
+  $(self.graphHtml).remove();
+  graphs = graphs.filter(function(e) {return e !== self});
+  storeGraphOptionsInURL();
+};
+
 function parseGraphOptionsFromURL() {
   var hashOptions = window.location.hash.slice(1);
   if (!hashOptions) {

diff --git a/web/ui/static/js/graph_template.handlebar b/web/ui/static/js/graph_template.handlebar
@@ -124,5 +124,10 @@
                 </div>
               </div>
             </div>
+            <div class="row">
+              <div class="col-lg-12 text-right">
+                    <a name="remove" href="#">Remove Graph</a>
+              </div>
+            </div>
           </form>
         </div>