81c59489f3
This adds a new UI for searching and filtering through tests in a timeline. A new dropdown for filter options is added to the timeline panel header, where users can query and select tests based on name and metadata (pass/fail/skip). A list of results is displayed which can be selected from directly, but results are also highlighted on the timeline directly. Some rearchitecting of the HTML layout for the timeline directive was needed to allow part of the timeline to be inside a panel header, so the entire panel layout was moved inside the timeline directive. A new `filterFunction` field was added to the main timeline controller to support communicating the filtering parameters to other components of the timeline. Additionally, a new `contextClass` filter was added to avoid excessive code duplication for highlighting element color based on test status - existing uses were replaced with this. Change-Id: I5f35091ab2b605e0821125e79de47c4c6067f644
99 lines
2.1 KiB
JavaScript
99 lines
2.1 KiB
JavaScript
'use strict';
|
|
|
|
var directivesModule = require('./_index.js');
|
|
|
|
/**
|
|
* @ngInject
|
|
*/
|
|
function timelineSearch() {
|
|
|
|
/**
|
|
* @ngInject
|
|
*/
|
|
var controller = function($scope, $element) {
|
|
var self = this;
|
|
|
|
this.open = false;
|
|
this.query = '';
|
|
this.showSuccess = true;
|
|
this.showSkip = true;
|
|
this.showFail = true;
|
|
|
|
this.results = [];
|
|
|
|
var doFilter = function(item) {
|
|
if ((item.status === 'success' && !self.showSuccess) ||
|
|
(item.status === 'skip' && !self.showSkip) ||
|
|
(item.status === 'fail' && !self.showFail)) {
|
|
return false;
|
|
}
|
|
|
|
if (item.name.toLowerCase().indexOf(self.query.toLowerCase()) < 0) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
this.updateResults = function() {
|
|
var timeline = $element.controller('timeline');
|
|
timeline.setFilterFunction(function(item) {
|
|
return doFilter(item);
|
|
});
|
|
|
|
var ret = [];
|
|
for (var i = 0; i < timeline.dataRaw.length; i++) {
|
|
var item = timeline.dataRaw[i];
|
|
|
|
if (!doFilter(item)) {
|
|
continue;
|
|
}
|
|
|
|
ret.push(timeline.dataRaw[i]);
|
|
if (ret.length > 25) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
this.results = ret;
|
|
};
|
|
|
|
this.select = function(item) {
|
|
var timeline = $element.controller('timeline');
|
|
timeline.selectItem(item);
|
|
timeline.setFilterFunction(null);
|
|
|
|
self.query = '';
|
|
self.open = false;
|
|
};
|
|
|
|
var update = function(a, b) {
|
|
if (a === b) {
|
|
return;
|
|
}
|
|
|
|
self.updateResults();
|
|
};
|
|
|
|
$scope.$watch(function() { return self.query; }, update);
|
|
$scope.$watch(function() { return self.showSuccess; }, update);
|
|
$scope.$watch(function() { return self.showSkip; }, update);
|
|
$scope.$watch(function() { return self.showFail; }, update);
|
|
|
|
$scope.$on('dataLoaded', function() {
|
|
self.updateResults();
|
|
});
|
|
};
|
|
|
|
return {
|
|
restrict: 'EA',
|
|
require: ['^timelineSearch', '^timeline'],
|
|
scope: true,
|
|
controller: controller,
|
|
controllerAs: 'search',
|
|
templateUrl: 'directives/timeline-search.html'
|
|
};
|
|
}
|
|
|
|
directivesModule.directive('timelineSearch', timelineSearch);
|