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 -->
2014-11-10 23:32:27 +01:00
< h3 > Performance Data< / h3 >
2014-11-05 12:20:29 +01:00
< 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 -->
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 >
2014-11-05 12:20:29 +01:00
< 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() {
2014-11-12 00:11:19 +01:00
$('#resultTable').html('');
$('#resultInfo').html('waiting for result...');
$('#msgContainer').attr('class', 'alert alert-warning');
2014-11-05 12:01:01 +01:00
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
2014-11-05 12:01:01 +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');
2014-11-05 12:01:01 +01:00
console.log("Query result: ", result);
2014-11-05 12:20:29 +01:00
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 12:01:01 +01:00
});
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-12 00:11:19 +01:00
addSampleQuery('CREATE & SELECT', 'CREATE TABLE students FROM TBL FILE \'test/students.tbl\';\nSELECT name, city, grade FROM students WHERE grade < = 2.0;')
addSampleQuery('SELECT', 'SELECT name, city, grade FROM (SELECT * FROM students WHERE city = \'Potsdam\') t1 WHERE grade < = 1.5 OR grade >= 3.5;');
addSampleQuery('GROUP', 'SELECT AVG(grade) FROM students GROUP BY city');
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-12 00:11:19 +01:00
addSampleQuery('GROUP ERROR', 'SELECT AVG(grade) FROM (SELECT city, AVG(grade) FROM students GROUP BY city) t1');
2014-11-05 12:01:01 +01:00
});
< / script >
< / body >
< / html >
