Sort Order Improvements for the Agents table

[val500]

Description

Adds some improvements to the agents table - namely the provisioning streak column. This PR makes the sorting functionality of the table work with this column, first separating by failures/success, then sorting by the streak number. In addition, url parameters were added to persist sorting information on refresh for the agents table. Finally, this column was given the name "Outcome", and a tooltip was added describing this column.

To support this, new functions were added to filter.js - ordering functions were created to differentiate default ordering with provision streak ordering. Also, a new function to get URL parameters and use them to sort the table was also created. Finally, the sortTable function was split into two functions - sortTable and cycleTableSort. sortTable now just sorts a table given an ordering("ascending", "descending", "none"), while cycleTableSort cycles through the ordering states and uses sortTable to apply that ordering.

Resolved issues

Resolves https://warthogs.atlassian.net/browse/CERTTF-396

Documentation

Each new function was given documentation and comments.

Web service API changes

N/A

Tests

N/A

Pictures

No sort applied - note the url

Ascending Sort

Descending Sort

New Tooltip for Column

[jocave]

Excited for this, would you mind including a screenshot(s) in this review so can quickly review UI changes? Thanks

[val500]

Excited for this, would you mind including a screenshot(s) in this review so can quickly review UI changes? Thanks

Attached new images

[mz2]

I'll be annoying and request for a small tweak compared to the acceptance criteria I'd written earlier, now that I see it in action:

I would always start with the failures, and have ascending and descending rather secondarily sort by the numerical value in those groups. It's useful to have a way to highlight the low numbers quickly.

So, ascending:

1 fails
2 fails
3 fails
7 fails
1 successes
2 successes
5 successes

... and descending

7 fails
3 fails
3 fails
1 fails
5 successes
2 successes
1 successes

(with descending the one offered first when you click)

[pedro-avalos]

Hey, great work, I have one comment in regards to the icons. You should add the p-table__cell--icon-placeholder on the th and td elements that have icons; this will make the icon display outside the column

See https://vanillaframework.io/docs/base/tables#icons

Suggested change

	<th aria-sort="none" class="has-overflow" style="width: 80pt" use-outcome-sort id="agentsOutcomeHeader">
	<th aria-sort="none" class="p-table__cell--icon-placeholder has-overflow" style="width: 80pt" use-outcome-sort id="agentsOutcomeHeader">

[pedro-avalos]

The td element seems to be at line 38. I'm not sure how the icon placeholder behavior and the span and tooltip you have will interact with each other.

testflinger/server/src/templates/agents.html

Line 38 in f8f32c3

<td class="has-overflow">