HyriseSQLParser/frontend-hyrise/index.html

182 lines
6.4 KiB
HTML
Raw Normal View History

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="hyrise-sql-connector.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="row">
<div class="col-lg-6">
<!-- Config -->
<div class="row">
<div class="form-group col-sm-8">
<input type="text" class="form-control" id="hostInput" placeholder="Hyrise Host" value="localhost">
</div>
<div class="form-group col-sm-4">
<input type="text" class="form-control" id="portInput" placeholder="Hyrise Port" value="5000">
</div>
</div>
2014-11-05 16:09:56 +01:00
<!-- Sample Queries -->
<div class="row" style="margin-bottom: 10px;">
2014-11-13 02:40:43 +01:00
<div class="col-sm-8" id="sampleQueries"></div>
<div class="col-sm-4" id="buggyQueries"></div>
2014-11-05 16:09:56 +01:00
</div>
<!-- Input -->
<div class="row">
<div class="col-sm-12">
<textarea id="queryInput" class="form-control" style="height: 300px; resize: none;">SELECT * FROM students;</textarea>
</div>
</div>
<!-- Submit -->
<div class="row" style="margin: 10px 0px;">
<div class="col-sm-12">
2014-11-13 02:40:43 +01:00
<button type="button" class="btn btn-primary" id="submitBtn">Submit Query (Shift + Enter)</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<!-- View: Performance Data -->
2014-11-10 23:32:27 +01:00
<h3>Performance Data</h3>
<table id="performanceDataTable" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Duration</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- View: Result Table -->
2014-11-12 00:11:19 +01:00
<h3>Results (first 100 rows)</h3>
<div id="msgContainer" class="alert alert-success" role="alert">
<div id="resultInfo">Ready</div>
</div>
<table id="resultTable" class="table table-bordered table-striped table-hover"></table>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
2014-11-05 16:09:56 +01:00
function addSampleQuery(name, query) {
2014-11-13 02:40:43 +01:00
var btn = $('<button type="button" class="btn btn-success">' + name + '</button>');
2014-11-05 16:09:56 +01:00
btn.click(function() { $('#queryInput').val(query); });
$('#sampleQueries').append(btn);
}
2014-11-13 02:40:43 +01:00
function addBuggyQuery(name, query) {
var btn = $('<button type="button" class="btn btn-danger">' + name + '</button>');
btn.click(function() { $('#queryInput').val(query); });
$('#buggyQueries').append(btn);
}
2014-11-05 16:09:56 +01:00
function createElement(tag, value) {
return $('<' + tag + '>' + value + '</' + tag + '>');
};
function updateResultTable(result) {
// Present result json in result-view
var table = $('#resultTable');
table.html('');
var th = $('<tr>');
$.each(result.header, function(i, val) {
th.append($('<th>' + val + '</th>'));
});
table.append(th);
// Limit the rows to be displayed to 100
for (var i = 0; i < 100 && i < result.real_size; ++i) {
var row = result.rows[i];
var tr = $('<tr>');
$.each(row, function(j, val) {
tr.append($('<td>' + val + '</td>'));
});
table.append(tr);
}
};
function updatePerformanceData(result) {
var tbody = $('#performanceDataTable tbody');
tbody.html('');
$.each(result.performanceData, function(i, data) {
var tr = $('<tr>');
tr.append(createElement('td', data.id))
tr.append(createElement('td', data.name))
tr.append(createElement('td', data.duration))
tr.append(createElement('td', data.startTime))
tr.append(createElement('td', data.endTime))
tbody.append(tr);
});
};
$('#submitBtn').click(function() {
2014-11-12 00:11:19 +01:00
$('#resultTable').html('');
$('#resultInfo').html('waiting for result...');
$('#msgContainer').attr('class', 'alert alert-warning');
var host = $('#hostInput').val();
var port = $('#portInput').val();
var query = $('#queryInput').val();
var hyrise = new HyriseSqlConnector(host, port);
2014-11-12 00:11:19 +01:00
hyrise.executeQuery(query, function(result) {
2014-11-12 00:11:19 +01:00
// On Success
$('#msgContainer').attr('class', 'alert alert-success');
$('#resultInfo').html('Result contains ' + result.real_size + ' rows');
console.log("Query result: ", result);
updateResultTable(result);
updatePerformanceData(result);
2014-11-12 00:11:19 +01:00
2014-11-05 16:09:56 +01:00
}, function(xhr, status, error) {
// On Error
2014-11-12 00:11:19 +01:00
console.log(arguments);
var msg = 'Error when fetching result. Possibly no connection to Hyrise.';
if (xhr.responseJSON) msg = xhr.responseJSON.error[0];
$('#resultInfo').html(msg);
$('#msgContainer').attr('class', 'alert alert-danger');
2014-11-05 16:09:56 +01:00
$('#performanceDataTable tbody').html('');
});
2014-11-05 16:09:56 +01:00
});
2014-11-10 23:32:27 +01:00
$('#queryInput').keypress(function(evt) {
if (evt.keyCode == 13 && evt.shiftKey) {
$('#submitBtn').click();
return false;
}
return true;
});
2014-11-13 02:40:43 +01:00
addSampleQuery('Load Tables', '\
CREATE TABLE students FROM TBL FILE \'test/students.tbl\';\n\
CREATE TABLE test FROM TBL FILE \'test/lin_xxs.tbl\';');
addSampleQuery('SELECT 1', 'SELECT * FROM students;')
addSampleQuery('SELECT 2', 'SELECT name, city, grade FROM (SELECT * FROM students WHERE city = \'Potsdam\') t1 WHERE grade <= 1.5 OR grade >= 3.5;');
addSampleQuery('GROUP', 'SELECT city, AVG(grade) AS average|, MIN(grade) AS best, MAX(grade) AS worst FROM students GROUP BY city;');
addSampleQuery('UNION', 'SELECT * FROM students WHERE grade = 1.3 UNION SELECT * FROM students WHERE grade = 3.7;');
2014-11-05 16:09:56 +01:00
addSampleQuery('JOIN', 'SELECT * FROM students t1 JOIN students t2 ON t1.student_number = t2.student_number');
2014-11-13 02:40:43 +01:00
addBuggyQuery('GROUP', 'SELECT AVG(grade) FROM (SELECT city, AVG(grade) FROM students GROUP BY city) t1');
addBuggyQuery('UNION', 'SELECT name FROM students WHERE grade > 2.0 UNION SELECT name FROM students');
2014-11-12 00:11:19 +01:00
});
</script>
</body>
</html>