mirrors/poky
1
0
Fork 0
mirror of https://git.yoctoproject.org/poky synced 2026-06-01 13:09:50 +00:00
Code Issues Projects Releases Wiki Activity

bitbake: toastergui: implement date range filters for builds

Browse Source 
Implement the completed_on and started_on filtering for
builds.

Also separate the name of a filter ("filter" in the querystring)
from its value ("filter_value" in the querystring). This enables
filtering to be defined in the querystring more intuitively,
and also makes it easier to add other types of filter (e.g.
by day).

[YOCTO #8738]

(Bitbake rev: d47c32e88c2d4a423f4d94d49759e557f425a539)

Signed-off-by: Elliot Smith <elliot.smith@intel.com>
Signed-off-by: Ed Bartosh <ed.bartosh@linux.intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>
This commit is contained in:
Elliot Smith
2016-01-15 13:00:53 +02:00
committed by Richard Purdie
parent b929889cdd
commit f8d383d87f
6 changed files with 332 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bitbake/lib/toaster/toastergui/static/js/table.js
+167 -33
View File
@@ -397,11 +397,140 @@ function tableInit(ctx){
$.cookie("cols", JSON.stringify(disabled_cols));
}
/**
* Create the DOM/JS for the client side of a TableFilterActionToggle
*
* filterName: (string) internal name for the filter action
* filterActionData: (object)
* filterActionData.count: (number) The number of items this filter will
* show when selected
*/
function createActionToggle(filterName, filterActionData) {
var actionStr = '<div class="radio">' +
'<input type="radio" name="filter"' +
' value="' + filterName + '"';
if (Number(filterActionData.count) == 0) {
actionStr += ' disabled="disabled"';
}
actionStr += ' id="' + filterName + '">' +
'<input type="hidden" name="filter_value" value="on"' +
' data-value-for="' + filterName + '">' +
'<label class="filter-title"' +
' for="' + filterName + '">' +
filterActionData.title +
' (' + filterActionData.count + ')' +
'</label>' +
'</div>';
return $(actionStr);
}
/**
* Create the DOM/JS for the client side of a TableFilterActionDateRange
*
* filterName: (string) internal name for the filter action
* filterValue: (string) from,to date range in format yyyy-mm-dd,yyyy-mm-dd;
* used to select the current values for the from/to datepickers;
* if this is partial (e.g. "yyyy-mm-dd,") only the applicable datepicker
* will have a date pre-selected; if empty, neither will
* filterActionData: (object) data for generating the action's HTML
* filterActionData.title: label for the radio button
* filterActionData.max: (string) maximum date for the pickers, in ISO 8601
* datetime format
* filterActionData.min: (string) minimum date for the pickers, ISO 8601
* datetime
*/
function createActionDateRange(filterName, filterValue, filterActionData) {
var action = $('<div class="radio">' +
'<input type="radio" name="filter"' +
' value="' + filterName + '" ' +
' id="' + filterName + '">' +
'<input type="hidden" name="filter_value" value=""' +
' data-value-for="' + filterName + '">' +
'<label class="filter-title"' +
' for="' + filterName + '">' +
filterActionData.title +
'</label>' +
'<input type="text" maxlength="10" class="input-small"' +
' data-date-from-for="' + filterName + '">' +
'<span class="help-inline">to</span>' +
'<input type="text" maxlength="10" class="input-small"' +
' data-date-to-for="' + filterName + '">' +
'<span class="help-inline get-help">(yyyy-mm-dd)</span>' +
'</div>');
var radio = action.find('[type="radio"]');
var value = action.find('[data-value-for]');
// make the datepickers for the range
var options = {
dateFormat: 'yy-mm-dd',
maxDate: new Date(filterActionData.max),
minDate: new Date(filterActionData.min)
};
// create date pickers, setting currently-selected from and to
// dates
var selectedFrom = null;
var selectedTo = null;
var selectedFromAndTo = [];
if (filterValue) {
selectedFromAndTo = filterValue.split(',');
}
if (selectedFromAndTo.length == 2) {
selectedFrom = selectedFromAndTo[0];
selectedTo = selectedFromAndTo[1];
}
options.defaultDate = selectedFrom;
var inputFrom =
action.find('[data-date-from-for]').datepicker(options);
inputFrom.val(selectedFrom);
options.defaultDate = selectedTo;
var inputTo =
action.find('[data-date-to-for]').datepicker(options);
inputTo.val(selectedTo);
// set filter_value based on date pickers when
// one of their values changes
var changeHandler = function () {
value.val(inputFrom.val() + ',' + inputTo.val());
};
inputFrom.change(changeHandler);
inputTo.change(changeHandler);
// check the associated radio button on clicking a date picker
var checkRadio = function () {
radio.prop('checked', 'checked');
};
inputFrom.focus(checkRadio);
inputTo.focus(checkRadio);
// selecting a date in a picker constrains the date you can
// set in the other picker
inputFrom.change(function () {
inputTo.datepicker('option', 'minDate', inputFrom.val());
});
inputTo.change(function () {
inputFrom.datepicker('option', 'maxDate', inputTo.val());
});
return action;
}
function filterOpenClicked(){
var filterName = $(this).data('filter-name');
/* We need to pass in the curren search so that the filter counts take
* into account the current search filter
/* We need to pass in the current search so that the filter counts take
* into account the current search term
*/
var params = {
'name' : filterName,
@@ -443,46 +572,44 @@ function tableInit(ctx){
when the filter popup's "Apply" button is clicked, the
value for the radio button which is checked is passed in the
querystring and applied to the queryset on the table
*/
*/
var filterActionRadios = $('#filter-actions-' + ctx.tableName);
var filterActionRadios = $('#filter-actions-'+ctx.tableName);
$('#filter-modal-title-' + ctx.tableName).text(filterData.title);
$('#filter-modal-title-'+ctx.tableName).text(filterData.title);
filterActionRadios.text("");
filterActionRadios.empty();
// create a radio button + form elements for each action associated
// with the filter on this column of the table
for (var i in filterData.filter_actions) {
var filterAction = filterData.filter_actions[i];
var action = null;
var filterActionData = filterData.filter_actions[i];
var filterName = filterData.name + ':' +
filterActionData.action_name;
if (filterAction.type === 'toggle') {
var actionTitle = filterAction.title + ' (' + filterAction.count + ')';
if (filterActionData.type === 'toggle') {
action = createActionToggle(filterName, filterActionData);
}
else if (filterActionData.type === 'daterange') {
var filterValue = tableParams.filter_value;
action = $('<label class="radio">' +
'<input type="radio" name="filter" value="">' +
'<span class="filter-title">' +
actionTitle +
'</span>' +
'</label>');
var radioInput = action.children("input");
if (Number(filterAction.count) == 0) {
radioInput.attr("disabled", "disabled");
}
radioInput.val(filterData.name + ':' + filterAction.action_name);
/* Setup the current selected filter, default to 'all' if
* no current filter selected.
*/
if ((tableParams.filter &&
tableParams.filter === radioInput.val()) ||
filterAction.action_name == 'all') {
radioInput.attr("checked", "checked");
}
action = createActionDateRange(
filterName,
filterValue,
filterActionData
);
}
if (action) {
// Setup the current selected filter, default to 'all' if
// no current filter selected
var radioInput = action.children('input[name="filter"]');
if ((tableParams.filter &&
tableParams.filter === radioInput.val()) ||
filterActionData.action_name == 'all') {
radioInput.attr("checked", "checked");
}
filterActionRadios.append(action);
}
}
@@ -571,7 +698,14 @@ function tableInit(ctx){
filterBtnActive($(filterBtn), false);
});
tableParams.filter = $(this).find("input[type='radio']:checked").val();
// checked radio button
var checkedFilter = $(this).find("input[name='filter']:checked");
tableParams.filter = checkedFilter.val();
// hidden field holding the value for the checked filter
var checkedFilterValue = $(this).find("input[data-value-for='" +
tableParams.filter + "']");
tableParams.filter_value = checkedFilterValue.val();
var filterBtn = $("#" + tableParams.filter.split(":")[0]);