This presentation focuses on customizing the new UI. It aims to teach administrators to tailor the UI aesthetics to their organisation's preferences. It also targets advanced users, training them to alter the layout of the UI, add, remove, or restrict resource actions from the UI (eg: deleting a VM) as well as provide an overview of how the new UI operates and how to manage it. Abhishek Kumar is a Software Engineer at ShapeBlue. He has been involved with Apache CloudStack since 2018 and became a committer in 2020. At work, he spends most of his time working on the implementation of new features in CloudStack and fixing bugs. Outside of work, he loves to read and learn about technology, spend time at the gym and watch action-thriller movies. ------------------------------------------ CloudStack European User Group Virtual happened on May 27th. The first CSEUG Virtual proved to be a huge success. It collected people from 23 countries – Germany, the United Kingdom, Switzerland, India, Bulgaria, Greece, Poland, Serbia, Brazil, Chile, Russia, USA, Canada, Japan, France, Uruguay, Korea … We also had a record number of registrations and attendees for a CloudStack User Group Event. The physical distance was not a stopper for our speakers, who joined the event from 6 different countries. ------------------------------------------ About CloudStack: https://cloudstack.apache.org/

1. Customizing the CloudStack UI
Make UI your own!
Abhishek Kumar
Software Engineer, ShapeBlue

2. Agenda
• Introduction
• CloudStack UI
• New UI
• UI customisation
• Basic UI customsation
• Theme customisation
• Links to contextual help
• Plugin support
• Demo
• Advanced UI customisation
• Process
• Examples – icon/image changes, localization, other modifications
• Demo

3. CloudStack UI
1-1
• Functional, roles-based UI
• Supports most of the over 600 of
CloudStack API
• New, modern UI based on Vue.js and
ANT design framework added in 4.15.0
release
• Old UI deprecated in 4.15.0 and will be
removed in next LTS release 4.16.0

4. New UI
• Modern, intuitive
• Legacy UI had become obsolete
• Difficult to maintain with always
growing feature in CloudStack
• Matches legacy UI functionality and
features
• Based on Vue.js, Ant design
• API auto-discovery of new CloudStack
functionality
• Support desktop, tablet and mobile
screen form factors
1-2

5. Customizing UI
• Important for cloud operators
• Not everyone has same use-case
• Theme customization – different
branding, images, etc
• Changes after new UI
ShapeBlue blogs - Customising the CloudStack UI
https://www.shapeblue.com/customising-the-cloudstack-ui/
1-3

6. Basic UI customisation
For everyone
• Customisation with the help of configuration
file on the management server -
/etc/cloudstack/management/config.json
• No specific knowledge of programming
• Includes:
• Theme customisations
• Links to contextual help
• Plugin support
2-1

7. Theme customisations
• Customise colors, images, headers, etc.
• Changes will reflect instantly after refresh
{
"apiBase": "/client/api",
"docBase": "http://docs.cloudstack.apache.org/en/latest",
"appTitle": "Shapeblue Cloud",
...
"logo": "assets/customlogo.svg",
...
"theme": {
...
"@primary-": "#dd55ff",
...
"@warning-color": "#ff2a7f",
...
"@text-color": "#37c8ab
",
...
2-2

8. Links to contextual help
• New UI shows contextual help links in
different UI sections and forms
• By default, links point to CloudStack
documentation -
http://docs.cloudstack.apache.org/en/latest
• Can be customized with the configurations –
docBase and docHelpMappings
{
...
"docBase": http://mycustomwebsite.com,
...
"docHelpMappings": {
"adminguide/virtual_machines.html": "custom_vm_page.html",
"adminguide/templates.html": "custom_templates_page.html"
},
...
}
2-3

9. Plugin support
• Useful for displaying custom content
• Uses iFrame to display custom HTML page or
an external HTTP service
• Custom HTML file can be placed at
/usr/share/cloudstack-management/webapp
{
...
plugins: [
{
"name": "ExamplePlugin",
"icon": "appstore",
"path": "example.html"
},
{
"name": "ExamplePlugin1",
"icon": "appstore",
"path": "https://cloudstack.apache.org/"
}
]
...
}
2-4

10. Demo: Basic UI customisation

11. Advanced UI customization
Needs some programming knowledge
• Possible by changing source code files
• May look difficult but not very difficult
• Needs some understanding of Javascript,
Vue.js and nodejs
• UI code is located under ui in CloudStack
source
Documentation on UI development available in
the source/Github,
https://github.com/apache/cloudstack/blob/mas
ter/ui/docs/development.md
3-1

12. Advanced UI customisation: How it works?
• Get source code
Download from CloudStack website (for 4.15.1 onwards) or clone from git
repository
• Setup environment
Install dependencies, npm packages
• Build
Build using npm
• Copy built binaries
Built binaries can be copied to the management server host(s)
sudo apt-get install npm nodejs
# Install system-wide dev tools
sudo npm install -g @vue/cli npm-check-updates
npm install
npm run build
scp -rp ./ {user-on-management-server}@{management-
server}:/usr/share/cloudstack-management/webapp/
# Access UI at {management-server}:8080/client in browser
3-2

13. • Add custom icon in icons directory in source code
cloudstack/ui/src/assets/icons
• Change icon path in corresponding section Javascript file
Can be the path of a custom icon or name of a predefined Ant design
icons, https://vue.ant.design/components/icon/
• Build
Build UI with npm
• Copy built binaries
Built binaries can be copied
to the management server host(s)
Icon changes
3-3-1

14. • Make a copy of the English translation file and
replace strings
Translation json files are stored in source code at
cloudstack/ui/public/locales/
• Add option for new language in translation menu
file
A new menu entry to be added in
cloudstack/ui/src/components/header/TranslationMe
nu.vue
• Build and copy
Localization
...
:selectedKeys="[language]"
@click="onClick">
<a-menu-item key="en" value="enUS">English</a-menu-item>
+ <a-menu-item key="zz" value="hi">New Language</a-menu-item>
<a-menu-item key="hi" value="hi">हिन्दी</a-menu-item>
<a-menu-item key="ja_JP" value="jpJP">日本語</a-menu-item>
<a-menu-item key="ko_KR" value="koKR">한국어</a-menu-item>
...
⇒ ls cloudstack/ui/public/locales/ -lr
total 3112
-rw-rw-r-- 1 shwstppr shwstppr 196471 Feb 25 11:42 zz.json
-rw-rw-r-- 1 shwstppr shwstppr 186117 Feb 16 15:55 zh_CN.json
-rw-rw-r-- 1 shwstppr shwstppr 354705 Feb 16 15:55 ru_RU.json
...
3-3-2

15. • Make changes to concerned section Javascript or Vue
file
• Build and copy
Other modifications
...
actions: [
{
api: 'registerTemplate',
icon: 'plus',
label: 'label.action.register.template',
docHelp: 'adminguide/templates.html#uploading-templates-from-a-
remote-http-server',
listView: true,
popup: true,
+ show: (record, store) => {
+ return (['Admin',
'DomainAdmin'].includes(store.userInfo.roletype))
+ },
component: () =>
import('@/views/image/RegisterOrUploadTemplate.vue')
},
...
3-3-3

16. Demo: Advanced UI customisation

17. Possible future improvements
Add support for basic UI customisation within UI – an idea shared by Hoang Nguyen

18. Q & A
Thank You
Reach me at:
Twitter: @shwstppr
Email: abhishek.kumar@shapeblue.com