Gitiles
Code Review Sign In
asterix-gerrit.ics.uci.edu / asterixdb / a7627425c2cc26aab567c06260cce79df0ab1f0a / . / asterix-app / src / main / resources / webui / querytemplate.html
blob: 9088251b1e78da6e01254527f5272543fadd8c6a [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>
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>
28
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" />
33
34<script src="/webui/static/js/bootstrap.min.js"></script>
35
36<link href="/webui/static/css/style.css" rel="stylesheet"
37 type="text/css" />
38
39<script type="text/javascript">
40$(document).ready(function() {
41
42 var optionButtonSize = $('#checkboxes-on').width();
43 $('#clear-query-button, #run-btn').width(optionButtonSize);
44
45 $('#checkboxes-on').click(function() {
46 /* Displays a checkmark to indicate selection/clearing */
genia.likes.science@gmail.com016314e2013-05-25 03:19:07 -0700[diff] [blame]47 if ($('#opts').is(":visible")) {
48 $('#opts').hide();
49 $('#queryform :input').prop('checked', false);
50 } else {
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]51 $('#opts').show();
genia.likes.science@gmail.com016314e2013-05-25 03:19:07 -0700[diff] [blame]52 $('#queryform :input').prop('checked', true);
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]53 }
genia.likes.science@gmail.comb0680b32013-05-22 16:21:53 -0700[diff] [blame]54 return false;
genia.likes.science@gmail.com024749d2013-05-20 21:33:08 -0700[diff] [blame]55 });
56
genia.likes.science@gmail.com83fb0652013-05-20 22:03:49 -0700[diff] [blame]57 $('#clear-query-button').click(function() {
58 $("#qry").val('');
59 return false;
60 });
61
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]62 $('form#queryform :input').click(function() {
genia.likes.science@gmail.com016314e2013-05-25 03:19:07 -0700[diff] [blame]63 /* Hides selection check on uncheck, shows when all 5 selected */
64 if ($(this).val()) {
65 if ($(this).is(':checked') && $('input[type=checkbox]').filter(':checked').length == 5) {
66 $('#opts').show();
67 } else {
68 $('#opts').hide();
69 }
70 }
71 });
72
genia.likes.science@gmail.comb0680b32013-05-22 16:21:53 -0700[diff] [blame]73 $("form#queryform").submit(function() {
74 $('#output-message').html("");
75 $.post("/", $("form#queryform").serialize(), function(data) {
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]76 var durPattern = '<PRE>Duration';
Madhusudan.C.Se7bdea62013-06-02 14:34:30 -0700[diff] [blame]77 var errorPattern = /<div class="accordion" id="errorblock">/g;
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]78 var sectionsSeparator = '<h4>';
79 var resultPat = 'Results:</h4>';
80
81 if (errorPattern.test(data)) {
82 $('#output-heading').html('Error');
83 $('#output-heading').addClass('error');
Madhusudan.C.Se7bdea62013-06-02 14:34:30 -0700[diff] [blame]84 } else {
85 $('#output-heading').html('Output');
86 $('#output-heading').removeClass('error');
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]87 }
88 var executedStatements = data.split('<!-- BEGIN -->');
89 var executedStatementsWithResultsCount = 0;
90 for (var i = 0; i < executedStatements.length; i++) {
91 if (executedStatements[i].toString().trim().length > 0) {
92 /* check how many statements have returned data*/
93 executedStatementsWithResultsCount++;
94 }
95 }
Madhusudan.C.Sc82c7ba2013-06-02 14:27:00 -0700[diff] [blame]96
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]97 /* only a single statement returned results and/or duration message*/
98 if (executedStatementsWithResultsCount <= 2) {
99 /* print statement results and duration*/
100 $('#output-message').html(data);
101 } else {
102 var resultsCount = 1;
103 /* need to create collapse button and div per statement*/
104 for (var i = 0; i < executedStatements.length; i++) {
105 /* last statement is always the duration message*/
106 if (i == (executedStatements.length - 1)) {
107 /* print duration message*/
108 $('#output-message').append(executedStatements[i]);
109 break;
110 }
genia.likes.science@gmail.comb0680b32013-05-22 16:21:53 -0700[diff] [blame]111
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]112 if (executedStatements[i].toString().trim().length > 0) {
113 var sections = executedStatements[i].toString().split(sectionsSeparator);
114 /* remove the first section since it is always empty due to splitng on sectionsSeparator */
115 sections.splice(0, 1);
Eugenia Gabrielovac459e2b2013-05-23 02:59:43 +0000[diff] [blame]116
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]117 /* if there is a results section, we need to put it before the collapsible section*/
118 for (var j = 0; j < sections.length; j++) {
119 /* print results section and remove it*/
120 if (sections[j].indexOf(resultPat) >= 0) {
121 var resultsSection = sections.splice(j, 1);
122 $('#output-message').append(sectionsSeparator + resultsSection.toString());
123 }
124 }
125
126 if (sections.length > 0) {
127 /* generate the collapsible section for this statement*/
Eugenia Gabrielova7fdb1072013-05-24 03:32:54 +0000[diff] [blame]128 $('<button/>')
129 .attr("class", "btn")
130 .attr("data-toggle", "collapse")
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]131 .attr("data-target", "#collapse" + i)
Eugenia Gabrielova7fdb1072013-05-24 03:32:54 +0000[diff] [blame]132 .css("margin-bottom", "1em")
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]133 .html('Result Plan #' + resultsCount + '<i id="ibtn' + resultsCount + '" class="icon-plus extarget"></i>')
Eugenia Gabrielova7fdb1072013-05-24 03:32:54 +0000[diff] [blame]134 .appendTo('#output-message');
Madhusudan.C.Sc82c7ba2013-06-02 14:27:00 -0700[diff] [blame]135
Eugenia Gabrielova7fdb1072013-05-24 03:32:54 +0000[diff] [blame]136 $('<div/>')
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]137 .attr("id", "collapse" + i)
Eugenia Gabrielova7fdb1072013-05-24 03:32:54 +0000[diff] [blame]138 .attr("class", "collapse in")
139 .appendTo('#output-message');
Madhusudan.C.Sc82c7ba2013-06-02 14:27:00 -0700[diff] [blame]140
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]141 /* put the rest of the sections in the collapsible section*/
142 for (var k = 0; k < sections.length; k++) {
143 $('#collapse' + i).append(sectionsSeparator + sections[k].toString());
Eugenia Gabrielova7fdb1072013-05-24 03:32:54 +0000[diff] [blame]144 }
Eugenia Gabrielova7fdb1072013-05-24 03:32:54 +0000[diff] [blame]145 }
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]146 $('#output-message').append("<hr/>");
147 resultsCount++;
Eugenia Gabrielovaf885fff2013-05-23 05:09:48 +0000[diff] [blame]148
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]149 /* Placeholder for future on show/hide result plan behavior
150 $('#collapse' + resSet).on('show', function() {
151 }).on('hide', function() {
152 });
153 */
genia.likes.science@gmail.comb0680b32013-05-22 16:21:53 -0700[diff] [blame]154 }
genia.likes.science@gmail.comc69cb702013-05-22 12:50:52 -0700[diff] [blame]155 }
genia.likes.science@gmail.comc69cb702013-05-22 12:50:52 -0700[diff] [blame]156 }
genia.likes.science@gmail.com99f019d2013-05-13 04:14:46 -0700[diff] [blame]157
genia.likes.science@gmail.comb0680b32013-05-22 16:21:53 -0700[diff] [blame]158 var contentString = data.toString();
Murtadha Hubaila7627422015-09-17 01:34:10 -0700[diff] [blame^]159 if (contentString.indexOf(durPattern) != -1) {
genia.likes.science@gmail.comb0680b32013-05-22 16:21:53 -0700[diff] [blame]160 $('<div/>')
161 .addClass("alert alert-success")
162 .html("Success: Query Complete")
163 .appendTo('#output-message');
164 }
165 });
166 return false;
167 });
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]168});
169</script>
170
171<meta charset=utf-8 />
genia.likes.science@gmail.com12946c42013-05-12 12:12:15 -0700[diff] [blame]172<title>AsterixDB Web Interface</title>
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]173</head>
174
175<body>
genia.likes.science@gmail.combcd0ea12013-05-13 01:34:31 -0700[diff] [blame]176 <div class="navbar navbar-fixed-top">
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]177 <div class="navbar-inner">
178 <div class="container">
179 <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
180 <span class="icon-bar"></span>
181 <span class="icon-bar"></span>
182 <span class="icon-bar"></span>
183 </a>
genia.likes.science@gmail.combcd0ea12013-05-13 01:34:31 -0700[diff] [blame]184
185 <!-- Temporary logo placeholder -->
genia.likes.science@gmail.com766d9872013-05-24 12:57:48 -0700[diff] [blame]186 <a class="brand" href="#"><img src="/webui/static/img/finalasterixlogo.png"></a>
Madhusudan.C.Sc82c7ba2013-06-02 14:27:00 -0700[diff] [blame]187
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]188 <div class="nav-collapse collapse">
189 <ul class="nav">
genia.likes.science@gmail.com5db8ef22013-05-24 14:05:55 -0700[diff] [blame]190 <li><a href="http://code.google.com/p/asterixdb/" target="_blank">
191 Open source<img class="extarget" src="/webui/static/img/targetlink.png"/></a></li>
192 <li><a href="http://code.google.com/p/asterixdb/issues/list" target="_blank">
193 File issues<img class="extarget" src="/webui/static/img/targetlink.png"/></a></li>
194 <li><a href="https://groups.google.com/forum/?fromgroups#!forum/asterixdb-users" target="_blank">
195 Contact<img class="extarget" src="/webui/static/img/targetlink.png"/></a></li>
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]196 </ul>
197 </div><!--/.nav-collapse -->
198 </div>
199 </div>
200 </div>
201
202 <div class="content">
203 <div class="container">
204 <div class="row-fluid">
genia.likes.science@gmail.com024749d2013-05-20 21:33:08 -0700[diff] [blame]205
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]206 <div class="span6">
genia.likes.science@gmail.com83fb0652013-05-20 22:03:49 -0700[diff] [blame]207
208 <form id="queryform" class="form-horizontal" method="post">
209 <div style="margin-bottom: 1em;">
210 <label class="query">Query</label>
211 <textarea rows="10" id="qry" name="query" class="query" value="%s" placeholder="Type your AQL query ..."></textarea>
genia.likes.science@gmail.com83fb0652013-05-20 22:03:49 -0700[diff] [blame]212 </div>
213
Chris Hillery833774e2015-03-18 23:25:04 -0700[diff] [blame]214 <div class="btn-group">
215 <button id="checkboxes-on" class="btn">
216 <i id="opts" class="icon-ok" style="display:none;"></i>Select Options</button>
217 <button id="clear-query-button" class="btn">Clear Query</button>
218 <!-- <button id="checkboxes-off" class="btn">Clear All Options</button> -->
219 <button type="submit" id="run-btn" class="btn btn-custom-darken">Run</button>
220 </div>
genia.likes.science@gmail.com024749d2013-05-20 21:33:08 -0700[diff] [blame]221
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]222 <div>
Chris Hillery833774e2015-03-18 23:25:04 -0700[diff] [blame]223 <label class="checkbox optlabel"> Output Format:<br/>
224 <select name="output-format" class="btn">
Eldon Carman735bc4e2015-06-18 19:14:07 -0700[diff] [blame]225 <option selected value="ADM">ADM</option>
Chris Hillery833774e2015-03-18 23:25:04 -0700[diff] [blame]226 <option value="CSV">CSV (no header)</option>
227 <option value="CSV-Header">CSV (with header)</option>
Eldon Carman735bc4e2015-06-18 19:14:07 -0700[diff] [blame]228 <option value="JSON">JSON</option>
Chris Hillery833774e2015-03-18 23:25:04 -0700[diff] [blame]229 </select>
230 </label>
genia.likes.science@gmail.com2076bee2013-06-02 14:21:09 -0700[diff] [blame]231 <label class="checkbox optlabel"><input type="checkbox" name="print-expr-tree" value="true" /> Print parsed expressions</label>
232 <label class="checkbox optlabel"><input type="checkbox" name="print-rewritten-expr-tree" value="true" /> Print rewritten expressions</label>
233 <label class="checkbox optlabel"><input type="checkbox" name="print-logical-plan" value="true" /> Print logical plan</label>
234 <label class="checkbox optlabel"><input type="checkbox" name="print-optimized-logical-plan" value="true" /> Print optimized logical plan</label>
235 <label class="checkbox optlabel"><input type="checkbox" name="print-job" value="true" /> Print Hyracks job</label>
Till Westmann16217662013-07-09 15:37:42 -0700[diff] [blame]236 <label class="checkbox optlabel"><input type="checkbox" name="execute-query" value="true" checked/> Execute query</label>
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]237 </div>
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]238 </form>
genia.likes.science@gmail.com024749d2013-05-20 21:33:08 -0700[diff] [blame]239 </div>
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]240
genia.likes.science@gmail.com024749d2013-05-20 21:33:08 -0700[diff] [blame]241 <div class="span6">
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]242 <div class="output">
Madhusudan.C.Se7bdea62013-06-02 14:34:30 -0700[diff] [blame]243 <label id="output-heading" class="heading">Output</label>
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]244 <div id="output-message" class="message">
245 </div>
246 </div>
247 </div>
genia.likes.science@gmail.com024749d2013-05-20 21:33:08 -0700[diff] [blame]248
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]249 </div>
250 </div>
genia.likes.science@gmail.combcd0ea12013-05-13 01:34:31 -0700[diff] [blame]251</div>
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]252 <div class="footer">
253 <section class="line"><hr></section>
254 <section class="content">
255 <section class="left">
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]256 </section>
257 <section class="right">
madhusudancs@gmail.com99e82c62013-03-31 00:26:34 +0000[diff] [blame]258 </section>
259 </section>
260 </div>
261</body>
262</html>
263