Rancher UI RKE1 Config page not rendering correctly

firefhtr commented 3 months ago

Setup

Rancher version: 2.8.4
Rancher UI Extensions: OS Management, Virt Mgmt
Browser type & version: Chrome for MacOS 125.0.6422.142, Firefox 126.0.1 and Safari 17.5

Describe the bug When trying to update/change the configuration of RKE1 cluster, the page does not render properly. To Reproduce Create an RKE1 cluster, then go back in to change configurations Result The page does not render properly, although is functional

Expected Result The page to render as it did before in 2.8.3 Screenshots Additional context Logged in as both admin user and as a restricted admin user

jtrewartha commented 3 months ago

I have had the same behavior in Rancher 2.8.2 ever since I installed it, multiple chrome versions have been updated since, and no extensions are installed. Chrome version 124.0.6367.93 (Official Build) (arm64)

Reloading Iframe does not change behavior. Consistent in incognito.

Same behavior in firefox 126.0.1

Here are the developer tab errors

momesgin commented 2 months ago

It randomly happened in my local env(2.9-head):

momesgin commented 2 months ago

places where we should look at,

Dashboard: shell/edit/provisioning.cattle.io.cluster/index.vue => this.loadStylesheet(cssUrl, ...

UI: lib/shared/addon/components/cru-cluster/component.js => loadStylesheet(cssUrl, ... lib/shared/addon/utils/load-script.js => document.getElementsByTagName('HEAD')[0].appendChild(link);

nwmac commented 2 months ago

The issue appears to be network issues - the css resources are not loading.

This does not appear to be a regression, since this is reported in earlier versions than 2.9.

@gaktive I'd suggest we push this to 2.9.next1

nwmac commented 2 months ago

I tried myself on a fresh 2.9 system to reproduce this with a newly deployed downstream RKE1 cluster, but could not, so may be hard to reproduce.

nwmac commented 2 weeks ago

.. also note the example from Mo is related to a node drivers with custom CSS - there may be a backend issue around that.

richard-cox commented 2 weeks ago

Internal data points

Point 1
- HAR file contains /assets/A.css?2.8-dev GET Finished (no status code).
- Console contains
- /g/clusters/add/launch/amazoneksv2:1 Refused to apply style from '/assets/A.css?2.8-dev' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
- /g/clusters/add/launch/import?importProvider=eks:1 Refused to apply style from '/assets/A.css?2.8-dev' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
- bonus error
```
vue.min.js:11 TypeError: Cannot read properties of undefined (reading 'startsWith')
at b (color.js:126:13)
at a.setColor (IconOrSvg.vue:102:1)
at a.created (IconOrSvg.vue:60:1)
at pn (vue.min.js:11:21987)
at Ht (vue.min.js:11:18221)
at t._init (vue.min.js:11:43012)
at new a (vue.min.js:11:40283)
at vue.min.js:11:33227
at init (vue.min.js:11:33072)
at vue.min.js:11:67703
gn @ vue.min.js:11
```

In a 2.9 build or or 2.8.6 i couldn't see A.css load

couldn't find it in ls -la /usr/share/rancher/ui/assets | grep .css,

bash-4.4# ls -la /usr/share/rancher/ui/assets/ | grep .css
-rw-r--r-- 1 1001  127   219628 Jul 30 19:11 ui-dark.css
-rw-r--r-- 1 1001  127   219858 Jul 30 19:11 ui-dark.rtl.css
-rw-r--r-- 1 1001  127   218590 Jul 30 19:11 ui-light.css
-rw-r--r-- 1 1001  127   218820 Jul 30 19:11 ui-light.rtl.css
-rw-r--r-- 1 1001  127        0 Jul 30 19:11 ui.css
-rw-r--r-- 1 1001  127        0 Jul 30 19:11 ui.rtl.css
-rw-r--r-- 1 1001  127    38789 Jul 30 19:11 vendor.css
-rw-r--r-- 1 1001  127    38846 Jul 30 19:11 vendor.rtl.css

or harcoded in https://github.com/rancher/rancher/blob/4e2703bb4f157be02dbc2f2828d99a5b1c61bb73/pkg/ui/routes.go#L32
or referenced in https://github.com/rancher/ui/blob/af274e06f4152c3b581348cb485169171cdf514a/ember-cli-build.js#L46 / https://github.com/rancher/ui/blob/af274e06f4152c3b581348cb485169171cdf514a/ember-cli-build.js#L77

HoustonDad commented 2 days ago

I am also seeing this, in multiple places in the Rancher UI, v2.8.5 from Community

Cluster Management -> Create -> RKE1 Both Harvester and Custom driver pages fails to load the CSS. I get 404s in the browser tools when hitting '/assets/A.css?2.8-dev.

jtrewartha commented 2 days ago

I have consistently had this problem since 2.8.2 on any browser / computer I attempt to use for cluster management. Cluster is 120 days old and still consistently showing the bad behavior. I tried reinstalling rancher 2-3 times when the cluster was first built to get rid of the problem and re-provisioned the node but no change in the UI behavior.

richard-cox commented 2 days ago

We have had real trouble reproducing this and therefore need as much information as possible fro comments.

Please include

Rancher version
Rancher UI Extensions
Browser type, version and installed extensions
Network Information (anything between browser and Rancher, for example corporate proxy or load balancers)
Steps to reproduce, specifically what page and how the user reached it.
Does the error happen when refreshing on the affected page?

If you are internal to SUSE, please supply a HAR file to our UI channel or DM me.

HoustonDad commented 2 days ago

Details from my homelab failure:

Rancher version v2.8.5
Rancher UI Extensions I have the UI Extensions / ui-plugin installed. I DID try to install Elemental, but it never showed up in the Extensions area for enabling / usage. Not sure if that matters here?

Browser type, version and installed extensions I tried Chrome and Firefox on two different systems, same problems. Also tried Private Browsers, same issues. Only extension on FF is 1Pass I also tried Safari (first time I've used it on this laptop), same issue. No extenstions

Network Information (anything between browser and Rancher, for example corporate proxy or load balancers) No 'weird' network shenanigans on my side. This rancher is hosted on 4xRKE2 nodes (3 servers, 1 worker) running in Proxmox on Ubuntu 22.

Steps to reproduce, specifically what page and how the user reached it.

Installed v2.8.5. Spun up clusters, hooked up Harvester. Tried to install UI extensions
Cluster Management -> Create -> RKE1 Both Harvester and Custom driver pages fails to load the CSS. I get 404s in the browser tools when hitting '/assets/A.css?2.8-dev.

Does the error happen when refreshing on the affected page? Every time, hard refresh or not (ctrl+shift+r)

rancher / dashboard

Rancher UI RKE1 Config page not rendering correctly #11193