/**
* Copyright (c) 2017 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License"); you
* may not use this file except in compliance with the License. You may
* obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
* implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
(function($) {
var _isModalOpen = false;
var _isReadOnly = true;
var _allTestsSet = new Set();
var _allBranches = [];
var _allDevices = [];
var _writableSummary = 'Known test failures are acknowledged below for specific branch and \
device configurations, and corresponding test breakage alerts will be silenced. Click an \
entry to edit or see more information about the test failure.'
var _readOnlySummary = 'Known test failures are acknowledged below for specific branch and \
device configurations, and corresponding test breakage alerts will be silenced. Click an \
entry to see more information about the test failure. To add, edit, or remove a test \
acknowledgment, contact a VTS Dashboard administrator.'
$.widget('custom.sizedAutocomplete', $.ui.autocomplete, {
options: {
parent: ''
},
_resizeMenu: function() {
this.menu.element.outerWidth($(this.options.parent).width());
}
});
/**
* Remove an acknowledgment from the list.
* @param ack (jQuery object) The object for acknowledgment.
* @param key (String) The value to display next to the label.
*/
function removeAcknowledgment(ack, key) {
if (ack.hasClass('disabled')) {
return;
}
ack.addClass('disabled');
$.ajax({
url: '/api/test_acknowledgments/' + key,
type: 'DELETE'
}).always(function() {
ack.removeClass('disabled');
}).then(function() {
ack.slideUp(150, function() {
ack.remove();
});
});
}
/**
* Callback for when a chip is removed from a chiplist.
* @param text (String) The value stored in the chip.
* @param allChipsSet (Set) The set of all chip values.
* @param allIndicator (jQuery object) The object for "All" indicator adjacent to the chips.
*/
function chipRemoveCallback(text, allChipsSet, allIndicator) {
allChipsSet.delete(text);
if (allChipsSet.size == 0) {
allIndicator.show();
}
}
/**
* Add chips to the chip UI.
* @param allChipsSet (Set) The set of all chip values.
* @param container (jQuery object) The object in which to insert the chips.
* @param chipList (list) The list of chip values to insert.
* @param allIndicator (jQuery object) The object for "All" indicator adjacent to the chips.
*/
function addChips(allChipsSet, container, chipList, allIndicator) {
if (chipList && chipList.length > 0) {
chipList.forEach(function(text) {
if (allChipsSet.has(text)) return;
var chip = $('<span class="chip">' + text + '</span>');
if (!_isReadOnly) {
var icon = $('<i class="material-icons">clear</i>').appendTo(chip);
icon.click(function() {
chipRemoveCallback(text, allChipsSet, allIndicator);
});
}
chip.appendTo(container);
allChipsSet.add(text);
});
allIndicator.hide();
}
}
/**
* Create a chip input UI.
* @param container (jQuery object) The object in which to insert the input box.
* @param placeholder (String) The placeholder text to display in the input.
* @param allChipsSet (Set) The set of all chip values.
* @param chipContainer (jQuery object) The object in which to insert new chips from the input.
* @param allIndicator (jQuery object) The object for "All" indicator adjacent to the chips.
* @returns The chip input jQuery object.
*/
function addChipInput(container, placeholder, allChipsSet, chipContainer, allIndicator) {
var input = $('<input type="text"></input>');
input.attr('placeholder', placeholder);
input.keyup(function(e) {
if (e.keyCode === 13 && input.val().trim()) {
addChips(allChipsSet, chipContainer, [input.val()], allIndicator);
input.val('');
}
});
var addButton = $('<i class="material-icons add-button">add</i>');
addButton.click(function() {
if (input.val().trim()) {
addChips(allChipsSet, chipContainer, [input.val()], allIndicator);
input.val('');
addButton.hide();
}
});
addButton.hide();
input.focus(function() {
addButton.show();
});
input.focusout(function() {
if (!input.val().trim()) {
addButton.hide();
}
});
var holder = $('<div class="col s12 input-container"></div>').appendTo(container);
input.appendTo(holder);
addButton.appendTo(holder);
return input;
}
/**
* Callback to save changes to the acknowledgment.
* @param ack (jQuery object) The object for acknowledgment.
* @param modal (jQuery object) The jQueryUI modal object which invoked the callback.
* @param key (String) The key associated with the acknowledgment.
* @param test (String) The test name in the acknowledgment.
* @param branchSet (Set) The set of all branches in the acknowledgment.
* @param deviceSet (Set) The set of all devoces in the acknowledgment.
* @param testCaseSet (Set) The set of all test cases in the acknowledgment.
* @param note (String) The note in the acknowledgment.
*/
function saveCallback(ack, modal, key, test, branchSet, deviceSet, testCaseSet, note) {
var allEmpty = true;
var firstUnemptyInput = null;
var vals = modal.find('.modal-section>.input-container>input').each(function(_, input) {
if (!!$(input).val()) {
allEmpty = false;
if (!firstUnemptyInput) firstUnemptyInput = $(input);
}
});
if (!allEmpty) {
firstUnemptyInput.focus();
return false;
}
var branches = Array.from(branchSet);
branches.sort();
var devices = Array.from(deviceSet);
devices.sort();
var testCaseNames = Array.from(testCaseSet);
testCaseNames.sort();
var data = {
'key' : key,
'testName' : test,
'branches' : branches,
'devices' : devices,
'testCaseNames' : testCaseNames,
'note': note
};
$.post('/api/test_acknowledgments', JSON.stringify(data)).done(function(newKey) {
var newAck = createAcknowledgment(newKey, test, branches, devices, testCaseNames, note);
if (key == null) {
ack.replaceWith(newAck.hide());
newAck.slideDown(150);
} else {
ack.replaceWith(newAck);
}
}).always(function() {
modal.modal({
complete: function() { _isModalOpen = false; }
});
modal.modal('close');
});
}
/**
* Callback to save changes to the acknowledgment.
* @param ack (jQuery object) The object for the acknowledgment.
* @param key (String) The key associated with the acknowledgment.
* @param test (String) The test name in the acknowledgment.
* @param branches (list) The list of all branches in the acknowledgment.
* @param devices (Set) The list of all devoces in the acknowledgment.
* @param testCases (Set) The list of all test cases in the acknowledgment.
* @param note (String) The note in the acknowledgment.
*/
function showModal(ack, key, test, branches, devices, testCases, note) {
if (_isModalOpen) {
return;
}
_isModalOpen = true;
var wrapper = $('#modal');
wrapper.empty();
wrapper.modal();
var content = $('<div class="modal-content"><h4>Test Acknowledgment</h4></div>');
var row = $('<div class="row"></div>').appendTo(content);
row.append('<div class="col s12"><h5><b>Test: </b>' + test + '</h5></div>');
var branchSet = new Set();
var branchContainer = $('<div class="col l4 s12 modal-section"></div>').appendTo(row);
var branchHeader = $('<h5></h5>').appendTo(branchContainer);
branchHeader.append('<b>Branches:</b>');
var allBranchesLabel = $('<span> All</span>').appendTo(branchHeader);
var branchChips = $('<div class="col s12 chips branch-chips"></div>').appendTo(branchContainer);
addChips(branchSet, branchChips, branches, allBranchesLabel);
if (!_isReadOnly) {
var branchInput = addChipInput(
branchContainer, 'Specify a branch...', branchSet, branchChips, allBranchesLabel);
branchInput.sizedAutocomplete({
source: _allBranches,
classes: {
'ui-autocomplete': 'card autocomplete-dropdown'
},
parent: branchInput
});
}
var deviceSet = new Set();
var deviceContainer = $('<div class="col l4 s12 modal-section"></div>').appendTo(row);
var deviceHeader = $('<h5></h5>').appendTo(deviceContainer);
deviceHeader.append('<b>Devices:</b>');
var allDevicesLabel = $('<span> All</span>').appendTo(deviceHeader);
var deviceChips = $('<div class="col s12 chips device-chips"></div>').appendTo(deviceContainer);
addChips(deviceSet, deviceChips, devices, allDevicesLabel);
if (!_isReadOnly) {
var deviceInput = addChipInput(
deviceContainer, 'Specify a device...', deviceSet, deviceChips, allDevicesLabel);
deviceInput.sizedAutocomplete({
source: _allDevices,
classes: {
'ui-autocomplete': 'card autocomplete-dropdown'
},
parent: deviceInput
});
}
var testCaseSet = new Set();
var testCaseContainer = $('<div class="col l4 s12 modal-section"></div>').appendTo(row);
var testCaseHeader = $('<h5></h5>').appendTo(testCaseContainer);
testCaseHeader.append('<b>Test Cases:</b>');
var allTestCasesLabel = $('<span> All</span>').appendTo(testCaseHeader);
var testCaseChips = $('<div class="col s12 chips test-case-chips"></div>').appendTo(
testCaseContainer);
addChips(testCaseSet, testCaseChips, testCases, allTestCasesLabel);
var testCaseInput = null;
if (!_isReadOnly) {
testCaseInput = addChipInput(
testCaseContainer, 'Specify a test case...', testCaseSet, testCaseChips, allTestCasesLabel);
}
row.append('<div class="col s12"><h5><b>Note:</b></h5></div>');
var inputField = $('<div class="input-field col s12"></div>').appendTo(row);
var textArea = $('<textarea placeholder="Type a note..."></textarea>');
textArea.addClass('materialize-textarea note-field');
textArea.appendTo(inputField);
textArea.val(note);
if (_isReadOnly) {
textArea.attr('disabled', true);
}
content.appendTo(wrapper);
var footer = $('<div class="modal-footer"></div>');
if (!_isReadOnly) {
var save = $('<a class="btn">Save</a></div>').appendTo(footer);
save.click(function() {
saveCallback(ack, wrapper, key, test, branchSet, deviceSet, testCaseSet, textArea.val());
});
}
var close = $('<a class="btn-flat">Close</a></div>').appendTo(footer);
close.click(function() {
wrapper.modal({
complete: function() { _isModalOpen = false; }
});
wrapper.modal('close');
})
footer.appendTo(wrapper);
if (!_isReadOnly) {
$.get('/api/test_run?test=' + test + '×tamp=latest').done(function(data) {
var allTestCases = data.reduce(function(array, column) {
return array.concat(column.data);
}, []);
testCaseInput.sizedAutocomplete({
source: allTestCases,
classes: {
'ui-autocomplete': 'card autocomplete-dropdown'
},
parent: testCaseInput
});
}).always(function() {
wrapper.modal('open');
});
} else {
wrapper.modal('open');
}
}
/**
* Create a test acknowledgment object.
* @param key (String) The key associated with the acknowledgment.
* @param test (String) The test name in the acknowledgment.
* @param branches (list) The list of all branches in the acknowledgment.
* @param devices (Set) The list of all devoces in the acknowledgment.
* @param testCases (Set) The list of all test cases in the acknowledgment.
* @param note (String) The note in the acknowledgment.
*/
function createAcknowledgment(key, test, branches, devices, testCases, note) {
var wrapper = $('<div class="col s12 ack-entry"></div>');
var details = $('<div class="col card hoverable"></div>').appendTo(wrapper);
details.addClass(_isReadOnly ? 's12' : 's11')
var testDiv = $('<div class="col s12"><b>' + test + '</b></div>').appendTo(details);
var infoBtn = $('<span class="info-icon right"></a>').appendTo(testDiv);
infoBtn.append('<i class="material-icons">info_outline</i>');
details.click(function() {
showModal(wrapper, key, test, branches, devices, testCases, note);
});
var branchesSummary = 'All';
if (!!branches && branches.length == 1) {
branchesSummary = branches[0];
} else if (!!branches && branches.length > 1) {
branchesSummary = branches[0];
branchesSummary += '<span class="count-indicator"> (+' + (branches.length - 1) + ')</span>';
}
$('<div class="col l4 s12"><b>Branches: </b>' + branchesSummary + '</div>').appendTo(details);
var devicesSummary = 'All';
if (!!devices && devices.length == 1) {
devicesSummary = devices[0];
} else if (!!devices && devices.length > 1) {
devicesSummary = devices[0];
devicesSummary += '<span class="count-indicator"> (+' + (devices.length - 1) + ')</span>';
}
$('<div class="col l4 s12"><b>Devices: </b>' + devicesSummary + '</div>').appendTo(details);
var testCaseSummary = 'All';
if (!!testCases && testCases.length == 1) {
testCaseSummary = testCases[0];
} else if (!!testCases && testCases.length > 1) {
testCaseSummary = testCases[0];
testCaseSummary += '<span class="count-indicator"> (+' + (testCases.length - 1) + ')</span>';
}
details.append('<div class="col l4 s12"><b>Test Cases: </b>' + testCaseSummary + '</div>');
if (!_isReadOnly) {
var btnContainer = $('<div class="col s1 center btn-container"></div>');
var clear = $('<a class="col s12 btn-flat remove-button"></a>');
clear.append('<i class="material-icons">clear</i>');
clear.attr('title', 'Remove');
clear.click(function() { removeAcknowledgment(wrapper, key); });
clear.appendTo(btnContainer);
btnContainer.appendTo(wrapper);
}
return wrapper;
}
/**
* Create a test acknowledgments UI.
* @param allTests (list) The list of all test names.
* @param allBranches (list) The list of all branches.
* @param allDevices (list) The list of all device names.
* @param testAcknowledgments (list) JSON-serialized TestAcknowledgmentEntity object list.
* @param readOnly (boolean) True if the acknowledgments are read-only, false if mutable.
*/
$.fn.testAcknowledgments = function(
allTests, allBranches, allDevices, testAcknowledgments, readOnly) {
var self = $(this);
_allTestsSet = new Set(allTests);
_allBranches = allBranches;
_allDevices = allDevices;
_isReadOnly = readOnly;
var searchRow = $('<div class="search-row"></div>');
var headerRow = $('<div></div>');
var acks = $('<div class="acknowledgments"></div>');
if (!_isReadOnly) {
var inputWrapper = $('<div class="input-field col s8"></div>');
var input = $('<input type="text"></input>').appendTo(inputWrapper);
inputWrapper.append('<label>Search for tests to add an acknowledgment</label>');
inputWrapper.appendTo(searchRow);
input.sizedAutocomplete({
source: allTests,
classes: {
'ui-autocomplete': 'card autocomplete-dropdown'
},
parent: input
});
var btnWrapper = $('<div class="col s1"></div>');
var btn = $('<a class="btn waves-effect waves-light red btn-floating"></a>');
btn.append('<i class="material-icons">add</a>');
btn.appendTo(btnWrapper);
btnWrapper.appendTo(searchRow);
btn.click(function() {
if (!_allTestsSet.has(input.val())) return;
var ack = createAcknowledgment(undefined, input.val());
ack.hide().prependTo(acks);
showModal(ack, undefined, input.val());
});
searchRow.appendTo(self);
}
var headerCol = $('<div class="col s12 section-header-col"></div>').appendTo(headerRow);
if (_isReadOnly) {
headerCol.append('<p class="acknowledgment-info">' + _readOnlySummary + '</p>');
} else {
headerCol.append('<p class="acknowledgment-info">' + _writableSummary + '</p>');
}
headerRow.appendTo(self);
testAcknowledgments.forEach(function(ack) {
var wrapper = createAcknowledgment(
ack.key, ack.testName, ack.branches, ack.devices, ack.testCaseNames, ack.note);
wrapper.appendTo(acks);
});
acks.appendTo(self);
self.append('<div class="modal modal-fixed-footer acknowledgments-modal" id="modal"></div>');
};
})(jQuery);