Merge pull request #5720 from Vidhuran/bug4987-query-permalinks

added a button to generate URL for queries created in admin UI.

CHANGELOG.md

@@ -165,6 +165,7 @@ There were some important breaking changes in this release. Here's a list of the
 - [#2715](https://github.com/influxdata/influxdb/issues/2715): Support using field regex comparisons in the WHERE clause
 - [#5994](https://github.com/influxdata/influxdb/issues/5994): Single server
 - [#5737](https://github.com/influxdata/influxdb/pull/5737): Admin UI: Display results of multiple queries, not just the first query. Thanks @Vidhuran!
+- [#5720](https://github.com/influxdata/influxdb/pull/5720): Admin UI: New button to generate permalink to queries
 
 ### Bugfixes
 

services/admin/assets/index.html

@@ -119,6 +119,7 @@ <h3 class="panel-title">Connection Settings</h3>
             <div class="row">
                 <div class="col-sm-12" id="content">
                     <div class="dropdown text-right" id="template-container">
+                        <button class="btn btn-default disabled" id="generate-query-url" data-toggle="modal" data-target="#queryURLModal">Generate Query URL</button>
                         <button class="btn btn-default dropdown-toggle" id="dropdown-templates" data-toggle="dropdown">Query Templates <span class="caret"></span> </button>
                         <ul class="dropdown-menu pull-right" id="action-template">
                           <li><label data-query="SHOW DATABASES">Show Databases</label></li>
@@ -194,6 +195,24 @@ <h4 class="modal-title" id="myModalLabel">Write Data to InfluxDB</h4>
       </div>
     </div>
 
+    <!-- Modal -->
+    <div class="modal fade" id="queryURLModal" tabindex="-1" role="dialog" aria-labelledby="queryURLModalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="queryURLModalLabel">URL for the Query</h4>
+                </div>
+                <div class="modal-body">
+                    <textarea class="form-control" id="query-url"></textarea>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script src="js/vendor/react-0.13.3.min.js"></script>
     <script src="js/vendor/jquery-2.1.4.min.js"></script>
     <script src="js/vendor/bootstrap-3.3.5.min.js"></script>

services/admin/assets/js/admin.js

@@ -228,6 +228,13 @@ var handleRequestError = function(e) {
 var handleKeypress = function(e) {
     var queryElement = document.getElementById('query');
 
+    // Enable/Disable the generate permalink button
+    if(queryElement.value == "" && !$("#generate-query-url").hasClass("disabled")) {
+        $("#generate-query-url").addClass("disabled");
+    } else {
+        $("#generate-query-url").removeClass("disabled");
+    }
+
     // key press == enter
     if (e.keyCode == 13) {
         e.preventDefault();
@@ -424,6 +431,17 @@ var updateDatabaseList = function() {
     }
 }
 
+var generateQueryURL = function() {
+    var q = document.getElementById('query').value;
+
+    var query = connectionString() + "/query?";
+    var queryParams = {q: q, db: currentlySelectedDatabase};
+    query += $.param(queryParams);
+
+    var textarea = $("#query-url");
+    textarea.val(query);
+}
+
 // when the page is ready, start everything up
 $(document).ready(function () {
     loadSettings();
@@ -476,6 +494,18 @@ $(document).ready(function () {
 
     });
 
+    // Enable auto select of the text in modal
+    $('#queryURLModal').on('shown.bs.modal', function () {
+        var textarea = $("#query-url");
+        textarea.focus();
+        textarea.select();
+    });
+
+    //bind to the generate permalink button
+    $("#generate-query-url").click(function (e) {
+        generateQueryURL();
+    });
+
     // handle submit actions on the query bar
     var form = document.getElementById('query-form');
     form.addEventListener("submit", handleSubmit);