ui: Allow font-awesome icon usage and optimise icon size inconsistency

[rohityadavcloud]

This addresses that issue that plugins customisation in the UI (https://docs.cloudstack.apache.org/en/4.19.1.1/adminguide/ui.html#basic-ui-c ustomization) isn't able to use all the ant-design-vue icons.

We already use and support fontawesome components such as for Kubernetes menu etc. This extends the usage of fontawesome (free) solid icons for custom plugins section in config.json. The plugin can be defined as array:

  "plugins": [
    {
        "name": "HomeLab",
        "icon": ["fa-solid", "fa-server"],
        "path": "https://dash.yadav.cloud/dash/"
    }
  ],

Here the icons is declared as a json array config, where the first parameter is the pack/type name ("fa-solid") and the second parameter is the icons name with the "fa-" prefix.

The solid icon can be searched and used from here: https://fontawesome.com/search?q=server&o=r&s=solid

This also fixes icon size inconsistency when fa os-logo icons are used versus when resource icons are used. This also changes some of the infocard icons to use better icons from font awesome.

Types of changes

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

Testing

With the example json snipped defined above, would result in this which uses a font awesome solid icon:

[rohityadavcloud]

FYI - this is from Swen (proIO's) email from users ML who found a limitation in plugins/UI icons usage.

@blueorangutan ui

[blueorangutan]

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

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 15.12%. Comparing base (7cfeab1) to head (e662e55). Report is 7 commits behind head on 4.19.

Additional details and impacted files

@@             Coverage Diff              @@
##               4.19    #9744      +/-   ##
============================================
- Coverage     15.12%   15.12%   -0.01%     
+ Complexity    11255    11253       -2     
============================================
  Files          5407     5407              
  Lines        473799   473799              
  Branches      57767    57767              
============================================
- Hits          71670    71665       -5     
- Misses       394130   394136       +6     
+ Partials       7999     7998       -1     

Flag	Coverage Δ
uitests	4.30% <ø> (ø)
unittests	15.84% <ø> (-0.01%)	:arrow_down:

Flags with carried forward coverage won't be shown. Click here to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[blueorangutan]

UI build: :heavy_check_mark: Live QA URL: https://qa.cloudstack.cloud/simulator/pr/9744 (QA-JID-458)

[rohityadavcloud]

QA'd manually this seems to be working okay: (notice the icons)

[DaanHoogland]

FYI - this is from Swen (proIO's) email from users ML who found a limitation in plugins/UI icons usage.

https://lists.apache.org/thread/0062c2o0dl4vps562bdkpmw0ym8f5yq6

[DaanHoogland]

@JoaoJandre , will you consider this?

[JoaoJandre]

@rohityadavcloud @DaanHoogland If I understood correctly, this PR is improving which fonts can be used when creating new plugins, and not fixing any bugs. If so, does it need to go into 4.20? It seems to me that if it gets merged as soon as 4.20 is out, new plugins can already start using the fonts, so there would be no need to merge it now.

Please correct me if I'm mistaken.

[DaanHoogland]

@rohityadavcloud @DaanHoogland If I understood correctly, this PR is improving which fonts can be used when creating new plugins, and not fixing any bugs. If so, does it need to go into 4.20? It seems to me that if it gets merged as soon as 4.20 is out, new plugins can already start using the fonts, so there would be no need to merge it now.

Please correct me if I'm mistaken.

I think you are right, I understood it as "We cannot add our plugin because of a bug" but let's move this forward then.

[rohityadavcloud]

@JoaoJandre it's considered a UI bug as font-awesome works for normal tabs but not plugin section in the navigation. But it's considered minor as this is the case for the last many releases, it's not a regression.

[github-actions[bot]]

This pull request has merge conflicts. Dear author, please fix the conflicts and sync your branch with the base branch.

[DaanHoogland]

@rohityadavcloud , i resolved a conflict here. Hope it is alright like this by you.

[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: https://qa.cloudstack.cloud/simulator/pr/9744 (QA-JID-493)

[rohityadavcloud]

Thanks @DaanHoogland @vishesh92 @shwstppr cc @sbrueseke

[sbrueseke]

thx everybody for the effort! :-)