A CloudStack resource is typically identified by its name or description, and when creating and managing resources, zones are often named by their geographical location, team/company name for domains, accounts, projects and so on. However, as icons and images are generally easier to quickly identify we wanted to improve the user experience by providing the ability to create custom icons for resources.
Support for custom icons has been provided to a subset of resources including:
• Zones
• Templates / ISOs
• Virtual Machines (if no icon of its own, will inherit the respective template / ISO icon)
• Accounts
• Users (if no icon of its own, will inherit the respective account icon)
• Projects
• Domains
• Networks (if no icon of its own, Isolated network tiers of VPC networks will inherit the
VPC network icon)
Now, let’s get into some nuances of this feature. To start off with, how would you identify that a resource supports custom icons? Any resource that does will have a small camera symbol beside the logo in the Info / Details View of the particular resource. For example:
Clicking anywhere on the icon will open a window where you can upload the image/icon you want. The left section of this window allows a user to format the image (zoom, rotate) and once you are happy with the preview (on the right) you can go ahead and upload it. The image is then resized to 52×52 and is converted to a base64 PNG image before being stored in the database. Any user with access to a resource is allowed to upload and delete the corresponding resource’s icon.
There are several other places where a user can use custom resource icons, including:
- Deploy VM wizard
If the number of zones is less than or equal to 8, we now show a card view:
Any more than 8, we go back to the drop-down menu, but still show the icons against the zone names:
- Info / Details View of a resource
Any (eg. L2 network) whose details refer to any of the (eg. Zone, Account, Domain) will show the corresponding uploaded icon against them:
- Forms
Forms that have arguments/parameters referring to resources that support icons, will display the icons alongside the name:
- List View
Any resource with support for icons have the icons displayed beside their name in the corresponding resource’s List View:
We also show the logged in user’s image at the top-right corner of the screen on the Dashboard:
For those out there interested in contributing and extending this feature to other resources of CloudStack, or if we’ve missed adding support for icons at certain places, this can be easily done.
From the backend a couple of things to be followed:
• Specify if the resource in question supports uploading icons. To do so, set the 3rd argument of the resource in the ResourceObjectType enum in ResourceTags.java file to true i.e.,
As seen above, UserVM, Template, ISO have support for uploading icons, whereas Volumes, Snapshots do not.
Add support to list the icons as part of the resource’s list API – for this, the list API and the resource’s response classes need to be modified; one may refer to ListAccountsCmd.java and AccountResponse.java as an example. We have added a parameter– showicon which when passed as true displays the icon as part of the response, otherwise, it defaults to false.
On the frontend:
- Add the resource name to the list of supported resources to the showIcon function defined at ~/ui/src/utils/plugins.js
- To display the resource icon, one may use/import the custom component – ResourceIcon.vue – and pass the image and dimensions. For example:
- Pass the showicon = true parameter to the resource’s list API call.
It’s as simple as that! This feature will be available in the 2021 Q3/4 release of Apache CloudStack. Hope you enjoy this feature.
Pearl is a quality and technology driven software engineer, with 5 years’ experience with relevant expertise in providing solutions to the telecom and software industry. Pearl has an excellent grasp of the evolving technologies in the changing telecom space. She is a go-getter, with a flair for learning new technologies. Pearl is based in Bangalore, India. Self-learning and self-motivation are the mantras that she follows to keep herself abreast with new things in her field of work.
