Add status bar to Test Run page

[asankov]

No description provided.

[coveralls]

Coverage remained the same at 75.496% when pulling ab774d1 on asankov:test-run-patternfly-status-bar into 1719d29 on kiwitcms:refactor_testrun_ui.

[atodorov]

I don't like rendering HTML inside JavaScript. The HTML template can render all status elements with their labels and count 0. It can also add data attribute or ID so these elements are easier to select via JS and then renderCountPerStatusList will only update the counts foe every list item, possibly only for 1 li based on the status ID (can be used later when updating TEs).

[asankov]

'HTML in JS' is used in ReactJS and is becoming quite standard thing, so it is not something weird. Also, it is the better approach for something that is going to be changed dynamically (e.g. when a button is clicked, or an event is triggered). Because you just delete the whole thing and render it again. Also, the new JS template strings makes in easy and neat.

IMO this is way better than selecting multiple elements and editing them one by one, because:

1. DOM operations are slow. Deleting part of the DOM and inserting something new in its place is faster than selecting 10 elements by ID and changing them value one by one, because these are 10 DOM manipulations (vs 1 in the other approach)(and this is the way React works - it has a virtual DOM in memory, and even if you edit 10 elements, under the hood it groups them and in the end applies the changes as 1 DOM manipulation).
2. It's one thing to select elements by IDs like status-button or status-bar and another to have to build IDs once in the HTML templates and another time in the JS. It's just ugly and will quickly get out of hand.

[atodorov]

HTML in JS' is used in ReactJS and is becoming quite standard thing

this is not a reason to use something.

1. DOM operations are slow.

with all the status li's rendered via the templating layer you are not deleting DOM elements, just updating their innerHTML attribute to the correct number value. This is something that is done anyway upon update of test executions to refresh the UI. Much better to have a minimalist 1 line update (or a small function if you like) and use it in several places instead of rendering

tags whenever this card needs to be updated.

2. It's one thing to select elements by IDs like status-button or status-bar and ...

$(`#status-${statusCount[status].id`).html(count)

That's hardly getting out of hand and definitely less ugly than building the HTML contents in 2 different pieces of code.

Also with the current implementation the labels with value 0 are not clickable which introduces unnecessary login on the FE. All of them should be exactly the same minus the text content.

[asankov]

this is not a reason to use something.

sure, it isn't. but 'I don't like something' isn't one as well as that is subjective. My point was that this is not something weird, nor something custom that only we are doing.

definitely less ugly than building the HTML

that is subjective. my opinion differs.

Much better to have a minimalist 1 line update (or a small function if you like) and use it in several places instead of rendering

again, this is subjection. I don't see anything bad with rendering.

Also with the current implementation the labels with value 0 are not clickable which introduces unnecessary login on the FE

I don't see how this concern this discussion. if the behavior should be different, it can be achieved both ways.

[asankov]

The HTML template can render all status elements with their labels and count 0.

No, it can't, because since 6189ad4
the additional data that was sent by the view is gone.

Also, this is not new code, it's just copied from 1dd0dac#diff-f1f966298171ba7b8ab6c743bd88e634R738-R745

So, changing the approach would make the things more ugly in both the template, js, and the already simplified view.

[codecov]

Codecov Report

Merging #1436 into refactor_testrun_ui will not change coverage by %.
The diff coverage is n/a.

@@                 Coverage Diff                  @@
##           refactor_testrun_ui    #1436   +/-   ##
====================================================
  Coverage                76.11%   76.11%           
====================================================
  Files                      122      122           
  Lines                     4384     4384           
  Branches                   510      510           
====================================================
  Hits                      3337     3337           
  Misses                     875      875           
  Partials                   172      172           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c24008e...1618480. Read the comment docs.

[asankov]

@atodorov any more comments on this?

[atodorov]

#1436 (comment)