Customising the CloudStack UI - CloudStack European User Group Virtual, May 2021
0 likes1,029 views
The document provides a comprehensive guide on customizing the CloudStack UI, highlighting the transition to a modern UI based on Vue.js and Ant Design introduced in version 4.15.0. It covers basic and advanced customization methods, including theme modifications, localization, and plugin support, while outlining the necessary tools and programming knowledge for deeper changes. Additionally, it includes links for further assistance and examples to facilitate UI personalization for various use cases.
![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](https://image.slidesharecdn.com/customisingthecloudstackui-210601105820/85/Customising-the-CloudStack-UI-CloudStack-European-User-Group-Virtual-May-2021-9-320.jpg)
![• 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](https://image.slidesharecdn.com/customisingthecloudstackui-210601105820/85/Customising-the-CloudStack-UI-CloudStack-European-User-Group-Virtual-May-2021-14-320.jpg)
![• 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](https://image.slidesharecdn.com/customisingthecloudstackui-210601105820/85/Customising-the-CloudStack-UI-CloudStack-European-User-Group-Virtual-May-2021-15-320.jpg)
Customising the CloudStack UI - CloudStack European User Group Virtual, May 2021
- 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