DBIS
/
HyriseSQLParser
6
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

minor changes to frontend

This commit is contained in:
Pedro 2014-12-15 13:19:12 +01:00
parent 7d2cc528b3
commit bda8db57e4
4 changed files with 143 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend-hyrise/hyrise-sql-connector.js
View File

@ -1,23 +1,11 @@
var HyriseSQLConnector = function(endpointUrl) {
var HyriseSqlConnector = function(host, port) { this._endpointUrl = endpointUrl;
this.setConnectionDetails(host, port);
} }
HyriseSQLConnector.prototype.executeSQLQuery = function(query, callback, error_callback) {
HyriseSqlConnector.prototype.setConnectionDetails = function(host, port) { var url = encodeURI(this._endpointUrl);
this._host = host;
this._port = port;
return this;
};
HyriseSqlConnector.prototype.executeQuery = function(query, callback, error_callback) {
var endpoint = 'http://' + this._host + ':' + this._port + '/query';
var url = encodeURI(endpoint);
jQuery.ajax({ jQuery.ajax({
type: "POST", type: "POST",

143
frontend-hyrise/index.html
View File

@ -4,21 +4,18 @@
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <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> <script type="text/javascript" src="hyrise-sql-connector.js"></script>
<script type="text/javascript" src="ui.js"></script>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<title>Hyrise SQL Frontend</title> <title>Hyrise SQL Frontend</title>
</head> </head>
<body> <body>
<div class="content"> <div class="content">
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<!-- Config --> <!-- Config -->
<div class="row"> <div class="row">
<div class="form-group col-sm-8"> <div class="form-group col-sm-12">
<input type="text" class="form-control" id="hostInput" placeholder="Hyrise Host" value="localhost"> <input type="text" class="form-control" id="endpointInput" placeholder="Hyrise Host" value="http://localhost:5000/query" />
</div>
<div class="form-group col-sm-4">
<input type="text" class="form-control" id="portInput" placeholder="Hyrise Port" value="5000">
</div> </div>
</div> </div>
@ -66,143 +63,11 @@
<!-- View: Result Table --> <!-- View: Result Table -->
<h3>Results (first 100 rows)</h3> <h3>Results (first 100 rows)</h3>
<div id="msgContainer" class="alert alert-success" role="alert"> <div id="msgContainer" class="alert alert-success" role="alert">
<div id="resultInfo">Ready</div> <div id="resultInfo">Frontend Ready</div>
</div> </div>
<table id="resultTable" class="table table-bordered table-striped table-hover"></table> <table id="resultTable" class="table table-bordered table-striped table-hover"></table>
</div> </div>
</div> </div>
</div> </div>
<script type="text/javascript">
$(function() {
function addSampleQuery(name, query) {
var btn = $('<button type="button" class="btn btn-sm btn-success">' + name + '</button>');
btn.click(function(evt) {
$('#queryInput').val(query);
if (!evt.shiftKey) {
$('#submitBtn').click();
}
});
$('#sampleQueries').append(btn);
}
function addBuggyQuery(name, query) {
var btn = $('<button type="button" class="btn btn-sm btn-danger">' + name + '</button>');
btn.click(function(evt) {
$('#queryInput').val(query);
if (!evt.shiftKey) {
$('#submitBtn').click();
}
});
$('#buggyQueries').append(btn);
}
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() {
$('#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);
hyrise.executeQuery(query, function(result) {
// 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);
}, function(xhr, status, error) {
// On Error
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');
$('#performanceDataTable tbody').html('');
});
});
$('#queryInput').keypress(function(evt) {
if (evt.keyCode == 13 && evt.shiftKey) {
$('#submitBtn').click();
return false;
}
return true;
});
//////////////////////////////////////////////////
// Load sample queries
$.get('sample-queries.sql', function(data) {
var lines = data.split('\n');
var name, query = "", isBuggy = false;
$.each(lines, function(i, line) {
if (line[0] == '#') {
// Append last query
if (name && !isBuggy) addSampleQuery(name, query);
if (name && isBuggy) addBuggyQuery(name, query);
// New query
isBuggy = (line[1] == '!');
name = line.substring((isBuggy) ? 3 : 2);
query = "";
} else {
query += line + '\n';
}
});
if (name && !isBuggy) addSampleQuery(name, query);
if (name && isBuggy) addBuggyQuery(name, query);
});
//////////////////////////////////////////////////
});
</script>
</body> </body>
</html> </html>

10
frontend-hyrise/sample-queries.sql
View File

@ -18,7 +18,7 @@ INSERT INTO students VALUES ('Max Mustermann', 10101, 'Musterhausen', 1.7);
# CREATE # CREATE
CREATE TABLE IF NOT EXISTS test (v1 INTEGER, v2 INTEGER, v3 INTEGER); CREATE TABLE IF NOT EXISTS test (v1 INTEGER, v2 INTEGER, v3 INTEGER);
# INSERT/SELECT # INSERT/SELECT
INSERT INTO test VALUES (1, 23, 45);| INSERT INTO test VALUES (1, 23, 45);
INSERT INTO test VALUES (1, 23, 45); INSERT INTO test VALUES (1, 23, 45);
INSERT INTO test VALUES (1, 23, 45); INSERT INTO test VALUES (1, 23, 45);
SELECT * FROM test; SELECT * FROM test;
@ -29,10 +29,4 @@ SELECT * FROM test;
#! GROUP #! GROUP
SELECT AVG(grade) FROM (SELECT city, AVG(grade) FROM students GROUP BY city) t1 SELECT AVG(grade) FROM (SELECT city, AVG(grade) FROM students GROUP BY city) t1
#! UNION (kills hyrise) #! UNION (kills hyrise)
SELECT name FROM students WHERE grade > 2.0 UNION SELECT name FROM students SELECT name FROM students WHERE grade > 2.0 UNION SELECT name FROM students
#! UPDATE
UPDATE companies SET company_id = 44 WHERE company_name = 'Microsoft';
#! SELECT
SELECT * FROM companies;
#! SELECT Microsoft
SELECT * FROM companies WHERE company_name = 'Microsoft';

133
frontend-hyrise/ui.js Normal file
View File

@ -0,0 +1,133 @@
/**
* Bootstrap
*/
$(function() {
loadSampleQueries('sample-queries.sql');
$('#submitBtn').click(function() {
$('#resultTable').html('');
$('#resultInfo').html('waiting for result...');
$('#msgContainer').attr('class', 'alert alert-warning');
var endpointUrl = $('#endpointInput').val();
var query = $('#queryInput').val();
var hyrise = new HyriseSQLConnector(endpointUrl);
hyrise.executeSQLQuery(query, function(result) {
// 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);
}, function(xhr, status, error) {
// On Error
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');
$('#performanceDataTable tbody').html('');
});
});
$('#queryInput').keypress(function(evt) {
if (evt.keyCode == 13 && evt.shiftKey) {
$('#submitBtn').click();
return false;
}
return true;
});
});
function loadSampleQueries(url) {
$.get(url, function(data) {
var lines = data.split('\n');
var name, query = "", isBuggy = false;
$.each(lines, function(i, line) {
if (line[0] == '#') {
// Append last query
if (name && !isBuggy) addSampleQuery(name, query);
if (name && isBuggy) addBuggyQuery(name, query);
// New query
isBuggy = (line[1] == '!');
name = line.substring((isBuggy) ? 3 : 2);
query = "";
} else {
query += line + '\n';
}
});
if (name && !isBuggy) addSampleQuery(name, query);
if (name && isBuggy) addBuggyQuery(name, query);
});
}
function addSampleQuery(name, query) {
var btn = $('<button type="button" class="btn btn-sm btn-success">' + name + '</button>');
btn.click(function(evt) {
$('#queryInput').val(query);
if (!evt.shiftKey) {
$('#submitBtn').click();
}
});
$('#sampleQueries').append(btn);
}
function addBuggyQuery(name, query) {
var btn = $('<button type="button" class="btn btn-sm btn-danger">' + name + '</button>');
btn.click(function(evt) {
$('#queryInput').val(query);
if (!evt.shiftKey) {
$('#submitBtn').click();
}
});
$('#buggyQueries').append(btn);
}
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);
});
};