src/main/webapp/js/test_acknowledgments.js - platform/test/vti/dashboard - Git at Google

 /**
  * 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 + '&timestamp=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);
	/**
	* 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 + '&timestamp=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);