Menu Plugins for External Sites on CFME 4.1

introduction

A long time ago, we wrote up some instructions on how to add extra menu items to CloudForms. With the changes to the UI in 4.1 and everything going on in Patternfly, those instructions don't work any longer, so here is an updated version. The old post did go into some troubleshooting details that this post won't, so it may still pay off to review it.

what we're after

In this post we are going to keep it simple. We're going to create one tab, or section, name it External, and put one item in it. That will be a link to the Red Hat Customer Portal. We'll also add a little image and talk about tab placement.

the code

The first thing we'll need to do is place some config files in

/var/www/miq/vmdb/product/menubar

That's where the code is going to look for our additions.

We need to create a section file and an item file.

A really convenient reference for all of this are the Red Hat Insights configuration files, which you'll see as you go through this process. If you run into trouble you can always take a look at those.

First, create the section file. We'll name it external_section.yml:

type: section
name: External
id: external_menu
section_type: big_iframe

Next we need an item file; we'll name it external_item_access.yml:

type: item
name: Access
id: external_access
feature: external_access
rbac:
  feature: external_access
parent: external_menu
href: https://access.redhat.com/
item_type: big_iframe

To reiterate, both of these go in the menubar directory.

Next we will need to create a menu file, we will do this in:

/var/www/miq/vmdb/db/fixtures/miq_product_features

Create a file named menu_external.yml with the following content:

---
:name: External
:description: Access to External Links
:feature_type: node
:parent: everything
:identifier: external
:children:
- :name: Access
  :description: access.redhat.com
  :feature_type: node
  :identifier: external_access

Next we're going to add a few lines to an existing file. Navigate to:

/var/www/miq/vmdb/db/fixtures/miq_product_roles/

There you'll find a file named redhat_access_user_roles.yml. It will look something like this:

---

- :name: EvmRole-super_administrator
  :miq_product_feature_identifiers:
    - redhat_access_insights
    - redhat_access_insights_reports
    - redhat_access_insights_admin
    - redhat_access_insights_rules
    - redhat_access_insights_systems

We need to add our identifiers for our new section and our item(s) here. All the identifiers are listed in one place, the menu_external.yml file we just created. Add the identifiers to the bottom of the file so it looks like this:

---

- :name: EvmRole-super_administrator
  :miq_product_feature_identifiers:
    - redhat_access_insights
    - redhat_access_insights_reports
    - redhat_access_insights_admin
    - redhat_access_insights_rules
    - redhat_access_insights_systems
    - external
    - external_access

Now navigate to:

/var/www/miq/vmdb/config

And open up the file permissions.yml:

---
- :vi
- :compute
- :conf
- :svc
- :clo
- :inf
- :con
- :sto
- :cnt
- :aut
- :opt
- :net
- :set
- :accessInsights
- ems-type:atomic_enterprise
- ems-type:azure
- ems-type:azure_network
- ems-type:ec2
- ems-type:ec2_network
- ems-type:gce
- ems-type:foreman_configuration
- ems-type:foreman_provisioning
- ems-type:openshift_enterprise
- ems-type:openstack
- ems-type:openstack_network
- ems-type:openstack_infra
- ems-type:rhevm
- ems-type:scvmm
- ems-type:vmwarews

This file is very important. These symbols:

- :compute
- :conf
- :svc
- :clo
- :inf
- :con
- :sto
- :cnt
- :aut
- :opt
- :net
- :set

correspond to the tabs that ship with CloudForms (with the exception of the Red Hat Insights tab, which is added the same way we are adding ours today.) Later, when you decide on where you want to place your tab, you'll need this list.

Convert your section identifier to a symbol and add it to this file. In this case, our section identifier is external_menu, so that converts to :external_menu. Follow the syntax in the file and add in our identifier so the new file looks like this:

---
- :vi
- :compute
- :conf
- :svc
- :clo
- :inf
- :con
- :sto
- :cnt
- :aut
- :opt
- :net
- :set
- :accessInsights
- :external_menu
- ems-type:atomic_enterprise
- ems-type:azure
- ems-type:azure_network
- ems-type:ec2
- ems-type:ec2_network
- ems-type:gce
- ems-type:foreman_configuration
- ems-type:foreman_provisioning
- ems-type:openshift_enterprise
- ems-type:openstack
- ems-type:openstack_network
- ems-type:openstack_infra
- ems-type:rhevm
- ems-type:scvmm
- ems-type:vmwarews

At this point we need to clean things up, recompile, and restart the CloudForms appliance. It's a good idea to back things up if you're on anything besides a test appliance, but hopefully that's obvious....

If you know you want to either change to placement of the tab, or add an image, skip these steps and make those changes first to save time.

run the following commands (the vmdb command is an alias for cd /var/www/miq/vmdb and if you didn't already know that...you're welcome.)

# vmdb
# RAILS_ENV=production rake assets:clean  
# RAILS_ENV=production rake assets:precompile  
# systemctl restart evmserverd

If something went wrong, this is where you'll find out. If you end up with nothing but an error screen upon logging in, check production.log for clues. There are some troubleshooting tips in the original post, as stated above that might help if you get stuck here.

At this point we have a menu item with no image at the bottom of the menu. If this is enough for you, we're done. However, if you want to move the tab around, you need to specify that in the section file. An example of this is in the redhat_access_insights_section.yml file, also in the menubar directory. There you can see the line:

before: svc

This is what puts Red Hat Insights before services instead of the default, at the bottom of the page. As already mentioned, a full list of the symbols that denote each tab is in permissions.yml. You can put your tab wherever you want, for this example we are going to leave it at the bottom.

Finally, 4.1 has images on the tabs. This is a nice feature, because it's an option to collapse everything using the little hamburger icon in the top left. This helps to get more out of your screen space. However, if we don't add an image, it will just remain blank. There are some examples of various images being used in the code, and you can see a lot more examples to explore on the Patternfly website. Since we are keeping things easy, we'll just use a plus sign. This gets added to external_section.yml, which should now look like this:

type: section
name: External
id: external_menu
icon: fa fa-plus fa-2x
section_type: big_iframe

Clean, recompile, and restart.

When we log back in, we should be greeted with a new menu item on the bottom that let's us pull the Red Hat Customer Portal right into the CFME UI. Like this:

external_menus_expnded

And since we added our little image, collapsing the menubar looks nice as well:
external_menus_collapsed

That's it. Play around with it. You can add additional sections and add several items to each section, just like the Red Hat Insights example, which is conveniently located on every appliance for your reference.