ASTERIXDB-1856, ASTERIXDB-1858 Query interface tweak

1. Add 'Documentation' link to the query interface.
2. Move the formatted JSON to the dropdown list.
3. Change the formatted JSON to collapse after first level.

Change-Id: I6f5980027cf8d57c0d2503c735f44b70177eee56
Reviewed-on: https://asterix-gerrit.ics.uci.edu/1622
Sonar-Qube: Jenkins <jenkins@fulliautomatix.ics.uci.edu>
Tested-by: Jenkins <jenkins@fulliautomatix.ics.uci.edu>
BAD: Jenkins <jenkins@fulliautomatix.ics.uci.edu>
Integration-Tests: Jenkins <jenkins@fulliautomatix.ics.uci.edu>
Reviewed-by: Ian Maxon <imaxon@apache.org>
diff --git a/asterixdb/asterix-app/src/main/resources/webui/querytemplate.html b/asterixdb/asterix-app/src/main/resources/webui/querytemplate.html
index 84d1410..cffec6f 100644
--- a/asterixdb/asterix-app/src/main/resources/webui/querytemplate.html
+++ b/asterixdb/asterix-app/src/main/resources/webui/querytemplate.html
@@ -158,9 +158,8 @@
             }
 
             /* Handling Pretty JSON */
-            var resultFormat = $('#output-format option:checked').val();
-            var prettyJson = $('[name="pretty-json"]').is(':checked');
-            if ( prettyJson && (resultFormat == 'LOSSLESS_JSON' || resultFormat == 'CLEAN_JSON')) {
+            var resultFormat = $('#output-format option:checked').text();
+            if ( resultFormat == 'JSON (formatted)') {
               $('.result-content').each(
                   function(idx) {
                     var results = $(this).text().split('\n');
@@ -171,8 +170,8 @@
                         continue;
                       }
                       var resultJSON = $.parseJSON(results[iter1]);
-                            $(this).append($('<div/>').attr("id", "json-record"+idx+"-"+iter1));
-                            $('#json-record'+idx+"-"+iter1).jsonViewer(resultJSON);
+                      $(this).append($('<div/>').attr("id", "json-record"+idx+"-"+iter1));
+                      $('#json-record'+idx+"-"+iter1).jsonViewer(resultJSON, {collapsed: true, level: 1});
                     }
                   }
                 );
@@ -215,6 +214,8 @@
                     Open source<img class="extarget" src="/webui/static/img/targetlink.png"/></a></li>
             <li><a href="https://issues.apache.org/jira/browse/ASTERIXDB" target="_blank">
                     File issues<img class="extarget" src="/webui/static/img/targetlink.png"/></a></li>
+            <li><a href="https://ci.apache.org/projects/asterixdb/index.html" target="_blank">
+                    Documentation<img class="extarget" src="/webui/static/img/targetlink.png"/></a></li>
             <li><a href="https://asterixdb.apache.org/community.html" target="_blank">
                     Contact<img class="extarget" src="/webui/static/img/targetlink.png"/></a></li>
           </ul>
@@ -253,13 +254,13 @@
               <label id="output-format" class="optlabel"> Output Format:<br/>
                 <select name="output-format" class="btn">
                   <option selected value="CLEAN_JSON">JSON</option>
+                  <option value="CLEAN_JSON">JSON (formatted)</option>
                   <option value="ADM">ADM</option>
                   <option value="CSV">CSV (no header)</option>
                   <option value="CSV-Header">CSV (with header)</option>
                   <option value="LOSSLESS_JSON">JSON (lossless)</option>
                 </select>
               </label>
-              <label class="optlabel"><input type="checkbox" name="pretty-json" value="true" /> Format JSON</label>
               <label class="optlabel"><input type="checkbox" name="wrapper-array" value="true" /> Wrap results in outer array</label>
               <label class="checkbox optlabel"><input type="checkbox" name="print-expr-tree" value="true" /> Print parsed expressions</label>
               <label class="checkbox optlabel"><input type="checkbox" name="print-rewritten-expr-tree" value="true" /> Print rewritten expressions</label>
diff --git a/asterixdb/asterix-app/src/main/resources/webui/static/css/jquery.json-viewer.css b/asterixdb/asterix-app/src/main/resources/webui/static/css/jquery.json-viewer.css
index d6143f9..98fdfb9 100644
--- a/asterixdb/asterix-app/src/main/resources/webui/static/css/jquery.json-viewer.css
+++ b/asterixdb/asterix-app/src/main/resources/webui/static/css/jquery.json-viewer.css
@@ -24,14 +24,14 @@
 }
 a.json-toggle:before {
   color: #aaa;
-  content: "\25BC"; /* down arrow */
+  content: "-"; /* down arrow */
   position: absolute;
   display: inline-block;
   width: 1em;
   left: -1em;
 }
 a.json-toggle.collapsed:before {
-  content: "\25B6"; /* left arrow */
+  content: "+"; /* left arrow */
 }
 
 /* Collapsable placeholder links */
diff --git a/asterixdb/asterix-app/src/main/resources/webui/static/js/jquery.json-viewer.js b/asterixdb/asterix-app/src/main/resources/webui/static/js/jquery.json-viewer.js
index 6ef9bdd..b2e82ee 100644
--- a/asterixdb/asterix-app/src/main/resources/webui/static/js/jquery.json-viewer.js
+++ b/asterixdb/asterix-app/src/main/resources/webui/static/js/jquery.json-viewer.js
@@ -118,7 +118,7 @@
         }
         else {
           var count = target.children('li').length;
-          var placeholder = count + (count > 1 ? ' items' : ' item');
+          var placeholder = count + (count > 1 ? ' fields' : ' field');
           target.after('<a href class="json-placeholder">' + placeholder + '</a>');
         }
         return false;
@@ -131,6 +131,15 @@
 
       if (options.collapsed == true) {
         $(this).find('a.json-toggle').click();
+        var lvl = options.level;
+        $(this).each(function() {
+          lvl = lvl-1;
+          if (lvl >= 0) {
+          	$(this).children('a.json-toggle').click();
+          	$(this).children('ul.json-dict').children().each(cfun);
+          }
+          lvl = lvl+1;
+        });
       }
     });
   };