Bug 1555050 - Slow Dashboard re-paint on Chrome
Summary: Slow Dashboard re-paint on Chrome
Keywords:
Status: CLOSED CURRENTRELEASE
Alias: None
Product: ovirt-engine-dashboard
Classification: oVirt
Component: Core
Version: ---
Hardware: Unspecified
OS: Unspecified
high
medium
Target Milestone: ovirt-4.2.3
: ---
Assignee: Scott Dickerson
QA Contact: Pavel Novotny
URL:
Whiteboard:
Depends On:
Blocks:
TreeView+ depends on / blocked
 
Reported: 2018-03-13 20:46 UTC by mlehrer
Modified: 2018-05-10 06:30 UTC (History)
5 users (show)

Fixed In Version:
Clone Of:
Environment:
Last Closed: 2018-05-10 06:30:35 UTC
oVirt Team: UX
Embargoed:
rule-engine: ovirt-4.2+
sdickers: devel_ack+
pnovotny: testing_ack+


Attachments (Terms of Use)
image of network for browsers chrome/firefox (155.11 KB, application/zip)
2018-03-13 20:46 UTC, mlehrer
no flags Details
chrome has 304 now (182.50 KB, image/png)
2018-04-13 15:49 UTC, Greg Sheremeta
no flags Details
Chromium - still HTTP 200 for CSSs (131.60 KB, image/png)
2018-04-19 18:11 UTC, Pavel Novotny
no flags Details
Chromium - Dashboard CSS now cached (57.84 KB, image/png)
2018-04-20 08:45 UTC, Pavel Novotny
no flags Details


Links
System ID Private Priority Status Summary Last Updated
oVirt gerrit 90200 0 ovirt-engine-dashboard-1.2 MERGED Update set of fonts webpack embeds in CSS 2018-04-13 15:50:48 UTC

Description mlehrer 2018-03-13 20:46:24 UTC
Created attachment 1407721 [details]
image of network for browsers chrome/firefox

Description of problem:

After log on, browse to hosts, or vms or anything thats not the dashboard, then re-click on Dashboard tab.  In Firefox it will take 2s, and on Chrome it takes 8-10s.

Suspect:
Same assets that are cached in Firefox, are not cached in Chrome, for example the CSS (webadmin/plugin/dashboard/css/main-tab.d3769419.css)is not cached in chrome shows a "white background" instead of a swirlie because it takes time to download the 1.8 megabyte file of the css on chrome, while on FF its cached. Also saw some other png files with same issue.

On Chrome the CSS file blocks the repaint and must be cached as it is in firefox.
Please ensure caching is being enforced as expected on Chrome.

The above assumes a returning/prime cache user.


#Env
Heavily populated system with hundreds of hosts, and 2K+ vms.
I browse to different parts of the webadmin then return back to the dashboard.  
Clicking the "Dashboard" (left side banner) takes 2s in Firefox, and in Chrome takes 8-10s to paint.

#How this effects customers
Slow loading UI gives a false sense of poor engine health, and poor user experience.  Additionally not all users are 1 -2 hops away from their server, currently each browse to "Dashboards" will require the downloading of 1.8mb for Chrome users.


Version-Release number of selected component (if applicable):
4.2.2.2-0.1.el7


How reproducible:
Very

Steps to Reproduce:
1. Log in to web admin UI
2. Click any non-dashboard tab
3. Click dashboard tab

Actual results:
takes 2s in Firefox, and in Chrome takes 8-10s.

Expected results:
Chrome to have similiar response time as Firefox, no white page flicker to swirlie, and assets to be cached as in firefox.

Additional info:
attached zip of images should show difference; I dont think a har dump is necessary if you need it then let me know.

Comment 1 Yaniv Kaul 2018-03-14 07:23:50 UTC
Versions of Chrome and Firefox?

Comment 2 mlehrer 2018-03-14 10:28:49 UTC
(In reply to Yaniv Kaul from comment #1)
> Versions of Chrome and Firefox?

Chrome 63.0.3239.132
Firefox Quantom 57.0.1

Comment 3 Greg Sheremeta 2018-03-14 10:45:23 UTC
"each browse to Dashboards will require the downloading of 1.8mb for Chrome users"

Sounds like the caching servlet isn't behaving as I'd expect.

Comment 4 Greg Sheremeta 2018-04-10 20:45:23 UTC
s/caching servlet/caching filter/

Yes, the filter regular expression is just missing dashboard resources.

2018-04-10 14:24:22,522-04 INFO  [org.ovirt.engine.core.utils.servlet.CachingFilter] (default task-24) [] doFilter [sending no-cache] for http://localhost:8080/ovirt-engine/webadmin/plugin/dashboard/js/main-tab.f388eaaf.js

Working on a fix now

Comment 5 Scott Dickerson 2018-04-12 21:57:09 UTC
To help reduce the dashboard CSS size for 4.2 (dashboard 1.2), I backported a build change so fewer fonts are embedded in CSS.  Dashboard 1.2 and 1.3 are now aligned on that.  The change will take a 1.2 dashboard main-tab.*.css file from 2.8M to 1.5M.

Comment 6 Greg Sheremeta 2018-04-13 14:56:51 UTC
Scott, when I do a local build, the CSS file is only 870KB served. AND... now Chrome is properly respecting the headers and 304'ing it instead of re-getting / 200.

So, I think we're fixed.

Comment 7 Greg Sheremeta 2018-04-13 15:49:42 UTC
Created attachment 1421430 [details]
chrome has 304 now

Comment 8 Greg Sheremeta 2018-04-18 12:59:12 UTC
mlehrer can you test with this new release?

Comment 9 Pavel Novotny 2018-04-19 18:10:36 UTC
FailedQA in 
ovirt-engine-4.2.3.2-0.1.el7.noarch
ovirt-engine-dashboard-1.2.3-1.el7ev.noarch

I am still getting HTTP 200 in Chromium 65.0.
See attached screenshot.

Steps:
1. Log into Webadmin and wait until Dashboard is loaded.
2. Go to Compute -> Virtual Machines.
3. Go back to Dasboard.

In step 1, main-tab.8b2085f7.css is loaded (HTTP 200).
But in Step 3. it's loaded again with HTTP 200 instead of 304.

In Firefox Quantum 60.0b13, step 3 returns HTTP 304.

Regarding the file size size, main-tab.8b2085f7.css has 1368KB.
Firefox reports 1.33MB loaded and Chromium reports 789KB.

Keeping the needinfo on Mordechai in case he wants to re-test this on his environment.

Comment 10 Pavel Novotny 2018-04-19 18:11:39 UTC
Created attachment 1424239 [details]
Chromium - still HTTP 200 for CSSs

Comment 11 Greg Sheremeta 2018-04-19 19:03:39 UTC
@Pavel, are you using a test setup with a valid cert, or is chrome complaining about a self-signed cert, expired cert, etc? I think it needs to be green in the URL bar. If it was red, please make it green and re-test :)


"""
This is a known issue with Chrome browser.  It does not cache responses if the HTTPS connection is using an invalid Certificate.  See this bug report for details:
https://bugs.chromium.org/p/chromium/issues/detail?id=110649#c8
"""

"""
Comment 8 by rvargas, Feb 7 2012
Status: WontFix
The rule is actually quite simple: any error with the certificate means the page will not be cached.
"""

Comment 12 Pavel Novotny 2018-04-20 08:42:41 UTC
Riiight, I forgot about this cool Chrome feature (bug).
I am using self-signed cert.
After adding the engine CA to trusted, caching works as expected,
the main-tab.*.css is cached properly.
Attaching a new screenshot and replacing my previous one.

Verified.
ovirt-engine-4.2.3.2-0.1.el7.noarch
ovirt-engine-dashboard-1.2.3-1.el7ev.noarch

Comment 13 Pavel Novotny 2018-04-20 08:45:15 UTC
Created attachment 1424435 [details]
Chromium - Dashboard CSS now cached

Comment 14 Sandro Bonazzola 2018-05-10 06:30:35 UTC
This bugzilla is included in oVirt 4.2.3 release, published on May 4th 2018.

Since the problem described in this bug report should be
resolved in oVirt 4.2.3 release, it has been closed with a resolution of CURRENT RELEASE.

If the solution does not work for you, please open a new bug report.


Note You need to log in before you can comment on or make changes to this bug.