There is currently significant effort going on in the Apache CloudStack community to develop a new, modern, UI (user interface) for CloudStack: Project Primate. In this talk Paul discusses why this new UI is required, the history of this project and how it will be included in future CloudStack releases.

1. @CLOUDYANGUS @CLOUDSTACK #CSEUG
CloudStack Primate
Th e ‘ s o c l os e I c an al m os t s m el l i t ’ In t r o t o :
Paul Angus, CTO • @CloudyAngus
VP Apache CloudStack
paul.angus@shapeblue.com

2. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t
Paul Angus – CTO
• VP/Chair Apache CloudStack project
• 20+ years C-Level experience.
• Global authority on CloudStack & cloud infrastructure design
• Specialising in the deployment of CloudStack
and surrounding infrastructure especially the user story
• USP, Georgian Ministry of Justice, Orange, TomTom,
PaddyPower, Ascenty, BSkyB, SAP, BT, Ticketmaster
Ab o u t m e

3. @CLOUDYANGUS @CLOUDSTACK #CSEUG
A Brief History

4. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t
C u r r e n t U I

5. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t• JQuery based single page app
• Homemade JavaScript framework - custom widgets
• Imperatively programmed, DOM manipulation
• ‘Old style’ CSS with static assets
C u r r e n t U I

6. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t• No browser history (try pressing back)
• Loss of context on refresh (try pressing refresh)
• Hard to extend and integrate
• Single JS files with 1000s LoC
• system.js: 22k LoC
C u r r e n t U I – W h a t ’ s W r o n g ?

7. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t• Hard to maintain, develop, extend...
• Difficult for new engineer(s) to get started
• Hard to styling, templating, customisation
• Checked-in libraries within repo, hard to upgrade
C u r r e n t U I – W h a t ’ s W r o n g ?

8. @CLOUDYANGUS @CLOUDSTACK #CSEUG
What do we want?

9. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t
W h a t d o w e w a n t ?

10. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t
• Use intelligent data-driven tabs and icons based on user & user API
permissions
• Have text/label translations
• Use URL routing for tabs and views
• Support cross plugin links (ie drill from VM displayed in network tab
to VM details in instances tab
• Display notification, alerts etc, communication between components
A N ew U I f r am ew or k s h ou l d …

11. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t• Separate data collection from the displaying of data
• Be easy to learn, develop, customise, extend and maintain
• Use modern development methodologies, frameworks and tooling,
etc.
• No DIY frameworks, reuse opensource project(s)
• Library Icons/buttons - no custom sprites
A N ew U I f r am ew or k s h ou l d …

12. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t
• Use declarative programming and web-component based
• Have API discovery like CloudMonkey
• Use auto-generatedUI widgets, views, behaviour
• Have data-driven behaviour and views, buttons, actions etc. based
on role-based permissions
A N ew U I f r am ew or k s h ou l d …

13. @CLOUDYANGUS @CLOUDSTACK #CSEUG
What happen next?

14. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t
Hmmm…

15. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t
B u i l d i n g B l oc k s

16. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t
B u i l d i n g B l oc k s

17. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t
• Clean EnterpriseAdmin UI (VueJS + Ant Design)
• Config and Role-based rendering of buttons, actions,
views etc. Dashboard, list and detail views
• URL router and browser history driven
• Local-storagebased notifications and polling, dynamic
translations...
• Supports Desktop, Tablets, Mobile screen forms
B u i l d i n g B l oc k s

18. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t
• VueJS and Ant Design based UI
• Declarative programming
• API auto-discovery, widget auto-generation
• Hot-reloading
• Clean and separate development lifecycle
• Easy to learn, develop, extend and maintain
B u i l d i n g B l oc k s

19. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t
DEMO

20. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Timeline

21. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Winter 2020
• Tech Preview
Equivalent
functionality to
current UI
(4.13)
Summer 2020
• GA Release
Full
functionality,
production
ready
Winter 2021
• Old UI
Removed
Primate
becomes the
ACS UI

22. @CLOUDYANGUS @CLOUDSTACK #CSEUG
What can I do?
(by ‘I’, I mean ‘you’)

23. @CLOUDYANGUS @CLOUDSTACK #CSEUG
Cl i c k t o ed i t
• Try it out
• Submit bug reports
• Submit suggestions
• Learn Vue.js
• Add functionality
• Help with bug fixes
C a l l t o Ac t i o n

24. @CLOUDYANGUS @CLOUDSTACK #CSEUG
CloudStack Primate
Th e ‘ s o c l os e I c an al m os t s m el l i t ’ In t r o t o :
Paul Angus, CTO • @CloudyAngus
VP Apache CloudStack
paul.angus@shapeblue.com