Bug 1538452

Summary: [trello 9oaUh8xP] Customizing the Web console with js script does not take effect on most browsers
Product: OpenShift Container Platform Reporter: shahan <hasha>
Component: Management ConsoleAssignee: Samuel Padgett <spadgett>
Status: CLOSED CURRENTRELEASE QA Contact: Yadan Pei <yapei>
Severity: medium Docs Contact:
Priority: medium    
Version: 3.9.0CC: aos-bugs, hasha, jforrest, jokerman, mmccomas, spadgett, yapei
Target Milestone: ---Keywords: Reopened
Target Release: 3.9.0   
Hardware: Unspecified   
OS: Unspecified   
Whiteboard:
Fixed In Version: Doc Type: If docs needed, set a value
Doc Text:
Story Points: ---
Clone Of: Environment:
Last Closed: 2018-02-01 03:00:31 UTC Type: Bug
Regression: --- Mount Type: ---
Documentation: --- CRM:
Verified Versions: Category: ---
oVirt Team: --- RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: --- Target Upstream Version:
Embargoed:

Description shahan 2018-01-25 06:48:24 UTC
Description of problem:
    Customizing the Web console with js script does not take effect on most browsers, eg, FF57, chrome 63, IE11, Edge 25. Only takes effect on FF45.2.0
 
 
Version-Release number of selected component (if applicable):
  v3.9.0-0.23.0

How reproducible:
  Always


Steps to Reproduce:

1.Update config map in project openshift-web-console
  $oc edit cm webconsole-config -n openshift-web-console
  Edit webconsole-config by adding script url as follow:

  scriptURLs:
  - https://raw.githubusercontent.com/SSshahan/v3-testfiles/master/application-launcher.js
2. Delete the web console pod under openshift-web-console project
3. Login web console and check the top navigation

Actual results:
 This change does not take effect, there is no application launcher as a grid with icons in the top navigation on the web console.

Expected results:
should work well

Additional info:
1. ‘stylesheetURLs’ field in configmap also does not take effect. Available stylesheet URL: https://github.com/yanpzhan/v3-testfiles/blob/master/extensions/ext.css
2.  Changes for these two fields seems only works on FF45.

Comment 1 Samuel Padgett 2018-01-25 12:37:32 UTC
Two issues here. One is a problem with your extension.

1. The content-type from the file hosted on raw.githubusercontent.com is wrong.

curl -v https://raw.githubusercontent.com/SSshahan/v3-testfiles/master/application-launcher.js 2>&1 | fgrep Content-Type
< X-Content-Type-Options: nosniff
< Content-Type: text/plain; charset=utf-8

The content type in the response header must be text/javascript to run as a script on the page. As a security measure, we set `X-Content-Type-Options: nosniff` to prevent treating other content types as scripts.

Use `rawgit.com` instead for your test, which sets the correct content type.

https://rawgit.com/SSshahan/v3-testfiles/master/application-launcher.js

curl -v https://rawgit.com/SSshahan/v3-testfiles/master/application-launcher.js 2>&1 | fgrep -i Content-Type
< content-type: application/javascript;charset=utf-8
< x-content-type-options: nosniff

2. There is a possible caching issue since we have an ETag on index.html that doesn't change when an extension is added. This is only a problem in 3.9.

Comment 2 Samuel Padgett 2018-01-25 23:53:44 UTC
The caching problem is fixed in:

https://github.com/openshift/origin-web-console-server/pull/28

Comment 3 Samuel Padgett 2018-01-26 16:55:25 UTC
The caching problem is fixed now, but please note my comment above about the content-type being wrong when served from raw.githubusercontent.com

Comment 5 Yadan Pei 2018-01-29 06:32:32 UTC
Checked on v3.9.0-0.31.0 with correct js file URL in comment 1, now the customization takes effect and works as expected.

Move to VERIFIED

Comment 6 shahan 2018-01-31 08:25:46 UTC
Reproduced this issue again in latest OCP version:
 
OpenShift Master: v3.9.0-0.33.0 
Kubernetes Master: v1.9.1+a0ce1bc657 
OpenShift Web Console: v3.9.0-0.34.0 

seems the extension of application launcher could work occasionally in FF(v58), but for left navigation menus extension, always has this issue. Actually, I'm not sure if it's correct js script for this kind extension. Please help to check: 

https://rawgit.com/SSshahan/v3-testfiles/master/projectleftnav.js

Comment 7 shahan 2018-01-31 08:45:08 UTC
After double checking, this reproduced issue caused by the caching problem, when using one env which not caching the index.html, it will take effect.

Comment 8 Samuel Padgett 2018-01-31 14:07:04 UTC
I can't reproduce on FF 57 or latest Chrome. Just confirming:

1. You deleted the console pod to pick up the changes.
2. You refreshed the page in the browser. You will need to refresh the page to see the changes.

If you still see the problem, can you check the index.html page source to see if your script is included? Also please check the network tab, refresh the page, and see what the HTTP response is for /console/ and your extension script if it's there.

> After double checking, this reproduced issue caused by the caching problem, when using one env which not caching the index.html, it will take effect.

I'm not sure what this means. Can you explain?

Comment 9 shahan 2018-02-01 03:00:31 UTC
Sorry, it works again today, not sure why it did not take effect yesterday. Same Env, same operation, and same scripts.. Sorry for the trouble. Will close this bug, thanks!