HyriseSQLParser/hyrise/web-interface/ui.js

237 lines
6.1 KiB
JavaScript
Raw Normal View History

2014-12-15 13:19:12 +01:00
2015-01-12 17:24:24 +01:00
function SetUiStateRunning() {
$('#resultTable').html('');
$('#resultInfo').html('waiting for result...');
$('#msgContainer').attr('class', 'alert alert-warning');
$('#performanceDataTable tbody').html('');
}
function SetUiStateError(msg) {
$('#resultInfo').html(msg);
$('#msgContainer').attr('class', 'alert alert-danger');
$('#performanceDataTable tbody').html('');
}
function SetUiStateSuccess(msg) {
$('#msgContainer').attr('class', 'alert alert-success');
$('#resultInfo').html(msg);
}
function GetHyriseUrl() {
var endpointUrl = $('#endpointInput').val();
return endpointUrl;
}
function GetQuery() {
var query = $('#queryInput').val();
// Check whether a part of the query has been selected
var selectedText = GetSelectedText();
if (query.indexOf(selectedText) >= 0) {
query = selectedText;
}
return query;
}
2014-12-15 13:19:12 +01:00
/**
* Bootstrap
*/
$(function() {
2015-01-12 17:24:24 +01:00
LoadSampleQueries('sample-queries.sql');
2014-12-15 13:19:12 +01:00
2015-01-12 17:24:24 +01:00
// Simple query submit
2014-12-15 13:19:12 +01:00
$('#submitBtn').click(function() {
2015-01-12 17:24:24 +01:00
SetUiStateRunning();
var query = GetQuery();
var hyrise = new HyriseConnector(GetHyriseUrl());
2015-01-12 17:24:24 +01:00
hyrise.executeSQL(query, function(result) {
2014-12-15 13:19:12 +01:00
console.log("Query result: ", result);
2015-01-12 17:24:24 +01:00
// On Success
SetUiStateSuccess('Result contains ' + result.real_size + ' rows');
UpdateResultTable(result);
UpdatePerformanceData(result.performanceData);
2014-12-15 13:19:12 +01:00
}, function(xhr, status, error) {
2015-01-12 17:24:24 +01:00
// console.log(arguments);
2014-12-15 13:19:12 +01:00
// On Error
var msg = 'Error when fetching result. Possibly no connection to Hyrise.';
if (xhr.responseJSON) msg = xhr.responseJSON.error[0];
2015-01-12 17:24:24 +01:00
SetUiStateError(msg);
2014-12-15 13:19:12 +01:00
});
});
$('#queryInput').keypress(function(evt) {
if (evt.keyCode == 13 && evt.shiftKey) {
$('#submitBtn').click();
return false;
}
return true;
});
2015-01-12 17:24:24 +01:00
// Benchmark submit
$('#benchmarkBtn').click(function() {
SetUiStateRunning();
var query = GetQuery();
var hyrise = new HyriseConnector(GetHyriseUrl());
// TODO: hardcoded 5
var numRuns = parseInt($('#benchmarkInput').val());
hyrise.benchmarkSQL(query, numRuns, function(result) {
console.log("Benchmark result: ", result);
UpdatePerformanceData(result.performanceData);
SetUiStateSuccess('Success! See PerformanceData for results.');
});
});
// Setup Table triggers
var table = document.querySelector('#performanceDataTable');
$('#performanceDataTable thead th').click(function() {
var key = $(this).attr('data-key');
if (table._sortKey && table._sortKey == key) table._asc = !table._asc;
else table._asc = true;
var sign = (table._asc) ? 1 : -1;
if (table._data) {
table._sortKey = key;
SortTableData(table);
InsertPerformanceData(table._data);
}
});
2014-12-15 13:19:12 +01:00
});
2015-01-12 17:24:24 +01:00
function GetSelectedText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return (text === "") ? null : text;
}
2014-12-15 13:19:12 +01:00
2015-01-12 17:24:24 +01:00
function LoadSampleQueries(url) {
2014-12-15 13:19:12 +01:00
$.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
2015-01-12 17:24:24 +01:00
if (name && !isBuggy) AddSampleQuery(name, query);
if (name && isBuggy) AddBuggyQuery(name, query);
2014-12-15 13:19:12 +01:00
// New query
isBuggy = (line[1] == '!');
name = line.substring((isBuggy) ? 3 : 2);
query = "";
} else {
query += line + '\n';
}
});
2015-01-12 17:24:24 +01:00
if (name && !isBuggy) AddSampleQuery(name, query);
if (name && isBuggy) AddBuggyQuery(name, query);
2014-12-15 13:19:12 +01:00
});
}
2015-01-12 17:24:24 +01:00
function AddSampleQuery(name, query) {
2014-12-15 13:19:12 +01:00
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);
}
2015-01-12 17:24:24 +01:00
function AddBuggyQuery(name, query) {
2014-12-15 13:19:12 +01:00
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);
}
2015-01-12 17:24:24 +01:00
function CreateElement(tag, value) {
2014-12-15 13:19:12 +01:00
return $('<' + tag + '>' + value + '</' + tag + '>');
};
2015-01-12 17:24:24 +01:00
function UpdateResultTable(result) {
2014-12-15 13:19:12 +01:00
// 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);
}
};
2015-01-12 17:24:24 +01:00
function UpdatePerformanceData(performanceData) {
var table = document.querySelector('#performanceDataTable');
2015-01-26 15:40:39 +01:00
var timeStrings = [
(performanceData.queryTaskTime + performanceData.parseTime).toFixed(3),
performanceData.queryTaskTime.toFixed(3),
performanceData.parseTime.toFixed(3),
performanceData.totalTime.toFixed(3),
]
var timeInfo = + ','
$('#timeInfo').html(timeStrings.join(','));
2015-01-12 17:24:24 +01:00
// Sort and insert into table
var tableData = performanceData.operators;
table._data = tableData;
SortTableData(table);
InsertPerformanceData(tableData);
};
function InsertPerformanceData(performanceData) {
2014-12-15 13:19:12 +01:00
var tbody = $('#performanceDataTable tbody');
tbody.html('');
2015-01-12 17:24:24 +01:00
$.each(performanceData, function(i, data) {
if (!data.time_ms) data.time_ms = data.endTime - data.startTime;
2014-12-15 13:19:12 +01:00
var tr = $('<tr>');
2015-01-12 17:24:24 +01:00
tr.append(CreateElement('td', data.id));
tr.append(CreateElement('td', data.name));
tr.append(CreateElement('td', data.duration));
tr.append(CreateElement('td', data.time_ms.toFixed(6)));
2015-01-26 15:40:39 +01:00
tr.append(CreateElement('td', data.startTime));
tr.append(CreateElement('td', data.endTime));
2014-12-15 13:19:12 +01:00
tbody.append(tr);
});
2015-01-12 17:24:24 +01:00
}
function SortTableData(table) {
2015-01-26 15:40:39 +01:00
if (!table._sortKey) table._sortKey = 'startTime';
if (!('_asc') in table) table._asc = true;
2015-01-12 17:24:24 +01:00
var key = table._sortKey;
2015-01-26 15:40:39 +01:00
var sign = (table._asc) ? -1 : 1;
2015-01-12 17:24:24 +01:00
table._data.sort(function(a, b) {
if (a[key].localeCompare) return sign * a[key].localeCompare(b[key]);
return sign * (a[key] - b[key]);
});
}