Customizing the Rancher UI

Rancher 1.x
1

Hi,

I’m having some trouble customizing the Rancher UI. I’ve been following the steps explained here by vincent: How can I customize UI?

I can see any changes I’ve made using “npm start” to test the app successfully (all I did was change the hexadecimal color values in the header to green to test that the changes are working).

When I run “./scripts/build-static -l”, it says I get a successful build, then I upload the dist/static/latest folder to a vm on digital ocean. I’m using nginx to serve the files.

But when i change the http://your-rancher:8080/v1/settings/api.ui.index from local to “http://ipaddress/latest” and reload Rancher, nothing changes in the UI.

I don’t think this step is the problem though, I set up a dummy index.html file in the / directory of the vm to display “hello”. changing the api.ui.index to “http://ipaddress/” successfully shows “hello” when i open up rancher on localhost:8080.

I think the problem is when i run the build script, but I don’t know why it wouldn’t build the changes into the /latest file.

Any help would be much appreciated,

Bobby

2

Hmm, that all sounds right, and that script is how we actually build everything so it sort of has to work :slight_smile: . CI also runs it with -l -u (upload) on every commit to master to keep a copy that works with api.ui.index=https://releases.rancher.com/ui/latest up to date.

  • it’s a bit hard to read because it’s minimized but you can check dist/static/latest/assets/ui-light.css (or dark, whichever you changed) and search for HEADER .top-row, right after that should be the background-color code, see if it’s yours or the normal one (#0075a8 light, rgba(0,117,168,.75) dark).

  • Open up the browser dev tools with like right-click -> Inspect element and check the <head> and make sure the JS and CSS files are all being loaded from your URL. Especially the <link> for ui-light.css, as it’s added by JS after the page loads depending on the theme chosen and not in the original index.html.

  • Download the css file that is being loaded and check the HEADER .top-row in it again… maybe you’re accidentally uploading new copies an extra folder deep into /var/www/html/latest/latest or something similar.

3

BTW once you get that working, I made an example addon that adds a machine driver screen for someone that may help… https://github.com/rancher/ui-example-addon-machine

4

Hi vincent,

I’m looking in the index.html of /latest folder, and I see four references to “//releases.rancher.com/ui/latest/___”

I’m assuming that when the page is loaded, rancher is using the ui stored on releases.rancher.com, and not the ui that was built by the script?

When you say make sure the js and css files are being loaded from my URL, all I would have to do is change the links /assets/vendor.css, /assets/vendor.js, and ui.js to “//myURL/latest/___”?

I can’t find where the link to ui-dark.css is, is that something I have to change before I run the build script?

Thanks,

Bobby

5

Oh by the way,

I’m looking at http://myURL/latest/assets/ui-dark.css from my web browser, and I see:
HEADER .top-row{background-color:#2ecc71;min-height:45px}

So now for sure I know that the changes are being made and uploaded correctly, they’re just not being loaded by rancher.

6

I’m looking at my network connections that happen when I reload the page right now, it does look like vendor.css, vendor.js, and ui.js are successfully being loaded from my web host, but “ui-dark.css?0.90.0” is still being loaded from releases.rancher.com.

Is there a way to set the default path for the ui to my web host instead of releases.rancher.com? or am I thinking about this incorrectly?

7

D’oh, sorry… You also need -c "your.server.or.ip" because the URL gets baked into the build too and the default is our server.

8

I fixed it about minute ago, been typing my response when I saw your post just now haha, anyway:

in the ui.js file in the last few lines it references releases.rancher.ui/latest/ (had to search for it)

So I changed that to “//myURL/latest/”, and then everything worked :smiley:

I’ll definitely use that build argument from now on instead of having to make the changes manually after the build.

Thanks for your help vincent,

bobby