blob: c9c3b55bb2c84eddd2483c548322b36eab0d3e30 [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="ASTERIX WEB PAGE" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Bitter|PT+Sans+Caption|Open+Sans' rel='stylesheet' type='text/css'>
<script src="/webui/static/js/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
<link href="/webui/static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="/webui/static/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
<script src="/webui/static/js/bootstrap.min.js"></script>
<link href="/webui/static/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$('#checkboxes-on').click(function() {
$('#queryform :input').prop('checked', true);
return false;
});
$('#checkboxes-off').click(function() {
$('form#queryform :input').removeAttr('checked');
return false;
});
$('#clear-query-button').click(function() {
$("#qry").val('');
return false;
});
$("form#queryform").submit(function() {
$('#output-message').html("");
$.post("/", $("form#queryform").serialize(), function(data) {
var resSet = 0;
var resultCount = data.match(/<h4>Results:<\/h4>/g);
if (resultCount.length <= 1) {
$('#output-message').html(data);
} else {
var results = data.split('<h4>');
var components = results.slice(1, results.length);
var sections = components.length / resultCount.length;
$('<div/>')
.attr("class", "accordion")
.attr("id", "output-organization")
.appendTo('#output-message');
for (resSet = 0; resSet < resultCount.length; resSet++) {
$('<div/>')
.attr("class", "accordion-group")
.attr("id", "agroup" + resSet)
.appendTo("#output-organization");
var resNum = resSet + 1;
$('<div/>')
.attr("class", "accordion-heading")
.html('<a class="accordion-toggle" data-toggle="collapse" data-parent="output-organization" href="#collapse' + resSet + '">Result #' + resNum + '</a>')
.appendTo("#agroup" + resSet);
$('<div/>')
.attr("class", "accordion-body collapse in")
.attr("id", "collapse" + resSet)
.html('<div class="accordion-inner">')
.appendTo("#agroup" + resSet);
for (var c = 0; c < sections; c++) {
var pos = resSet*sections + c;
$('#collapse' + resSet).append('<h4>' + components[pos]);
}
$('#collapse'+resSet).append('</div>');
$('#collapse'+resSet).collapse('toggle');
}
}
var contentString = data.toString();
if (contentString.indexOf("<PRE>Duration") !== -1) {
$('<div/>')
.addClass("alert alert-success")
.html("Success: Query Complete")
.appendTo('#output-message');
}
});
return false;
});
});
</script>
<meta charset=utf-8 />
<title>AsterixDB Web Interface</title>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Temporary logo placeholder -->
<!-- <a class="brand" href="#"><img src="/webui/static/img/finalasterixlogo.png"></a> -->
<a class="brand" href="#"><img src="http://db.tt/J1MTCdKs"></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="http://code.google.com/p/asterixdb/source/browse/" target="_blank">Open source<i class="icon-external-link"></i></a></li>
<li><a href="http://code.google.com/p/asterixdb/issues/list" target="_blank">File issues<i class="icon-external-link"></i></a></li>
<li><a href="https://groups.google.com/forum/?fromgroups#!forum/asterixdb-userst" target="_blank">Contact<i class="icon-external-link"></i></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="content">
<div class="container">
<div class="row-fluid">
<div class="span6">
<form id="queryform" class="form-horizontal" method="post">
<div style="margin-bottom: 1em;">
<label class="query">Query</label>
<textarea rows="10" id="qry" name="query" class="query" value="%s" placeholder="Type your AQL query ..."></textarea>
<button id="clear-query-button" style="float:right;" class="btn">Clear Query</button>
</div>
<div class="btn-group">
<button id="checkboxes-on" class="btn">Select All Options</button>
<button id="checkboxes-off" class="btn">Clear All Options</button>
</div>
<div>
<label class="checkbox"><input type="checkbox" class="btn" checked="checked" name="print-expr-tree" value="true" /> Print parsed expressions</label>
<label class="checkbox"><input type="checkbox" checked="checked" name="print-rewritten-expr-tree" value="true" /> Print rewritten expressions</label>
<label class="checkbox"><input type="checkbox" checked="checked" name="print-logical-plan" value="true" /> Print logical plan</label>
<label class="checkbox"><input type="checkbox" checked="checked" name="print-optimized-logical-plan" value="true" /> Print optimized logical plan</label>
<label class="checkbox"><input type="checkbox"
checked="checked" name="print-job" value="true" /> Print Hyracks job</label>
</div>
<button type="submit" id="run-btn" class="btn btn-custom-darken">Run</button>
</form>
</div>
<div class="span6">
<div class="output">
<label class="heading">Output</label>
<div id="output-message" class="message">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<section class="line"><hr></section>
<section class="content">
<section class="left">
</section>
<section class="right">
&copy; Copyright 2013 University of California, Irvine
</section>
</section>
</div>
</body>
</html>