How can I customize UI?

Archive Rancher 1.x
1

Hi, I want to run Rancher as a middleware for an education institution digital platform. I would like to customize UI to hack some features (add external links, customize buttons and appearance of the interface) but as long as I can guess through Rancher infomation assets are remotely hosted in a Rancher owned CDN. So, how could I modify Rancher (or Cattle, I am not really sure what I should execute in my server/machine) in order to have a custom UI??
Sorry for my lack or knoledge about Rancher architecture…

2

I guess is a matter of building UI (as https://github.com/rancher/ui/releases) and point to a custom URL when unpacking UI when creating docker image.
For example, I could create a custom Rancher Server image modifying https://github.com/rancher/rancher/blob/master/server/Dockerfile. Am I right?

3

In early releases the UI was loaded off our remote CDN. As of several months ago a copy is packaged into each rancher/server release and that copy is loaded by default. Repackaging all of that is an option, but there is still a setting to load it from a remote URL instead. We use that for testing, and our CI builds a copy at https://relases.rancher.com/ui/latest on every commit to master.

So you can:

  • Make your changes
  • Build the UI with ./scripts/build-static -l -c 'yourserver.com' (the flag is for a “latest” build, which sets up URLs so that it’s expecting to be served remotely instead of local),
  • Upload dist/static/latest to a web server (you can rename the “latest” part with -v)
  • Change the http://your-rancher:8080/v1/settings/api.ui.index from “local” to //yourserver.com/latest (if your Rancher is behind a SSL proxy the UI will need to be served SSL too)

I would suggest writing all your changes as an ember-cli addon and then just adding the one line to package.json to load it, rather than forking the UI and fighting to keep it up to date. If there are generally useful changes to rancher/ui that would make customizing the bits you want easier we would likely be amenable to merging PRs for that.

1 Like
4

Absolutly.

Thanks a lot for the info. I think changes could also be interesting (at least those not related to a strictly learning environment) to the rest of the community.

5

I am trying to install the addon, but I get an error:

Registry returned 404 for GET on https://registry.npmjs.org/ui-example-addon-machine

How can I install the example addon in the original UI?

UPDATE: I tried http://benlimmer.com/2015/04/22/installing-an-ember-addon-from-github/ but still get error:

BroccoliMergeTrees: Expected Broccoli node, got undefined for inputNodes[0]
6

I don’t think I ever actually published it to npm, you can clone it locally and then npm link it.

We are currently changing this up a bit though so you can write a machine driver UI and we’ll load it dynamically from the Machine Drivers settings screen (without rebuilding & hosting the whole UI yourself), so this will become outdated. Will update when that’s available.

7

I just was trying to understand how ember-cli addons work.

I discovered that installing the addon from github did not add dependencies to package.json, so I added them manually, but…

Now I get: The broccoli plugin was instantiated at: undefined
and still cannot test the addon…

8

I follow the steps to point my index.html to http://fricolab.com/latest/index.html changing http://your-rancher:8080/v1/settings/api.ui.index from “local” to //fricolab.com/latest but… I get:

HTTP ERROR 404 when trying to access any static asset. Any clue? @vincent

If I edit index.html inside Rancher container (/usr/share/cattle/war/index.html) and set assets URL to //fricolab.com/latest/assets… I can get my assets to load but I get:

%failWhalePage.header%%failWhalePage.reloadButton%%failWhalePage.logoutButton%

and my-rancher:8080/fail URL in my browser

9

Hi, all

Based on your discussion, If I want to add some links to navigation bar (drop down menu), how can I do it? These links are used to open external urls. Thanks.

1 Like