Gives the possibility to redirect to external links when the property is defined

[RodrigoDLopez]

Description

There is currently no way in ACS to redirect users to external links. To resolve the situation, two new properties have been added to the config.json settings file so that redirects to external links can be defined. The externalLinks property consists of a list of title, link and icon attributes.

"externalLinksIcon: "",
"externalLinks": [
    {
        "title": "Cloudstack",
        "link": "https://cloudstack.apache.org",
        "icon": myIcons/cloudstach.png
    },
    {
        "title": "Apache",
        "link": "https://apache.org",
        "icon": "https://www.apache.org/icons/apache.png"
    }
]

The following rules govern the redirection feature for external links: - If the properties are not defined, the redirect button will not be displayed to the user; - The link attribute of the externalLinks property is mandatory in this context, and elements of this property that do not have the link attribute or have it empty will be disregarded. The title and icon attributes are optional, if icon is not defined a default icon will be applied; - When the title attribute is not set, the link will be displayed instead.

Once the title, link and icon attributes are informed, two possible behaviors can be observed:

1. Only one defined element: in this context, a button will be displayed, which, when clicked, will redirect the user to the link defined in the configuration;

2. More than one element is defined: a dropdown containing the configured links will be displayed.

"externalLinksIcon": "",
"externalLinks": [
    {
      "title": "",
      "link": "http://apache.org",
      "icon": "https://www.apache.org/icons/apache.png"
    },
    {
      "tittle": "will not be shown",
      "link": "",
      "icon": ""
    },
    {
      "title": "Cloudstack",
      "link": "http://cloudstack.org",
      "icon": "myIcons/cloudstach.png"
    }
]

The externalLinksIcon property, also optional, defines the icon that will be used to compose the button displayed when more than one external link is provided. In the example above this property was omitted, so the default icon was displayed. It is also possible to use local images in the icon attribute: "icon": "myIcons/cloudstach.png" or an external link.

Types of changes

• [ ] Breaking change (fix or feature that would cause existing functionality to change)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] Enhancement (improves an existing feature and functionality)
• [ ] Cleanup (Code refactoring and cleanup, that may add test cases)

Feature/Enhancement Scale

• [ ] Major
• [x] Minor

How Has This Been Tested?

Changing the configuration file to get one or a list of external links

[DaanHoogland]

@blueorangutan ui

[blueorangutan]

@DaanHoogland a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

[blueorangutan]

UI build: :heavy_check_mark: Live QA URL: http://qa.cloudstack.cloud:8080/client/pr/6505 (SL-JID-1851)

[acs-robot]

Found UI changes, kicking a new UI QA build @blueorangutan ui

[blueorangutan]

@acs-robot a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

[blueorangutan]

UI build: :heavy_check_mark: Live QA URL: http://qa.cloudstack.cloud:8080/client/pr/6505 (SL-JID-1863)

[DaanHoogland]

@blueorangutan package

[blueorangutan]

@DaanHoogland a Jenkins job has been kicked to build packages. It will be bundled with KVM, XenServer and VMware SystemVM templates. I'll keep you posted as I make progress.

[blueorangutan]

Packaging result: :heavy_check_mark: el7 :heavy_check_mark: el8 :heavy_check_mark: debian :heavy_check_mark: suse15. SL-JID 3709

[shwstppr]

@DaanHoogland this is purely a UI PR, not sure why tests were needed for this :)

[DaanHoogland]

@DaanHoogland this is purely a UI PR, not sure why tests were needed for this :)

I was going to look into editting the config,json and would like to do that in an isolated env, @shwstppr

[RodrigoDLopez]

-0

Tested functionality with QA server, it works. I'm not sure about its use-case. But I'm a dev and other users can pitch in. Right now UI is just showing icon/menu for links without much context. @RodrigoDLopez it might be a good idea to add some documentation for the users of this feature

As explained in the description of this PR, this feature arose from a vendor's need to expose internal and external links to its operators and customers. As proposed, the administrator only needs to configure the links and they will be displayed on the ACS screen, facilitating the forwarding to these pages. Regarding the documentation, I believe that the description of this PR makes the functionality and how to use it very clear.

[DaanHoogland]

@blueorangutan test keepEnv

[blueorangutan]

@DaanHoogland a Trillian-Jenkins test job (centos7 mgmt + kvm-centos7) has been kicked to run smoke tests

[blueorangutan]

Trillian test result (tid-4509) Environment: kvm-centos7 (x2), Advanced Networking with Mgmt server 7 Total time taken: 40708 seconds Marvin logs: https://github.com/blueorangutan/acs-prs/releases/download/trillian/pr6505-t4509-kvm-centos7.zip Smoke tests completed. 98 look OK, 0 have errors Only failed tests results shown below:

Test	Result	Time (s)	Test File

[RodrigoDLopez]

plugins feature in config.json does exactly the same - let's review if this is the same feature or something different, does it make sense to expand that instead?

I did not catch what you mean, which feature in the config.json do the same as proposed by this PR?

[RodrigoDLopez]

@rohityadavcloud, @shwstppr is there anything else missing on this one, or we are good to go?

[GutoVeronezi]

@RodrigoDLopez, I think what @rohityadavcloud means is that in file /ui/public/config.json there is a property to define third party plugins in the UI. It does not work exactly the same; however, it is similar. Here is a simple example of how to use the plugins to achieve something similiar to what you proposed:

• In config.json I added the following:

  ... 
  "plugins": [ 
            {"name": "some testing", "icon": "cloud", "path": "https://cloudstack.apache.org/api/apidocs-4.17/"} 
  ], 
  ... 

Then, /ui/src/config/router.js will handle this property, creating a new menu for each entry that will address it in an IFrame:

  const plugins = Vue.prototype.$config.plugins 
  if (plugins && plugins.length > 0) { 
    plugins.map(plugin => { 
      routerMap[0].children.push({ 
        path: '/plugins/' + plugin.name, 
        name: plugin.name, 
        component: IFramePlugin, 
        meta: { title: plugin.name, icon: plugin.icon, path: plugin.path } 
      }) 
    }) 
  } 
 
  return routerMap 
} 

The result is:

The official documentation has more examples on how to use it.

I like the result that your proposal generates (a single icon or list of icons redirecting the user). In some cases it can be better aesthetically (and functionally) for the user than a new menu opening the page inside ACS.

With that said, I think we could extend the plugins functionallity to be able to generate the kind of result you proposed instead of creating a new set of properties. What do you think?

[RodrigoDLopez]

Thanks, @GutoVeronezi

Based on your suggestion I added a new attribute called isExternalLink to plugin; This way, the default plugin behavior is kept as creating a new menu and, when identifying the object with the new attribute isExternalLink as true, we will create a component (a single button or a list of links), at the top-right corner of the page, to redirect users to the link configured.

Also, I noticed that if an empty component is inserted (without link or name), router.js will create a new empty entry in the left menu, which will do nothing. Therefore, I made a small change to avoid this behavior and only create the menu when at least the name and link are provided.

[codecov[bot]]

Codecov Report

:exclamation: No coverage uploaded for pull request base (main@c1cb84b). Click here to learn what that means. The diff coverage is n/a.

@@           Coverage Diff           @@
##             main    #6505   +/-   ##
=======================================
  Coverage        ?   11.50%           
  Complexity      ?     7537           
=======================================
  Files           ?     2492           
  Lines           ?   246805           
  Branches        ?    38562           
=======================================
  Hits            ?    28398           
  Misses          ?   214808           
  Partials        ?     3599           

:mega: We’re building smart automated test selection to slash your CI/CD build times. Learn more

[RodrigoDLopez]

@DaanHoogland, @rohityadavcloud, @utchoang and @shwstppr Could you, please, check out this new proposal?

[RodrigoDLopez]

@DaanHoogland, @rohityadavcloud, @utchoang and @shwstppr is there any suggestion or request on this or are we ready to go?

[DaanHoogland]

I think the only hesitation was by @rohityadavcloud . I'm good to go (or do you have reservations still @shwstppr ?)