diff --git a/frontend-hyrise/hyrise-sql-connector.js b/frontend-hyrise/hyrise-sql-connector.js index 2e0781e..87478b4 100644 --- a/frontend-hyrise/hyrise-sql-connector.js +++ b/frontend-hyrise/hyrise-sql-connector.js @@ -1,23 +1,11 @@ - -var HyriseSqlConnector = function(host, port) { - - this.setConnectionDetails(host, port); - +var HyriseSQLConnector = function(endpointUrl) { + this._endpointUrl = endpointUrl; } - -HyriseSqlConnector.prototype.setConnectionDetails = function(host, port) { - 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); +HyriseSQLConnector.prototype.executeSQLQuery = function(query, callback, error_callback) { + var url = encodeURI(this._endpointUrl); jQuery.ajax({ type: "POST", diff --git a/frontend-hyrise/index.html b/frontend-hyrise/index.html index ee040f4..2289174 100644 --- a/frontend-hyrise/index.html +++ b/frontend-hyrise/index.html @@ -4,21 +4,18 @@ + Hyrise SQL Frontend -
-
- -
-
- +
+
@@ -66,143 +63,11 @@

Results (first 100 rows)

- - \ No newline at end of file diff --git a/frontend-hyrise/sample-queries.sql b/frontend-hyrise/sample-queries.sql index cbbcff2..2694181 100644 --- a/frontend-hyrise/sample-queries.sql +++ b/frontend-hyrise/sample-queries.sql @@ -18,7 +18,7 @@ INSERT INTO students VALUES ('Max Mustermann', 10101, 'Musterhausen', 1.7); # CREATE CREATE TABLE IF NOT EXISTS test (v1 INTEGER, v2 INTEGER, v3 INTEGER); # 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); SELECT * FROM test; @@ -29,10 +29,4 @@ SELECT * FROM test; #! GROUP SELECT AVG(grade) FROM (SELECT city, AVG(grade) FROM students GROUP BY city) t1 #! UNION (kills hyrise) -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'; \ No newline at end of file +SELECT name FROM students WHERE grade > 2.0 UNION SELECT name FROM students \ No newline at end of file diff --git a/frontend-hyrise/ui.js b/frontend-hyrise/ui.js new file mode 100644 index 0000000..ea9d65a --- /dev/null +++ b/frontend-hyrise/ui.js @@ -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 = $(''); + btn.click(function(evt) { + $('#queryInput').val(query); + if (!evt.shiftKey) { + $('#submitBtn').click(); + } + }); + $('#sampleQueries').append(btn); +} + +function addBuggyQuery(name, query) { + var btn = $(''); + btn.click(function(evt) { + $('#queryInput').val(query); + if (!evt.shiftKey) { + $('#submitBtn').click(); + } + }); + $('#buggyQueries').append(btn); +} + +function createElement(tag, value) { + return $('<' + tag + '>' + value + ''); +}; + +function updateResultTable(result) { + // Present result json in result-view + var table = $('#resultTable'); + table.html(''); + + var th = $(''); + $.each(result.header, function(i, val) { + th.append($('' + val + '')); + }); + 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 = $(''); + $.each(row, function(j, val) { + tr.append($('' + val + '')); + }); + table.append(tr); + } +}; + +function updatePerformanceData(result) { + var tbody = $('#performanceDataTable tbody'); + tbody.html(''); + + $.each(result.performanceData, function(i, data) { + var 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); + }); +}; \ No newline at end of file