Gitiles
Code Review Sign In
asterix-gerrit.ics.uci.edu / asterixdb / a22ca7bf8b69ee3a747947be42d2895f82ffae48 / . / asterixdb / asterix-app / src / main / resources / webui / querytemplate.html
blob: 1157c272ed1f03dc84f8badf531991927b52f9f2 [file] [log] [blame]
Till Westmannea8ab392013-06-05 15:17:08 -0700[diff] [blame]1<!--
Ian Maxon928bbd12015-09-14 17:12:48 -0700[diff] [blame]2 ! Licensed to the Apache Software Foundation (ASF) under one
3 ! or more contributor license agreements. See the NOTICE file
4 ! distributed with this work for additional information
5 ! regarding copyright ownership. The ASF licenses this file
6 ! to you under the Apache License, Version 2.0 (the
7 ! "License"); you may not use this file except in compliance
8 ! with the License. You may obtain a copy of the License at
9 !
10 ! http://www.apache.org/licenses/LICENSE-2.0
11 !
12 ! Unless required by applicable law or agreed to in writing,
13 ! software distributed under the License is distributed on an
14 ! "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15 ! KIND, either express or implied. See the License for the
16 ! specific language governing permissions and limitations
17 ! under the License.
Till Westmannea8ab392013-06-05 15:17:08 -0700[diff] [blame]18 !-->
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]19<!DOCTYPE html>
20<html lang="en">
21<head>
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]22 <meta name="description" content="ASTERIX WEB PAGE" />
23 <meta name="viewport" content="width=device-width, initial-scale=1.0">
24 <link
25 href='http://fonts.googleapis.com/css?family=Bitter|PT+Sans+Caption|Open+Sans'
26 rel='stylesheet' type='text/css'>
27 <script src="/webui/static/js/jquery.min.js"></script>
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]28
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]29 <link href="/webui/static/css/bootstrap.min.css" rel="stylesheet"
30 type="text/css" />
31 <link href="/webui/static/css/bootstrap-responsive.min.css"
32 rel="stylesheet" type="text/css" />
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]33
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]34 <script src="/webui/static/js/bootstrap.min.js"></script>
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]35
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]36 <link href="/webui/static/css/style.css" rel="stylesheet"
37 type="text/css" />
38 <script src="/webui/static/js/jquery.json-viewer.js"></script>
39 <link href="/webui/static/css/jquery.json-viewer.css" type="text/css" rel="stylesheet" />
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]40
Xikui Wang01814762017-03-15 13:52:47 -0700[diff] [blame]41 <script type="text/javascript">
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]42$(document).ready(function() {
43
44 var optionButtonSize = $('#checkboxes-on').width();
45 $('#clear-query-button, #run-btn').width(optionButtonSize);
46
47 $('#checkboxes-on').click(function() {
48 /* Displays a checkmark to indicate selection/clearing */
genia.likes.science@gmail.com016314e2013-05-25 03:19:07 -0700[diff] [blame]49 if ($('#opts').is(":visible")) {
50 $('#opts').hide();
51 $('#queryform :input').prop('checked', false);
52 } else {
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]53 $('#opts').show();
genia.likes.science@gmail.com016314e2013-05-25 03:19:07 -0700[diff] [blame]54 $('#queryform :input').prop('checked', true);
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]55 }
genia.likes.science@gmail.comb0680b32013-05-22 16:21:53 -0700[diff] [blame]56 return false;
genia.likes.science@gmail.com024749d2013-05-20 21:33:08 -0700[diff] [blame]57 });
58
genia.likes.science@gmail.com83fb0652013-05-20 22:03:49 -0700[diff] [blame]59 $('#clear-query-button').click(function() {
60 $("#qry").val('');
61 return false;
62 });
63
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]64 $('form#queryform :input').click(function() {
genia.likes.science@gmail.com016314e2013-05-25 03:19:07 -0700[diff] [blame]65 /* Hides selection check on uncheck, shows when all 5 selected */
66 if ($(this).val()) {
67 if ($(this).is(':checked') && $('input[type=checkbox]').filter(':checked').length == 5) {
68 $('#opts').show();
69 } else {
70 $('#opts').hide();
71 }
72 }
73 });
74
Xikui Wang080993c2017-08-25 09:59:59 -0700[diff] [blame]75 $('#output-format').on('change', function() {
76 var resultFormat = $('#output-format option:checked').text();
77 if (resultFormat == 'JSON (formatted)' || resultFormat == 'CSV (no header)' || resultFormat == 'CSV (with header)') {
78 $('input[name=wrapper-array]').attr('disabled', true);
79 $('input[name=wrapper-array]').prop('checked', false);
80 $('input[name=wrapper-array]').parent().css('color', 'grey');
81 } else {
82 $('input[name=wrapper-array]').attr("disabled", false);
83 $('input[name=wrapper-array]').parent().css('color', '');
84 }
85 });
86
genia.likes.science@gmail.comb0680b32013-05-22 16:21:53 -0700[diff] [blame]87 $("form#queryform").submit(function() {
88 $('#output-message').html("");
89 $.post("/", $("form#queryform").serialize(), function(data) {
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]90 var durPattern = '<PRE>Duration';
Madhusudan.C.Se7bdea62013-06-02 14:34:30 -0700[diff] [blame]91 var errorPattern = /<div class="accordion" id="errorblock">/g;
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]92 var sectionsSeparator = '<h4>';
93 var resultPat = 'Results:</h4>';
Chris Hilleryf4a1c3c2015-08-20 18:33:06 -0700[diff] [blame]94
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]95 if (errorPattern.test(data)) {
96 $('#output-heading').html('Error');
97 $('#output-heading').addClass('error');
Madhusudan.C.Se7bdea62013-06-02 14:34:30 -0700[diff] [blame]98 } else {
99 $('#output-heading').html('Output');
100 $('#output-heading').removeClass('error');
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]101 }
102 var executedStatements = data.split('<!-- BEGIN -->');
103 var executedStatementsWithResultsCount = 0;
104 for (var i = 0; i < executedStatements.length; i++) {
105 if (executedStatements[i].toString().trim().length > 0) {
106 /* check how many statements have returned data*/
107 executedStatementsWithResultsCount++;
108 }
109 }
Madhusudan.C.Sc82c7ba2013-06-02 14:27:00 -0700[diff] [blame]110
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]111 /* only a single statement returned results and/or duration message*/
112 if (executedStatementsWithResultsCount <= 2) {
113 /* print statement results and duration*/
114 $('#output-message').html(data);
115 } else {
116 var resultsCount = 1;
117 /* need to create collapse button and div per statement*/
118 for (var i = 0; i < executedStatements.length; i++) {
119 /* last statement is always the duration message*/
120 if (i == (executedStatements.length - 1)) {
121 /* print duration message*/
122 $('#output-message').append(executedStatements[i]);
123 break;
124 }
genia.likes.science@gmail.comb0680b32013-05-22 16:21:53 -0700[diff] [blame]125
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]126 if (executedStatements[i].toString().trim().length > 0) {
127 var sections = executedStatements[i].toString().split(sectionsSeparator);
128 /* remove the first section since it is always empty due to splitng on sectionsSeparator */
129 sections.splice(0, 1);
Eugenia Gabrielovac459e2b2013-05-23 02:59:43 +0000[diff] [blame]130
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]131 /* if there is a results section, we need to put it before the collapsible section*/
132 for (var j = 0; j < sections.length; j++) {
133 /* print results section and remove it*/
134 if (sections[j].indexOf(resultPat) >= 0) {
135 var resultsSection = sections.splice(j, 1);
136 $('#output-message').append(sectionsSeparator + resultsSection.toString());
137 }
138 }
139
140 if (sections.length > 0) {
141 /* generate the collapsible section for this statement*/
Eugenia Gabrielova7fdb1072013-05-24 03:32:54 +0000[diff] [blame]142 $('<button/>')
143 .attr("class", "btn")
144 .attr("data-toggle", "collapse")
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]145 .attr("data-target", "#collapse" + i)
Eugenia Gabrielova7fdb1072013-05-24 03:32:54 +0000[diff] [blame]146 .css("margin-bottom", "1em")
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]147 .html('Result Plan #' + resultsCount + '<i id="ibtn' + resultsCount + '" class="icon-plus extarget"></i>')
Eugenia Gabrielova7fdb1072013-05-24 03:32:54 +0000[diff] [blame]148 .appendTo('#output-message');
Madhusudan.C.Sc82c7ba2013-06-02 14:27:00 -0700[diff] [blame]149
Eugenia Gabrielova7fdb1072013-05-24 03:32:54 +0000[diff] [blame]150 $('<div/>')
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]151 .attr("id", "collapse" + i)
Eugenia Gabrielova7fdb1072013-05-24 03:32:54 +0000[diff] [blame]152 .attr("class", "collapse in")
153 .appendTo('#output-message');
Madhusudan.C.Sc82c7ba2013-06-02 14:27:00 -0700[diff] [blame]154
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]155 /* put the rest of the sections in the collapsible section*/
156 for (var k = 0; k < sections.length; k++) {
157 $('#collapse' + i).append(sectionsSeparator + sections[k].toString());
Eugenia Gabrielova7fdb1072013-05-24 03:32:54 +0000[diff] [blame]158 }
Eugenia Gabrielova7fdb1072013-05-24 03:32:54 +0000[diff] [blame]159 }
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]160 $('#output-message').append("<hr/>");
161 resultsCount++;
Eugenia Gabrielovaf885fff2013-05-23 05:09:48 +0000[diff] [blame]162
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]163 /* Placeholder for future on show/hide result plan behavior
164 $('#collapse' + resSet).on('show', function() {
165 }).on('hide', function() {
166 });
167 */
genia.likes.science@gmail.comb0680b32013-05-22 16:21:53 -0700[diff] [blame]168 }
genia.likes.science@gmail.comc69cb702013-05-22 12:50:52 -0700[diff] [blame]169 }
genia.likes.science@gmail.comc69cb702013-05-22 12:50:52 -0700[diff] [blame]170 }
genia.likes.science@gmail.com99f019d2013-05-13 04:14:46 -0700[diff] [blame]171
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]172 /* Handling Pretty JSON-query result */
Xikui Wanga4a40702017-03-27 20:05:38 -0700[diff] [blame]173 var resultFormat = $('#output-format option:checked').text();
174 if ( resultFormat == 'JSON (formatted)') {
Xikui Wang01814762017-03-15 13:52:47 -0700[diff] [blame]175 $('.result-content').each(
176 function(idx) {
177 var results = $(this).text().split('\n');
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]178 $(this).css('padding-left', '20px');
Xikui Wang01814762017-03-15 13:52:47 -0700[diff] [blame]179 $(this).text('');
180 for (var iter1 = 0; iter1 < results.length - 1; iter1++) {
181 if (results[iter1].length < 1) {
182 continue;
183 }
184 var resultJSON = $.parseJSON(results[iter1]);
Xikui Wanga4a40702017-03-27 20:05:38 -0700[diff] [blame]185 $(this).append($('<div/>').attr("id", "json-record"+idx+"-"+iter1));
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]186 $('#json-record'+idx+"-"+iter1).jsonViewer(resultJSON, {collapsed: true, level: 10});
Xikui Wang01814762017-03-15 13:52:47 -0700[diff] [blame]187 }
188 }
189 );
190 }
191
192
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]193 /* Handling Pretty JSON-logical plan */
194 var planFormat = $('#plan-format option:checked').text();
195 $('.query-plan').addClass("outer");
196 $('.query-optimized-plan').addClass("outer");
197 if ( planFormat == 'JSON (formatted)') {
198 $('.query-plan').each(
199 function() {
200 var planSt = $(this).text();
201 $(this).text('');
202 var planJSON = $.parseJSON(planSt);
203 $(this).append($('<div/>').attr("id", "json-queryPlan"));
204 $('#json-queryPlan').jsonViewer(planJSON, {collapsed: false, level: 10});
205 }
206 );
207 $('.query-optimized-plan').each(
208 function() {
209 var opPlanSt = $(this).text();
210 $(this).text('');
211 var opPlanJSON = $.parseJSON(opPlanSt);
212 $(this).append($('<div/>').attr("id", "json-queryOptimizedPlan").attr("class","inner"));
213 $('#json-queryOptimizedPlan').jsonViewer(opPlanJSON, {collapsed: false, level: 10});
214 }
215 );
216 }
217
218
genia.likes.science@gmail.comb0680b32013-05-22 16:21:53 -0700[diff] [blame]219 var contentString = data.toString();
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame]220 if (contentString.indexOf(durPattern) != -1) {
genia.likes.science@gmail.comb0680b32013-05-22 16:21:53 -0700[diff] [blame]221 $('<div/>')
222 .addClass("alert alert-success")
223 .html("Success: Query Complete")
224 .appendTo('#output-message');
225 }
226 });
227 return false;
228 });
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]229});
230</script>
231
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]232 <meta charset=utf-8 />
233 <title>AsterixDB Web Interface</title>
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]234</head>
235
236<body>
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]237<div class="navbar navbar-fixed-top">
238 <div class="navbar-inner">
239 <div class="container">
240 <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
241 <span class="icon-bar"></span>
242 <span class="icon-bar"></span>
243 <span class="icon-bar"></span>
244 </a>
genia.likes.science@gmail.combcd0ea12013-05-13 01:34:31 -0700[diff] [blame]245
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]246 <!-- Temporary logo placeholder -->
247 <a class="brand" href="#"><img src="/webui/static/img/finalasterixlogo.png"></a>
Madhusudan.C.Sc82c7ba2013-06-02 14:27:00 -0700[diff] [blame]248
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]249 <div class="nav-collapse collapse">
250 <ul class="nav">
251 <li><a href="https://asterixdb.apache.org/" target="_blank">
252 Open source<img class="extarget" src="/webui/static/img/targetlink.png"/></a></li>
253 <li><a href="https://issues.apache.org/jira/browse/ASTERIXDB" target="_blank">
254 File issues<img class="extarget" src="/webui/static/img/targetlink.png"/></a></li>
255 <li><a href="https://ci.apache.org/projects/asterixdb/index.html" target="_blank">
256 Documentation<img class="extarget" src="/webui/static/img/targetlink.png"/></a></li>
257 <li><a href="https://asterixdb.apache.org/community.html" target="_blank">
258 Contact<img class="extarget" src="/webui/static/img/targetlink.png"/></a></li>
259 </ul>
260 </div><!--/.nav-collapse -->
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]261 </div>
262 </div>
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]263</div>
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]264
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]265<div class="content">
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]266 <div class="container">
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]267 <div class="row-fluid">
genia.likes.science@gmail.com024749d2013-05-20 21:33:08 -0700[diff] [blame]268
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]269 <div class="span6">
genia.likes.science@gmail.com83fb0652013-05-20 22:03:49 -0700[diff] [blame]270
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]271 <form id="queryform" class="form-horizontal" method="post">
272 <div style="margin-bottom: 1em;">
273 <label class="query">Query</label>
274 <textarea rows="10" id="qry" name="query" class="query" value="%s"
275 placeholder="Type your query ..."></textarea>
276 </div>
277
278 <div class="btn-group">
279 <button id="checkboxes-on" class="btn">
280 <i id="opts" class="icon-ok" style="display:none;"></i>Select Options
281 </button>
282 <button id="clear-query-button" class="btn">Clear Query</button>
283 <!-- <button id="checkboxes-off" class="btn">Clear All Options</button> -->
284 <button type="submit" id="run-btn" class="btn btn-custom-darken">Run</button>
285 </div>
286
287 <div>
288 <label id="query-language" class="optlabel"> Query Language:<br/>
289 <select name="query-language" class="btn btn-width">
290 <option selected value="SQLPP">SQL++</option>
291 <option value="AQL">AQL</option>
292 </select>
293 </label>
294 <label id="output-format" class="optlabel"> Output Format:<br/>
295 <select name="output-format" class="btn btn-width">
296 <option selected value="CLEAN_JSON">JSON</option>
297 <option value="CLEAN_JSON">JSON (formatted)</option>
298 <option value="ADM">ADM</option>
299 <option value="CSV">CSV (no header)</option>
300 <option value="CSV-Header">CSV (with header)</option>
301 <option value="LOSSLESS_JSON">JSON (lossless)</option>
302 </select>
303 </label>
304 <label id="plan-format" class="optlabel"> Plan Format:<br/>
305 <select name="plan-format" class="btn btn-width">
306 <option selected value="JSON">JSON</option>
307 <option value="CLEAN_JSON">JSON (formatted)</option>
308 <option value="STRING">String</option>
309 </select>
310 </label>
311 <label class="optlabel"><input type="checkbox" name="wrapper-array" value="true"/> Wrap results
312 in outer array</label>
313 <label class="checkbox optlabel"><input type="checkbox" name="print-expr-tree" value="true"/>
314 Print parsed expressions</label>
315 <label class="checkbox optlabel"><input type="checkbox" name="print-rewritten-expr-tree"
316 value="true"/> Print rewritten expressions</label>
317 <div><label class="checkbox optlabel"><input type="checkbox"
318 name="print-logical-plan"
319 value="true"/> Print logical
320 plan</label></div>
321
322 <div><label class="checkbox optlabel"><input type="checkbox"
323 name="print-optimized-logical-plan"
324 value="true"/> Print optimized
325 logical plan</label></div>
326
327 <label class="checkbox optlabel"><input type="checkbox" name="print-job" value="true"/> Print
328 Hyracks job</label>
329 <label class="optlabel"><input type="checkbox" name="execute-query" value="true" checked/>
330 Execute query</label>
331 </div>
332 </form>
genia.likes.science@gmail.com83fb0652013-05-20 22:03:49 -0700[diff] [blame]333 </div>
Chris Hilleryf4a1c3c2015-08-20 18:33:06 -0700[diff] [blame]334
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]335 <div class="span6">
336 <div class="output">
337 <label id="output-heading" class="heading">Output</label>
338 <div id="output-message" class="message">
339 </div>
340 </div>
Chris Hillery833774e2015-03-18 23:25:04 -0700[diff] [blame]341 </div>
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]342 </div>
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]343 </div>
genia.likes.science@gmail.combcd0ea12013-05-13 01:34:31 -0700[diff] [blame]344</div>
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]345<div class="footer">
346 <section class="line">
347 <hr>
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]348 </section>
Shivaa22ca7b2017-10-26 20:35:59 -0700[diff] [blame^]349 <section class="content">
350 <section class="left">
351 </section>
352 <section class="right">
353 </section>
354 </section>
355</div>
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]356</body>
357</html>