Project

General

Profile

action #162488

Updated by livdywan 6 months ago

## Observation 
 From https://suse.slack.com/archives/C02CANHLANP/p1718781077442299 . jpupava observed that the highlighting of dependencies in cluster tests that is shown with red and blue color while hovering over the "merge" icon on /tests and /tests/overview does not work anymore after the bootstrap 4->5 upgrade in #159408. Probably "highlight_parent" and "highlight_child" classes are still added to the table rows but not correctly styled anymore. 

 ## Steps to reproduce 
 * Go to https://openqa.opensuse.org/tests/overview?arch=&flavor=&machine=&test=&modules=&module_re=&group_glob=&not_group_glob=&comment=&distri=opensuse&groupid=1&version=Tumbleweed# , hover over the "merge" icons of probably dependendant jobs, observe that there is no more blue+red highlighting of other jobs showing up anymore 

 ## Expected result 
 * "last good": 
   * "cursor over qam-mail-thunderbird (child)" ![cursor over qam-mail-thunderbird (child)](https://progress.opensuse.org/attachments/download/17885/parent.png) 
   * "cursor over qam-regression-installation-SLED (parent)" ![cursor over qam-regression-installation-SLED (parent)            	 ](https://progress.opensuse.org/attachments/download/17888/children.png) 

 ## Suggestions 
 * Take a look how classes "highlight_parent" and "highlight_child" are applied in the HTML template files and look for corresponding CSS matches 
 * Consider adding/extending an automated test for this (e.g. using a JavaScript API to check the effective styling), see https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle 

 ``` 
 $ git grep highlight_parent 
 assets/javascripts/overview.js:    changeClassOfDependencyJob(parentData, 'highlight_parent', true); 
 assets/javascripts/overview.js:    changeClassOfDependencyJob(parentData, 'highlight_parent', false); 
 assets/javascripts/tests.js:    addClassToArray($(this).data('parents'), 'highlight_parent'); 
 assets/javascripts/tests.js:    removeClassFromArray($(this).data('parents'), 'highlight_parent'); 
 assets/stylesheets/dashboard.scss:.highlight_parent { 
 t/ui/01-list.t:      is(scalar @{$driver->find_elements('#results #job_99937.highlight_parent')}, 0, 'parent not highlighted'); 
 t/ui/01-list.t:is(scalar @{$driver->find_elements('#results #job_99937.highlight_parent')}, 1, 'parent highlighted'); 
 t/ui/10-tests_overview.t:      my @parent_deps = $driver->find_elements('tr.highlight_parent'); 
 ``` 
 * Consider running the "last good" version of openQA and check in browser developer tools to figure out how the stuff is applied, like matching CSS and such and then compare to the new version

Back