stackviz/app/views/directives/timeline-search-popover.html
Tim Buckley 81c59489f3 Add search and filtering support to the timeline.
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
2016-01-12 13:28:45 -07:00

39 lines
1.3 KiB
HTML

<div class="timeline-search-popover">
<label>Filter by name:</label>
<div class="input-group">
<span class="input-group-addon"><fa name="search"></fa></span>
<input type="text"
placeholder="query..."
class="form-control"
ng-model="search.query"
ng-model-options="{debounce: 250}">
</div>
<br>
<label>Filter by status:</label>
<div class="status-group btn-group btn-group-justified">
<label uib-btn-checkbox
ng-model="search.showSuccess"
class="btn btn-default">success</label>
<label uib-btn-checkbox
ng-model="search.showSkip"
class="btn btn-default">skip</label>
<label uib-btn-checkbox
ng-model="search.showFail"
class="btn btn-default">fail</label>
</div>
<br>
<div class="jump-group">
<label>Jump to:</label>
<ul class="list-group">
<li ng-repeat="item in search.results"
class="list-group-item"
ng-class="item | contextClass:'list-group-item'"
ng-click="search.select(item)">
{{item.name | split:'.' | pickRight:1}}
</li>
</ul>
</div>
</div>