2014-11-05 12:01:01 +01:00
|
|
|
<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;">
|
|
|
|
|
<div class="col-sm-12" id="sampleQueries"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2014-11-05 12:01:01 +01:00
|
|
|
<!-- 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 -->
|
2014-11-05 12:20:29 +01:00
|
|
|
<div class="row" style="margin: 10px 0px;">
|
2014-11-05 12:01:01 +01:00
|
|
|
<div class="col-sm-12">
|
|
|
|
|
<button type="button" class="btn btn-primary" id="submitBtn">Submit Query</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2014-11-05 12:20:29 +01:00
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-sm-12">
|
|
|
|
|
<!-- View: Performance Data -->
|
|
|
|
|
<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>
|
|
|
|
|
|
2014-11-05 12:01:01 +01:00
|
|
|
</div>
|
|
|
|
|
<div class="col-lg-6">
|
2014-11-05 12:20:29 +01:00
|
|
|
<!-- View: Result Table -->
|
|
|
|
|
<table id="resultTable" class="table table-bordered table-striped table-hover"></table>
|
2014-11-05 12:01:01 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
$(function() {
|
2014-11-05 16:09:56 +01:00
|
|
|
function addSampleQuery(name, query) {
|
|
|
|
|
var btn = $('<button type="button" class="btn btn-default">' + name + '</button>');
|
|
|
|
|
btn.click(function() { $('#queryInput').val(query); });
|
|
|
|
|
$('#sampleQueries').append(btn);
|
|
|
|
|
}
|
|
|
|
|
|
2014-11-05 12:20:29 +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);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
2014-11-05 12:01:01 +01:00
|
|
|
$('#submitBtn').click(function() {
|
|
|
|
|
var host = $('#hostInput').val();
|
|
|
|
|
var port = $('#portInput').val();
|
|
|
|
|
var query = $('#queryInput').val();
|
|
|
|
|
var hyrise = new HyriseSqlConnector(host, port);
|
|
|
|
|
hyrise.executeQuery(query, function(result) {
|
|
|
|
|
console.log("Query result: ", result);
|
2014-11-05 12:20:29 +01:00
|
|
|
updateResultTable(result);
|
|
|
|
|
updatePerformanceData(result);
|
2014-11-05 16:09:56 +01:00
|
|
|
}, function(xhr, status, error) {
|
|
|
|
|
console.log(arguments);
|
|
|
|
|
// On Error
|
|
|
|
|
$('#resultTable').html('<td>Error when executing query (' + status + ', ' + xhr.status + ' ' + error + ')</td>');
|
|
|
|
|
$('#performanceDataTable tbody').html('');
|
|
|
|
|
|
2014-11-05 12:01:01 +01:00
|
|
|
});
|
2014-11-05 16:09:56 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
addSampleQuery('SELECT 1', 'SELECT name, city, grade FROM students WHERE grade <= 2.0;')
|
|
|
|
|
addSampleQuery('SELECT 2', 'SELECT name, city, grade FROM (SELECT * FROM students WHERE city = \'Potsdam\') t1 WHERE grade <= 1.5 OR grade >= 3.5;');
|
|
|
|
|
addSampleQuery('COMMENT & LIKE', '-- test\nSELECT * FROM students WHERE city LIKE \'B.*\'\n-- comment');
|
|
|
|
|
addSampleQuery('JOIN', 'SELECT * FROM students t1 JOIN students t2 ON t1.student_number = t2.student_number');
|
2014-11-05 12:01:01 +01:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
