Add pagination to the Scoreboard
Create a pagination from server and client side to improve query performance Change-Id: Iceffeeaec43cc69ba9b7faea7307f7a46e6bcde1
This commit is contained in:
marcusvrn
parent
b96a4b5ec5
commit
4c6958b295
|
|
@ -20,7 +20,6 @@ logger.init(cfg)
|
|||
|
||||
db = db_helper.DBHelper(cfg).get()
|
||||
|
||||
|
||||
@app.route('/')
|
||||
def index():
|
||||
return render_template('index.html', host=request.host)
|
||||
|
|
@ -42,19 +41,18 @@ def results():
|
|||
# TODO: We should have a cache for these requests
|
||||
# so we don't get hammered by reloading pages
|
||||
project = request.args.get('project', None)
|
||||
count = request.args.get('count', None)
|
||||
skip = request.args.get('skip', None)
|
||||
timeframe = request.args.get('timeframe', None)
|
||||
start = request.args.get('start', None)
|
||||
end = request.args.get('end', None)
|
||||
|
||||
return query_results(project, count, skip, timeframe, start, end)
|
||||
return query_results(project, timeframe, start, end)
|
||||
|
||||
def query_results(project, count, skip, timeframe, start, end):
|
||||
def query_results(project, timeframe, start, end):
|
||||
query = {}
|
||||
date_format = '%Y-%m-%d'
|
||||
if project:
|
||||
query['project'] = project
|
||||
|
||||
if timeframe:
|
||||
num_hours = int(timeframe)
|
||||
current_time = datetime.datetime.utcnow()
|
||||
|
|
|
|||
|
|
@ -174,6 +174,18 @@ body {
|
|||
z-index: 100000; /* more than the opaque one */
|
||||
}
|
||||
|
||||
#paginator {
|
||||
margin: auto 10px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#paginator label {
|
||||
margin: 0 10px;
|
||||
text-align: center;
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
#logo {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -1,9 +1,12 @@
|
|||
|
||||
var Scoreboard = (function () {
|
||||
var board = {};
|
||||
var row_cache = {};
|
||||
var score = {};
|
||||
|
||||
var table_div_id = null;
|
||||
var table = null;
|
||||
var form = null;
|
||||
var table_header = null;
|
||||
var hostname = null;
|
||||
|
||||
|
|
@ -11,19 +14,19 @@ var Scoreboard = (function () {
|
|||
var ci_accounts = null;
|
||||
var user_filter = null;
|
||||
|
||||
var row_cache = {};
|
||||
|
||||
var spinner = null;
|
||||
var overlay = null;
|
||||
var opaque_overlay = null;
|
||||
|
||||
var score = {};
|
||||
var page = 1; // Default value for the search
|
||||
var page_size = null;
|
||||
var num_results = null;
|
||||
|
||||
var hide_overlay = function () {
|
||||
spinner.stop();
|
||||
overlay.remove();
|
||||
opaque_overlay.remove();
|
||||
}
|
||||
};
|
||||
|
||||
var show_overlay = function () {
|
||||
overlay = $(document.createElement('div'));
|
||||
|
|
@ -58,7 +61,7 @@ var Scoreboard = (function () {
|
|||
spinner = new Spinner(opts).spin();
|
||||
$(spinner.el).appendTo(overlay);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
var gather_data_and_build = function () {
|
||||
show_overlay();
|
||||
|
|
@ -68,7 +71,8 @@ var Scoreboard = (function () {
|
|||
data: window.location.search.substring(1),
|
||||
success: function(data) {
|
||||
ci_results = JSON.parse(data);
|
||||
get_ci_accounts()
|
||||
num_results = ci_results.length;
|
||||
get_ci_accounts();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -80,9 +84,10 @@ var Scoreboard = (function () {
|
|||
success: function(data) {
|
||||
parse_accounts(data);
|
||||
build_table();
|
||||
build_pagination();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var find_ci_in_list = function (ci, list) {
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
|
|
@ -90,7 +95,7 @@ var Scoreboard = (function () {
|
|||
return list[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var parse_accounts = function (ci_accounts_raw) {
|
||||
var all_ci_accounts = JSON.parse(ci_accounts_raw);
|
||||
|
|
@ -116,7 +121,7 @@ var Scoreboard = (function () {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var ci_account_header = function (user_name, user_name_pretty) {
|
||||
return user_name_pretty + ' <br /> (' + user_name + ')';
|
||||
|
|
@ -135,6 +140,18 @@ var Scoreboard = (function () {
|
|||
return td;
|
||||
};
|
||||
|
||||
var create_button = function (btn_type, btn_value) {
|
||||
return $('<input/>', { type:btn_type, value:btn_value });
|
||||
};
|
||||
|
||||
var toggle_page_btn = function (button, comparison) {
|
||||
if (page == comparison) {
|
||||
button.prop("disabled", true);
|
||||
} else {
|
||||
button.prop("disabled", false);
|
||||
}
|
||||
};
|
||||
|
||||
var add_header = function (header_title) {
|
||||
var td = create_header();
|
||||
td.html(header_title);
|
||||
|
|
@ -218,9 +235,13 @@ var Scoreboard = (function () {
|
|||
}
|
||||
td.appendTo(result_row);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var build_table = function () {
|
||||
if ($('#scoreboard table').length) {
|
||||
$('#scoreboard table').remove();
|
||||
}
|
||||
|
||||
table = $(document.createElement('table'));
|
||||
table.addClass('pretty_table');
|
||||
table.attr('cellspacing', 0);
|
||||
|
|
@ -254,10 +275,18 @@ var Scoreboard = (function () {
|
|||
// takes a while to actually build out the table, but at least
|
||||
// it will be more exciting to watch all the results pop up
|
||||
// on the screen instead of just blank page.
|
||||
var index = 0;
|
||||
var num_results = ci_results.length;
|
||||
|
||||
if (page_size == '') {
|
||||
page_size = 25; // Default value if not set
|
||||
}
|
||||
|
||||
var index = page_size * (page - 1);
|
||||
var max = page * page_size;
|
||||
|
||||
score = {};
|
||||
|
||||
(function handle_patchset_wrapper() {
|
||||
if (index < num_results) {
|
||||
if (index < max && ci_results[index] != null) {
|
||||
handle_patchset(ci_results[index]);
|
||||
index++;
|
||||
window.setTimeout(handle_patchset_wrapper, 0);
|
||||
|
|
@ -293,6 +322,50 @@ var Scoreboard = (function () {
|
|||
}
|
||||
};
|
||||
|
||||
var build_pagination = function () {
|
||||
var container = $('#paginator');
|
||||
|
||||
if (num_results != null) {
|
||||
var previous_btn = create_button ('button', '<');
|
||||
var index = $('<label>').text('1');
|
||||
var next_btn = create_button ('button', '>');
|
||||
|
||||
previous_btn.appendTo(container);
|
||||
index.appendTo(container);
|
||||
next_btn.appendTo(container);
|
||||
|
||||
n = parseInt(index.text());
|
||||
max = Math.ceil(num_results / page_size);
|
||||
|
||||
toggle_page_btn(previous_btn, '1');
|
||||
toggle_page_btn(next_btn, max);
|
||||
|
||||
previous_btn.click(function() {
|
||||
n = parseInt(index.text());
|
||||
if (n > 1) {
|
||||
page = n - 1;
|
||||
index.text(page);
|
||||
next_btn.prop("disabled", false);
|
||||
build_table();
|
||||
}
|
||||
toggle_page_btn(previous_btn, '1');
|
||||
});
|
||||
|
||||
next_btn.click(function() {
|
||||
n = parseInt(index.text());
|
||||
max = Math.ceil(num_results / page_size);
|
||||
|
||||
if (n < max) {
|
||||
page = n + 1;
|
||||
index.text(page);
|
||||
previous_btn.prop("disabled", false);
|
||||
build_table();
|
||||
}
|
||||
toggle_page_btn(next_btn, max);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var add_input_to_form = function (form, input_type, label_text, input_name, starting_val) {
|
||||
var label = $('<label>').text(label_text + ":");
|
||||
var input = $('<input/>').attr({type: input_type, id: input_name, name: input_name});
|
||||
|
|
@ -302,18 +375,18 @@ var Scoreboard = (function () {
|
|||
}
|
||||
label.appendTo(form);
|
||||
return input;
|
||||
}
|
||||
};
|
||||
|
||||
var add_break_to_form = function (form) {
|
||||
$('<br/>').appendTo(form);
|
||||
}
|
||||
};
|
||||
|
||||
var get_param_by_name = function (name) {
|
||||
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
|
||||
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
|
||||
results = regex.exec(window.location.search);
|
||||
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
|
||||
}
|
||||
};
|
||||
|
||||
board.show_query_box = function (host, container) {
|
||||
var qb_container = $('#' + container);
|
||||
|
|
@ -334,8 +407,9 @@ var Scoreboard = (function () {
|
|||
var current_timeframe = get_param_by_name('timeframe');
|
||||
var start_date = get_param_by_name('start');
|
||||
var end_date = get_param_by_name('end');
|
||||
page_size = get_param_by_name('page_size');
|
||||
|
||||
var form = $(document.createElement('form'));
|
||||
form = $(document.createElement('form'));
|
||||
|
||||
add_input_to_form(form, 'text', 'Project Name', 'project', current_project);
|
||||
add_input_to_form(form, 'text', 'CI Account Username', 'user', current_user);
|
||||
|
|
@ -343,16 +417,17 @@ var Scoreboard = (function () {
|
|||
add_input_to_form(form, 'text', 'Timeframe (hours)', 'timeframe', current_timeframe);
|
||||
add_input_to_form(form, 'date', 'Start Date', 'start', start_date);
|
||||
add_input_to_form(form, 'date', 'End Date', 'end', end_date);
|
||||
// TODO: Implement the "start" and "count" filters so we can do pagination
|
||||
add_input_to_form(form, 'text', 'Page Size', 'page_size', page_size);
|
||||
|
||||
submit_button = $('<input/>', { type:'submit', value:'GO!'});
|
||||
submit_button.appendTo(form);
|
||||
|
||||
form.submit(function(){
|
||||
location.href = '/' + $(this).serialize();
|
||||
});
|
||||
|
||||
form.appendTo(qb_div);
|
||||
}
|
||||
};
|
||||
|
||||
board.build = function (host, container) {
|
||||
hostname = host;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<img src="/static/open-stack-cloud-computing-logo-2.png" />
|
||||
</div>
|
||||
<div id='query-box'></div>
|
||||
<div id='paginator'></div>
|
||||
<div id='scoreboard'></div>
|
||||
<script type='text/javascript'>
|
||||
var HOST = '{{host}}';
|
||||
|
|
|
|||
Loading…
Reference in New Issue