Embedding vCloud Availability Portal into vCloud Director UI

Some time ago I blogged about the possibility to link to vCloud Availability Portal directly from vCloud Director UI (here and here). This was done by inserting custom links into the vCloud Director Flex UI.

vCloud Director 9.x tenant HTML5 UI provides much richer possibilities to embed additional links, pages and full websites. My colleague Kelby Valenti wrote two whitepapers and one blog post how to do so.

Extending VMware vCloud Director User Interface Using Portal

ExtensibilityExtending VMware vCloud Director User Interface Using Portal Extensibility – Ticketing Example

Publishing vCloud Director User Interface Extensions

VMware also already released one service that integrates its UI into vCloud Director – vRealize Operations Tenant App.

In the below screenshot you can see VCD UI extended with five new sections that appear as additional menu options next to Datacenters, Libraries and Administration:

Stub Module – default example included in the UI Extensibility SDK providing static page example (Terms of Service, etc.).

Operations Manager – above mentioned vRealize Operations Tenant App

Blog – this blog embedded as iframe.

Documentation – Static page with links to vCloud Director documentation.

The last module is the vCloud Availability 2.0 portal – the subject of this article:

It is also embedded using iframe.

I am attaching the source files so you can download and adapt them for your purposes. You will also need the SDK and I recommend deployment automation created by Kelby as described in his blog post listed above.

Some notes:

  • The actual link to the portal is in the src/main/vcav.component.ts file. In my case it is https://portal.proxy.cpsbu.local so replace it with the correct link for your environment.
  • For security reasons the vCloud Availability portal prohibits being rendered in browser frame by setting  X-Frame-Options header to DENY. To work around this limitation I am replacing the header with X-Frame-Options: ALLOW-FROM <VCD-url> on the existing load balancer that is load balancing my two vCloud Availability Portal nodes as well as redirecting external port 443 to appliances’ port 8443. This is done with NSX Edge Gateway, SSL termination and the following application rule:
  • The link to the portal is also passing the vCloud Director session authentication token for Single Sign-On. Note that however in the current release (2.0.1) this functionality is broken.


11 thoughts on “Embedding vCloud Availability Portal into vCloud Director UI

      1. Thanks for sharing Tom! Interesting issue. To get your blog example to work properly, I had to remove the following line from `fojta.component.scss`:

        `height: 100%;`

        I tested this with the latest Chrome and Safari.

  1. Hi Tomas, looking at writing some of our own extensions and can’t find either of the whitepapers linked – I know I’ve read them before, any chance the links can be updated? Thanks in advance, Jon.

  2. Hi Tom,
    Trying to make work Commvault plugin in Cloud Director 10.2.1 (not oficially supported by Commvault, on ly supported for 10.1), installs ok but does not show after publishing, I think it only likes Customize plugin 2.0 and not 2.0.2 that is shipped with 10.2.1.
    We deleted by mistake the customize portal plugin, so never again shows the Customize Portal button where it should. Is there anyway to reinstall the Customize Portal plugin? I cannot find anywhere to download it or instructions to reinstall it. Help will be appreciated! Thanks in advance!

    1. You should be able to find the plugin ZIP on a fresh installation in `opt\vmware\vcloud-director\system\com\vmware\vcloud\post-install-configure\1.0.0\post-install-configure-1.0.0.jar\uiPlugins\`
      But please open an SR if you really think it is dues Customize Portal plugin version.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.