Updating ui components on an appliance

If you want to use a custom ui-components version on the manageiq appliance, this is how you do it.

For simplicity, I'll assume that:

• manageiq is always /var/www/miq/vmdb/ (because it is),
• manageiq-ui-classic is something like /usr/local/lib/ruby/gems/2.3.0/bundler/gems/manageiq-ui-classic-754609f1e578
• ui-components is your custom version, let's say in /tmp/ui-components
• manageiq-ui-service is a copy of service UI - you need to download one to be able to update SUI - let's say /tmp/manageiq-ui-service

Building ui-components

(You can skip this step if you just want to use a specific released version.)

First, the actual ui-components dist files have to be built from the sources.

cd ui-components
yarn
yarn build

You'll get ui-components/dist/, the only important files (when not running the ui-components demo) are dist/js/ui-components.js and dist/css/ui-components.css.

(Should you want to release this, this is already dokumented in a different article on this wiki.)

Making the UIs use these dist files

Now we need to make the ui use the dist files. This has to be done differently for Ops and for Service UI, and there's really 3 ways to do that: linking, copying and installing a released version.

Use ui-components files via bower/npm link

The package tool really just creates a symlink that makes the repo use a custom directory instead of npm/bower-downloaded package.

cd ui-components
bower link
npm link

cd manageiq-ui-classic
bower link manageiq-ui-components

cd manageiq-ui-service
npm link @manageiq/ui-components

Once this is done, rebuilding ui-components/dist will automatically make it to the right place.

Use ui-components files by replacing the files manually

You can just replace those dist files manually in each repo (but then you have to do it every time).

The locations are:

• ops UI - hammer: manageiq-ui-classic/vendor/assets/bower_components/bower/manageiq-ui-components

• ops UI - gaprindashvili: manageiq-ui-classic/vendor/assets/bower_components/manageiq-ui-components

• ops UI - fine: manageiq/vendor/assets/bower_components/manageiq-ui-components

• service UI - gaprindashvili & hammer: manageiq-ui-service/node_modules/@manageiq/ui-components

• service UI - fine: manageiq-ui-service/node_modules/manageiq-ui-components

Use a released ui-components version

If you just need to use a different version, this should be easy:

Fine:

cd manageiq
bower install manageiq-ui-components@0.0.25

cd manageiq-ui-service
npm install manageiq-ui-components@0.0.25

Gaprindashvili & Hammer:

cd manageiq-ui-classic
bower install manageiq-ui-components@1.0.25

cd manageiq-ui-service
npm install @manageiq/ui-components@1.0.25

(Note that the 0.0.* series is for fine, 1.0.* for gaprindashvili and 1.1.* for hammer.)

Compiling the assets for the UIs

Assuming both ui-classic and ui-service are using a new version now, we just need to compile the UIs so they end up in manageiq.

Ops UI

Ops UI is using bower + the asset pipeline for ui-components, no webpack in the process.

So, once bower_components is updated with the right version, you just have to..

cd manageiq/
bundle exec rake assets:precompile # Or evm:compile_assets
bundle exec rake evm:restart

(The files ends up as a part of manageiq/public/assets/application-$HASH.js and manageiq/public/assets/application-$HASH.css.)

Service UI

Service UI is using yarn + webpack to build itself....

cd manageiq-ui-service/
yarn run build

This will output the files to ../manageiq/public/ui/service (the right files are (under that dir) /js/app-$HASH.js, /css/app-$HASH.css and /index.html) .. which needs to end up in manageiq/public/ui/service. (Meaning if your manageiq and manageqiq-ui-service exist under the same parent dir, just yarn run build will work. Otherwise it will create an otherwise empty ../manageiq which needs to merged with the right one.)