Explain analyze dropdown button (#532)

* Adds bootstrap dropdown plugin
* Float dropdown toggle left
* Extract query running message toggles
* Adds analyze function and api call
* Adds analyze api

pkg/api/api.go

@@ -280,7 +280,7 @@ func RunQuery(c *gin.Context) {
 	HandleQuery(query, c)
 }
 
-// ExplainQuery renders query analyze profile
+// ExplainQuery renders query explain plan
 func ExplainQuery(c *gin.Context) {
 	query := cleanQuery(c.Request.FormValue("query"))
 
@@ -289,6 +289,18 @@ func ExplainQuery(c *gin.Context) {
 		return
 	}
 
+	HandleQuery(fmt.Sprintf("EXPLAIN %s", query), c)
+}
+
+// AnalyzeQuery renders query explain plan and analyze profile
+func AnalyzeQuery(c *gin.Context) {
+	query := cleanQuery(c.Request.FormValue("query"))
+
+	if query == "" {
+		badRequest(c, errQueryRequired)
+		return
+	}
+
 	HandleQuery(fmt.Sprintf("EXPLAIN ANALYZE %s", query), c)
 }
 

pkg/api/routes.go

@@ -50,6 +50,8 @@ func SetupRoutes(router *gin.Engine) {
 	api.POST("/query", RunQuery)
 	api.GET("/explain", ExplainQuery)
 	api.POST("/explain", ExplainQuery)
+	api.GET("/analyze", AnalyzeQuery)
+	api.POST("/analyze", AnalyzeQuery)
 	api.GET("/history", GetHistory)
 	api.GET("/bookmarks", GetBookmarks)
 	api.GET("/export", DataExport)

static/css/app.css

@@ -284,7 +284,6 @@
 
 #input {
   height: 255px;
-  overflow: hidden;
 }
 
 #input .wrapper {
@@ -571,6 +570,10 @@
   display: block;
 }
 
+.left {
+  float: left;
+}
+
 /* -------------------------------------------------------------------------- */
 
 #custom_query {

static/index.html

@@ -14,6 +14,7 @@
   <script type="text/javascript" src="static/js/ace-pgsql.js"></script>
   <script type="text/javascript" src="static/js/ext-language_tools.js"></script>
   <script type="text/javascript" src="static/js/bootstrap-contextmenu.js"></script>
+  <script type="text/javascript" src="static/js/bootstrap-dropdown.js"></script>
   <script type="text/javascript" src="static/js/utils.js"></script>
   <script type="text/javascript" src="static/js/bootstrap3-typeahead.min.js"></script>
   <script type="text/javascript" src="static/js/app.js"></script> 
@@ -76,7 +77,15 @@
           <div id="custom_query"></div>
           <div class="actions">
             <input type="button" id="run" value="Run Query" class="btn btn-sm btn-primary" />
-            <input type="button" id="explain" value="Explain Query" class="btn btn-sm btn-default" />
+            <div id="explain-dropdown" class="btn-group left">
+              <button id="explain-dropdown-toggle" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                Explain Query <span class="caret"></span>
+              </button>
+              <ul class="dropdown-menu" role="menu">
+                <li><a href="#" id="explain">Explain Query</a></li>
+                <li><a href="#" id="analyze">Analyze Query</a></li>
+              </ul>
+            </div>
             <div id="query_progress">Please wait, query is executing...</div>
             <div class="pull-right">
               <span id="result-rows-count"></span>

static/js/app.js

@@ -90,6 +90,7 @@ function getHistory(cb)                     { apiCall("get", "/history", {}, cb)
 function getBookmarks(cb)                   { apiCall("get", "/bookmarks", {}, cb); }
 function executeQuery(query, cb)            { apiCall("post", "/query", { query: query }, cb); }
 function explainQuery(query, cb)            { apiCall("post", "/explain", { query: query }, cb); }
+function analyzeQuery(query, cb)            { apiCall("post", "/analyze", { query: query }, cb); }
 function disconnect(cb)                     { apiCall("post", "/disconnect", {}, cb); }
 
 function encodeQuery(query) {
@@ -607,25 +608,33 @@ function showActivityPanel() {
   });
 }
 
+function showQueryProgressMessage() {
+  $("#run, #explain-dropdown-toggle, #csv, #json, #xml").prop("disabled", true);
+  $("#explain-dropdown").removeClass("open");
+  $("#query_progress").show();
+}
+
+function hideQueryProgressMessage() {
+  $("#run, #explain-dropdown-toggle, #csv, #json, #xml").prop("disabled", false);
+  $("#query_progress").hide();
+}
+
 function runQuery() {
   setCurrentTab("table_query");
 
-  $("#run, #explain, #csv, #json, #xml").prop("disabled", true);
+  showQueryProgressMessage();
-  $("#query_progress").show();
 
   var query = $.trim(editor.getSelectedText() || editor.getValue());
 
   if (query.length == 0) {
-    $("#run, #explain, #csv, #json, #xml").prop("disabled", false);
+    hideQueryProgressMessage();
-    $("#query_progress").hide();
     return;
   }
 
   executeQuery(query, function(data) {
     buildTable(data);
 
-    $("#run, #explain, #csv, #json, #xml").prop("disabled", false);
+    hideQueryProgressMessage();
-    $("#query_progress").hide();
     $("#input").show();
     $("#body").removeClass("full");
     $("#results").data("mode", "query");
@@ -644,22 +653,41 @@ function runQuery() {
 function runExplain() {
   setCurrentTab("table_query");
 
-  $("#run, #explain, #csv, #json, #xml").prop("disabled", true);
+  showQueryProgressMessage();
-  $("#query_progress").show();
 
   var query = $.trim(editor.getSelectedText() || editor.getValue());
 
   if (query.length == 0) {
-    $("#run, #explain, #csv, #json, #xml").prop("disabled", false);
+    hideQueryProgressMessage();
-    $("#query_progress").hide();
     return;
   }
 
   explainQuery(query, function(data) {
     buildTable(data);
 
-    $("#run, #explain, #csv, #json, #xml").prop("disabled", false);
+    hideQueryProgressMessage();
-    $("#query_progress").hide();
+    $("#input").show();
+    $("#body").removeClass("full");
+    $("#results").addClass("no-crop");
+  });
+}
+
+function runAnalyze() {
+  setCurrentTab("table_query");
+
+  showQueryProgressMessage();
+
+  var query = $.trim(editor.getSelectedText() || editor.getValue());
+
+  if (query.length == 0) {
+    hideQueryProgressMessage();
+    return;
+  }
+
+  analyzeQuery(query, function(data) {
+    buildTable(data);
+
+    hideQueryProgressMessage();
     $("#input").show();
     $("#body").removeClass("full");
     $("#results").addClass("no-crop");
@@ -1115,6 +1143,10 @@ $(document).ready(function() {
     runExplain();
   });
 
+  $("#analyze").on("click", function() {
+    runAnalyze();
+  });
+
   $("#csv").on("click", function() {
     exportTo("csv");
   });

static/js/bootstrap-dropdown.js

@@ -0,0 +1,150 @@
+/* ========================================================================
+ * Bootstrap: dropdown.js v3.2.0
+ * http://getbootstrap.com/javascript/#dropdowns
+ * ========================================================================
+ * Copyright 2011-2014 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * ======================================================================== */
+
++function ($) {
+  'use strict';
+
+  // DROPDOWN CLASS DEFINITION
+  // =========================
+
+  var backdrop = '.dropdown-backdrop'
+  var toggle   = '[data-toggle="dropdown"]'
+  var Dropdown = function (element) {
+    $(element).on('click.bs.dropdown', this.toggle)
+  }
+
+  Dropdown.VERSION = '3.2.0'
+
+  Dropdown.prototype.toggle = function (e) {
+    var $this = $(this)
+
+    if ($this.is('.disabled, :disabled')) return
+
+    var $parent  = getParent($this)
+    var isActive = $parent.hasClass('open')
+
+    clearMenus()
+
+    if (!isActive) {
+      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
+        // if mobile we use a backdrop because click events don't delegate
+        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
+      }
+
+      var relatedTarget = { relatedTarget: this }
+      $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
+
+      if (e.isDefaultPrevented()) return
+
+      $this.trigger('focus')
+
+      $parent
+        .toggleClass('open')
+        .trigger('shown.bs.dropdown', relatedTarget)
+    }
+
+    return false
+  }
+
+  Dropdown.prototype.keydown = function (e) {
+    if (!/(38|40|27)/.test(e.keyCode)) return
+
+    var $this = $(this)
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    if ($this.is('.disabled, :disabled')) return
+
+    var $parent  = getParent($this)
+    var isActive = $parent.hasClass('open')
+
+    if (!isActive || (isActive && e.keyCode == 27)) {
+      if (e.which == 27) $parent.find(toggle).trigger('focus')
+      return $this.trigger('click')
+    }
+
+    var desc = ' li:not(.divider):visible a'
+    var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)
+
+    if (!$items.length) return
+
+    var index = $items.index($items.filter(':focus'))
+
+    if (e.keyCode == 38 && index > 0)                 index--                        // up
+    if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
+    if (!~index)                                      index = 0
+
+    $items.eq(index).trigger('focus')
+  }
+
+  function clearMenus(e) {
+    if (e && e.which === 3) return
+    $(backdrop).remove()
+    $(toggle).each(function () {
+      var $parent = getParent($(this))
+      var relatedTarget = { relatedTarget: this }
+      if (!$parent.hasClass('open')) return
+      $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
+      if (e.isDefaultPrevented()) return
+      $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
+    })
+  }
+
+  function getParent($this) {
+    var selector = $this.attr('data-target')
+
+    if (!selector) {
+      selector = $this.attr('href')
+      selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
+    }
+
+    var $parent = selector && $(selector)
+
+    return $parent && $parent.length ? $parent : $this.parent()
+  }
+
+
+  // DROPDOWN PLUGIN DEFINITION
+  // ==========================
+
+  function Plugin(option) {
+    return this.each(function () {
+      var $this = $(this)
+      var data  = $this.data('bs.dropdown')
+
+      if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
+      if (typeof option == 'string') data[option].call($this)
+    })
+  }
+
+  var old = $.fn.dropdown
+
+  $.fn.dropdown             = Plugin
+  $.fn.dropdown.Constructor = Dropdown
+
+
+  // DROPDOWN NO CONFLICT
+  // ====================
+
+  $.fn.dropdown.noConflict = function () {
+    $.fn.dropdown = old
+    return this
+  }
+
+
+  // APPLY TO STANDARD DROPDOWN ELEMENTS
+  // ===================================
+
+  $(document)
+    .on('click.bs.dropdown.data-api', clearMenus)
+    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
+    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
+    .on('keydown.bs.dropdown.data-api', toggle + ', [role="menu"], [role="listbox"]', Dropdown.prototype.keydown)
+
+}(jQuery);