Skip to content

#659: Allow filtering report tables by label #662

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
broeder-xceptance wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

#659: Allow filtering report tables by label #662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
175bdc3
#659: Allow filtering report tables by label
broeder-xceptance Feb 23, 2026
9feb355
fix filtering on slowest requests page
broeder-xceptance Feb 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions config/testreport/css/default.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1013,11 +1013,11 @@ table * {
}
table th.table-sorted-asc
{
background-image: url('../images/caret-down-fill.svg');
background-image: url('../images/caret-up-fill.svg');
}
table th.table-sorted-desc
{
background-image: url('../images/caret-up-fill.svg');
background-image: url('../images/caret-down-fill.svg');
}
table tfoot td.colgroup1
{
Expand Down
2 changes: 1 addition & 1 deletion config/testreport/js/table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -520,7 +520,7 @@ var Table = (function(){
removeClass(cell,this.SortedDescendingClassName);
// If the computed colIndex of the cell equals the sorted colIndex, flag it as sorted
if (tdata.col==table.getActualCellIndex(cell) && (classValue(cell,table.SortableClassName))) {
addClass(cell,tdata.desc?this.SortedAscendingClassName:this.SortedDescendingClassName);
addClass(cell,tdata.desc?this.SortedDescendingClassName:this.SortedAscendingClassName);
}
}
}
Expand Down
121 changes: 73 additions & 48 deletions config/testreport/js/xlt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,17 +347,13 @@

function filter (input) {
var $input = $(input),
table = $input.parents("table:not(.cluetip-table)"), // get the target/foreground table
$table = $input.parents("table:not(.cluetip-table)"), // get the target/foreground table
filterPhrase = $input.val();
filterId = $input.attr('data-filter-id');

var filterFunc = function(value) { return doFilter(value, filterPhrase) };

// actually perform filtering a table by a filter phrase
var filterTable = function(table) {
table.find("input.filter").each(function() {
Table.filter(this, { 'filter': filterFunc });
});
};
var filter = {};
filter.filter = function(value) { return doFilter(value, filterPhrase) };
filter.col = $input.attr('data-col-index'); // input should provide the index of the column to filter

// shows/hides the footer row of a table
var showTableFooter = function(table, footerVisible) {
Expand All @@ -383,29 +379,34 @@

var footerVisible;

// let the table filter the rows
filterTable(table);
// let the table filter the rows; the filter logic stores all previously applied filters (e.g. filters for other
// columns), so we only need to provide the input field that got updated here
Table.filter(input, filter);

// show the table footer only if no body rows have been filtered out
footerVisible = table.find('> tbody > tr:hidden').length == 0;
footerVisible = $table.find('> tbody > tr:hidden').length == 0;

showTableFooter(table, footerVisible);
showTableFooter($table, footerVisible);

// now process any hidden table (Requests page only)
$('table:hidden').each(function() {
// now process any hidden tables (Requests page only) or all tables on the page for trend reports; don't process
// the initial table again; ignore cluetip tables
$('table:not(.cluetip-table):hidden,table.trend').not($table).each(function() {
var $this = $(this);
filterTable($this);
var $input = $this.find('input[data-filter-id="' + filterId + '"]');
Table.filter($input[0], filter);
showTableFooter($this, footerVisible);
// set the current filter phrase as the filter input's value
$this.find('input.filter').val(filterPhrase);
$input.val(filterPhrase);
});

// now filter the charts
$('.charts:not(.overview) .chart-group.no-print').each(function() {
var value = this.getAttribute('data-name');
var visible = filterFunc(value);

$(this).toggle(visible);
var chartId = this.getAttribute('id');
// find the table row for the current chart; the chart is only visible if the matching table row is visible
var $row = $table.find('tr a[href="#' + chartId + '"]');
if($row.length > 0){
$(this).toggle($row.is(':visible'));
}
});
}

Expand Down Expand Up @@ -513,6 +514,7 @@
event.stopPropagation();
$input.val("");
throttleFilter(input);
updateFilterHash(input);
});
});
})();
Expand Down Expand Up @@ -987,9 +989,9 @@
newHashObj.sort = oldHashObj.sort;
}

// hashes might contain a filter
if(oldHashObj.filter != undefined && newHashObj.filter == undefined){
newHashObj.filter = oldHashObj.filter;
// hashes might contain filters
if(oldHashObj.filters.length > 0 && newHashObj.filters.length == 0){
newHashObj.filters = oldHashObj.filters;
}

// sometimes sorting must be triggered from the update hash function. For example, when a user directly changes the sorting option (navbar) in the url
Expand All @@ -1012,9 +1014,11 @@
}
}

// splits the given hash - automatically tries to detect the current format. the returned hash object might contain a "navigation", "sort" and "filter" option
// splits the given hash - automatically tries to detect the current format. the returned hash object might contain a "navigation" and "sort" option, as well
// as multiple "filter" options
function splitHash(hash){
var hashObj = {};
hashObj.filters = [];

if(hash !== ""){
// hash format: http://...#abc
Expand All @@ -1033,7 +1037,11 @@
hashObj.sort = param;
}
else if(param.startsWith('filter')){
hashObj.filter = param;
// filter params have the format "filterByX=value"
var filterId = param.split('=')[0];
// order filters based on their column index, so the order in the hash is consistent
var index = $('input[data-filter-id="' + filterId + '"]').attr('data-col-index');
hashObj.filters[index] = param;
}
else{
hashObj.navigation = '#' + param;
Expand All @@ -1059,8 +1067,13 @@
newHash.push(updatedHashObj.sort);
}

if(updatedHashObj.filter != undefined){
newHash.push(updatedHashObj.filter);
if(updatedHashObj.filters != undefined){
for(var i = 0; i < updatedHashObj.filters.length; i++){
// the "filters" array might contain undefined values if not all filters are set; we ignore those here
if(updatedHashObj.filters[i]){
newHash.push(updatedHashObj.filters[i]);
}
}
}

// check if we have a hash to process
Expand All @@ -1081,13 +1094,13 @@

// eventlistener that fires if a sortable table row gets clicked
function updateHashAfterSort(sortingEvent){
if(sortingEvent.target.classList.contains('table-sortable') && sortingEvent.target.id != undefined){
var sortingRule = sortingEvent.target.classList.contains('table-sorted-asc') ? 'asc' : 'desc';
if(sortingEvent.currentTarget.classList.contains('table-sortable') && sortingEvent.currentTarget.id != undefined){
var sortingRule = sortingEvent.currentTarget.classList.contains('table-sorted-asc') ? 'asc' : 'desc';
// Get the current hash (if one exists)
var hashObj = splitHash(window.location.hash);

// update the sorting option of the hash
hashObj.sort = sortingEvent.target.id + '=' + sortingRule;
hashObj.sort = sortingEvent.currentTarget.id + '=' + sortingRule;

// After sorting we update the hash manually, so we disable executing the next event
ignoreNextHashChange = true;
Expand Down Expand Up @@ -1140,12 +1153,21 @@

// method that gets triggered when the user enters some input to apply a filter
function updateHashAfterFilter(filterEvent){
var filter = filterEvent.target.value;
var encodedFilter = encodeURIComponent(filterEvent.target.value);
updateFilterHash(filterEvent.target);
}

// updates the current hash with information from the given filter input
function updateFilterHash(filterInput){
var filter = filterInput.value;
var encodedFilter = encodeURIComponent(filter);
// console.log('filter change:' + filter + ' to ' + encodedFilter);

var filterId = filterInput.getAttribute('data-filter-id');
var index = filterInput.getAttribute('data-col-index');

var newHashObj = splitHash(window.location.hash);
newHashObj.filter = 'filter=' + encodedFilter;

newHashObj.filters[index] = filterId + '=' + encodedFilter;

updateHash(newHashObj);
}
Expand All @@ -1164,20 +1186,23 @@
sort(sortingElem, sortingRule);
}

// check for existing filter to apply
if(hashObj.filter != undefined){
// Apply initial filter
var filterParam = hashObj.filter.split('=');
var encodedFilter = filterParam[1];

if(encodedFilter.length > 0){
var decodedFilter = decodeURIComponent(encodedFilter);
// console.log('filter value: ' + decodedFilter);
var filterInputFields = document.querySelectorAll('input.filter');
for(var i = 0; i < filterInputFields.length; i++){
var filterField = filterInputFields[i];
filterField.value = decodedFilter;
filter(filterField);
// check for existing filters to apply
for(var i = 0; i < hashObj.filters.length; i++){
// skip undefined values in the "filters" array
if(hashObj.filters[i]){
// Apply initial filters
var filterParam = hashObj.filters[i].split('=');
var encodedFilter = filterParam[1];

if(encodedFilter.length > 0){
var decodedFilter = decodeURIComponent(encodedFilter);
// console.log('filter value: ' + decodedFilter);

// apply filter to the first visible matching filter input field; the filter logic will propagate
// the filter value to all other matching input fields automatically
var filterInputField = $('input:visible[data-filter-id="' + filterParam[0] + '"]')[0];
filterInputField.value = decodedFilter;
filter(filterInputField);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion config/xsl/diffreport/sections/custom-values.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<xsl:attribute name="id">sortByName</xsl:attribute>
Value Name
<br/>
<input class="filter" placeholder="Enter filter substrings" title=""/>
<input class="filter" placeholder="Enter filter substrings" title="" data-filter-id="filterByName" data-col-index="0"/>
<button class="clear-input" type="clear" title="Click to clear">&#x2715;</button>
</th>
<th colspan="4">Count</th>
Expand Down
2 changes: 1 addition & 1 deletion config/xsl/diffreport/sections/web-vitals.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<xsl:attribute name="id">sortByName</xsl:attribute>
Action Name
<br/>
<input class="filter" placeholder="Enter filter substrings" title=""/>
<input class="filter" placeholder="Enter filter substrings" title="" data-filter-id="filterByName" data-col-index="0"/>
<button class="clear-input" type="clear" title="Click to clear">&#x2715;</button>
</th>
<th class="table-sortable:numeric" id="sortByFCP">First Contentful Paint<br/>(FCP)</th>
Expand Down
4 changes: 2 additions & 2 deletions config/xsl/diffreport/util/timer-section.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@
<table class="c-tab-content table-autosort:0">
<thead>
<tr>
<th rowspan="2" class="table-sortable:alphanumeric colgroup1">
<th rowspan="2" class="table-sortable:alphanumeric colgroup1" id="sortByBandwidthName">
<xsl:value-of select="$tableRowHeader"/>
<br/>
<input class="filter" placeholder="Enter filter substrings" title=""/>
<input class="filter" placeholder="Enter filter substrings" title="" data-filter-id="filterByName" data-col-index="0"/>
<button class="clear-input" type="clear" title="Click to clear">&#x2715;</button>
</th>
<th colspan="8">Bytes Sent</th>
Expand Down
2 changes: 1 addition & 1 deletion config/xsl/diffreport/util/timer-table.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<xsl:attribute name="id">sortByName</xsl:attribute>
<xsl:value-of select="$tableRowHeader"/>
<br/>
<input class="filter" placeholder="Enter filter substrings" title=""/>
<input class="filter" placeholder="Enter filter substrings" title="" data-filter-id="filterByName" data-col-index="0"/>
<button class="clear-input" type="clear" title="Click to clear">&#x2715;</button>
</th>
<xsl:choose>
Expand Down
2 changes: 1 addition & 1 deletion config/xsl/loadreport/sections/agents.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<th rowspan="2" class="table-sortable:alphanumeric colgroup1" id="sortByName">
Agent Name
<br/>
<input class="filter" placeholder="Enter filter substrings" title=""/>
<input class="filter" placeholder="Enter filter substrings" title="" data-filter-id="filterByName" data-col-index="0"/>
<button class="clear-input" type="clear" title="Click to clear">&#x2715;</button>
</th>
<th colspan="3">Transactions</th>
Expand Down
2 changes: 1 addition & 1 deletion config/xsl/loadreport/sections/custom-values.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<th rowspan="2" class="table-sortable:alphanumeric colgroup1" id="sortByName">
Value Name
<br/>
<input class="filter" placeholder="Enter filter substrings" title=""/>
<input class="filter" placeholder="Enter filter substrings" title="" data-filter-id="filterByName" data-col-index="0"/>
<button class="clear-input" type="clear" title="Click to clear">&#x2715;</button>
</th>
<th colspan="4">Count</th>
Expand Down
2 changes: 1 addition & 1 deletion config/xsl/loadreport/sections/web-vitals.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<th class="table-sortable:alphanumeric" id="sortByName">
Action Name
<br/>
<input class="filter" placeholder="Enter filter substrings" title=""/>
<input class="filter" placeholder="Enter filter substrings" title="" data-filter-id="filterByName" data-col-index="0"/>
<button class="clear-input" type="clear" title="Click to clear">&#x2715;</button>
</th>
<th class="table-sortable:numeric" id="sortByFCP">First Contentful Paint<br/>(FCP)</th>
Expand Down
2 changes: 1 addition & 1 deletion config/xsl/loadreport/util/slowest-requests-table.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<xsl:text>Request Name</xsl:text>
<br/>
<form>
<input class="filter" placeholder="Enter filter substrings" title=""/>
<input class="filter" placeholder="Enter filter substrings" title="" data-filter-id="filterByName" data-col-index="0"/>
<button class="clear-input" type="clear" title="Click to clear">&#x2715;</button>
</form>
</th>
Expand Down
24 changes: 19 additions & 5 deletions config/xsl/loadreport/util/timer-section.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<xsl:param name="runtimeIntervalsNode"/>
<xsl:param name="type"/>

<div class="charts">
<div class="charts overview">
<xsl:for-each select="$summaryElement">
<!-- There is only one matching node. -->
<xsl:call-template name="timer-chart">
Expand Down Expand Up @@ -52,10 +52,17 @@
<th rowspan="2" class="table-sortable:alphanumeric colgroup1" id="sortByBandwidthName">
<xsl:value-of select="$tableRowHeader"/>
<br/>
<input class="filter" placeholder="Enter filter substrings" title=""/>
<input class="filter" placeholder="Enter filter substrings" title="" data-filter-id="filterByName" data-col-index="0"/>
<button class="clear-input" type="clear" title="Click to clear">&#x2715;</button>
</th>
<th rowspan="2" class="table-sortable:alphanumeric colgroup1" id="sortByLabels">Labels</th>
<th rowspan="2" class="table-sortable:alphanumeric colgroup1" id="sortByLabels">
<xsl:text>Labels</xsl:text>
<br/>
<form>
<input class="filter" placeholder="Enter filter substrings" title="" data-filter-id="filterByLabels" data-col-index="1"/>
<button class="clear-input" type="clear" title="Click to clear">&#x2715;</button>
</form>
</th>
<th colspan="8">Bytes Sent</th>
<th colspan="8" class="colgroup1">Bytes Received</th>
</tr>
Expand Down Expand Up @@ -274,10 +281,17 @@
<th rowspan="2" class="table-sortable:alphanumeric colgroup1" id="sortByNetworkName">
<xsl:value-of select="$tableRowHeader"/>
<br/>
<input class="filter" placeholder="Enter filter substrings" title=""/>
<input class="filter" placeholder="Enter filter substrings" title="" data-filter-id="filterByName" data-col-index="0"/>
<button class="clear-input" type="clear" title="Click to clear">&#x2715;</button>
</th>
<th rowspan="2" class="table-sortable:alphanumeric colgroup1" id="sortByLabels">Labels</th>
<th rowspan="2" class="table-sortable:alphanumeric colgroup1" id="sortByLabels">
<xsl:text>Labels</xsl:text>
<br/>
<form>
<input class="filter" placeholder="Enter filter substrings" title="" data-filter-id="filterByLabels" data-col-index="1"/>
<button class="clear-input" type="clear" title="Click to clear">&#x2715;</button>
</form>
</th>
<th colspan="3" >DNS Time [ms]</th>
<th colspan="3" class="colgroup1">Connect Time [ms]</th>
<th colspan="3">Send Time [ms]</th>
Expand Down
Loading