Rohit Yadav - Modern UI for CloudStack
2 likes367 views
The document presents a proposal for a modern user interface (UI) for CloudStack by ShapeBlue, emphasizing the need for a declarative, component-based UI that simplifies maintenance and enhances user experience. It outlines lessons learned from past projects, modern UI requirements, and introduces 'Primate,' a new UI built using Vue.js and Ant Design. The proposal includes a timeline for development, release plans, and a call for community engagement and support.
Rohit Yadav - Modern UI for CloudStack
- 1. Modern UI for CloudStack Rohit Yadav Software Architect, ShapeBlue [email protected] Anurag Awasthi Software Engineer, ShapeBlue [email protected]
- 2. • Software Engineer @ ShapeBlue. • From Kanpur, India. • Background: ○ CloudStack feature development, KVM, VR. ○ Formerly at Twitter, PocketGems, Microsoft Research. ○ Diverse experiences - Backend, Web, iOS, Android, Machine Learning. • Loves programming (github.com/anuragaw), dogs and trekking $ whoami: Anurag Awasthi
- 3. @rhtyd | rohityadav.cloud • Software Architect @ ShapeBlue. • From Gurugram, India. • Background: ○ Committer and PMC, 7 years and counting! ○ RM and maintainer for several minor and major releases ○ Specialize in design and architecture, framework, tooling, APIs, KVM, VMware, VR/networking, debugging. ○ Author of cloudmonkey 🐵 and several features in CloudStack. • Love cats 🐱 and programming. $ whoami: Rohit Yadav
- 4. ● State of Present CloudStack UI ● Lesson Learnt ● Modern UI Requirements ● Side Project ● Demo ● Proposal and Next Steps ● Q&A Topics
- 5. State of CloudStack UI ● JQuery based single page app ● Own javascript framework, custom widgets ● Imperatively programmed, DOM manipulation ● Old styled css, static assets ● Hard to styling, templating, customisation ● Checked-in libraries within repo, hard to upgrade
- 6. State of CloudStack UI ● No browser history ● Loss of context on refresh ● Hard to extend and integrate ● Single JS files with 1000s LoC ● system.js: 22kloc ruler-driven { } code ● Hard to maintain, develop, extend… ● Difficult for new engineer(s) to get started
- 7. Lesson Learnt: ProjectX (~2014-2015)
- 8. Lesson Learnt: ProjectX (~2014-2015)
- 9. Lesson Learnt: CloudMonkey ● UI for the command-line ● API discovery and param-completion ● Small and concise codebase, data-driven UI, UX on terminal ● Convention based (“camelCase” -> “camel case”) ● New CloudMonkey: Go-lang based, single binary, easy to install and use; separate release cycle from Apache CloudStack https://github.com/apache/cloudstack-cloudmonkey/
- 10. Modern UI Requirements ● Declarative programming and web-component based ● API discovery and param-completion like CloudMonkey ● Auto-generated UI widgets, views, behaviour ● Data-driven behaviour and views, buttons, actions etc. based on role-based permissions ● Easy to learn, develop, customise, extend and maintain ● Use modern development methodologies, frameworks and tooling, vendoring etc. ● No DIY frameworks, reuse opensource project(s)
- 11. API-Discovery and Param Completion ● Discover APIs available for a role: listApis ● API name and request arguments (input and types) ● API response with keys and types of each key ● Convention driven mapping of APIs for input argument and types
- 12. What is a Web Component? ● Reusable building block ● Encapsulation and interoperability ● Custom element ● HTML Template, CSS styling ● Modular JS ● Spec: https://github.com/w3c/webcomponents <hello />
- 13. (Opensource) CloudStack UIs ● Bitworks CloudStack UI (Primarily User UI) https://github.com/bwsw/cloudstack-ui ● Angular based UI (PoC) https://github.com/apache/cloudstack/tree/master/tools/ngui ● Misc CloudStack UIs and Portals (not opensource/free)
- 14. Survey: Frameworks and Tools ● JS frameworks: ReactJS, AngularJS, VueJS… ● Frontend frameworks: Bootstrap, Semantic-UI, Foundation, Material UI, Buefy, Quasar, Ant Design … ● Modern tooling: npm, ncu etc.
- 16. Ant Design https://github.com/ant-design/ant-design
- 17. Introducing: Primate! ** incomplete features and bugs included ;)
- 18. Primate: A Modern UI ● VueJS and Ant Design based UI ● Declarative programming ● Hot-reloading, vendoring ● Clean and separate development lifecycle ● Easy to learn, develop, extend and maintain ● Multi-set: For admins, users, custom roles
- 19. Primate UI for CloudStack ● Clean Enterprise Admin UI (VueJS + Ant Design) ● API auto-discovery, widget auto-generation ● Config and Role-based rendering of buttons, actions, views etc. Dashboard, list and detail views ● URL router and browser history driven ● Misc: Local-storage based notification and polling, dynamic translations… ● Supports Desktop, Tablets, Mobile screen forms
- 20. Primate UI Demo!
- 21. Credits and Attributions ● Sven Vogel (EWerk): Review, feedback, support ● M. Weber (EWerk): CSS refactoring, styling changes ● Philipp Bankonier (EWerk): JS changes ● Anurag Awasthi - Translation and action notifications ● Giles Sirett, Paul Angus and team ShapeBlue - Requirements and support ● VueJS (https://vuejs.org) ● Ant Design Vue (https://vue.ant.design/) ● Ant Design Pro Admin Template (https://github.com/sendya/ant-design-pro-vue) ● Font/Fort-Awesome (https://github.com/FortAwesome/Font-Awesome) ● Cat Force Icons by Iconka (https://www.iconfinder.com/iconsets/cat-force, https://iconka.com/en/)
- 22. What’s Next? ● Opensource under APL 2.0: https://github.com/shapeblue/primate ● Build Support: Start discussions on dev@, discuss Primate, seek reviews, requirements, feedback *CCCNA19* UI Hackathon Track! ● Next few months: complete all major goals, features and functionality on par with present CloudStack UI
- 23. Proposed Timelines ● Build support, propose, seek vote on dev@ ● Primate codebase donated and accepted ● Technical preview/beta release ~4.14/Q1 2020, stop work on old UI ● Documentation and Notes ● Discuss and work on upgrade path and migration plan ● GA as default UI: ~H2/2020, 4.15+
- 24. Q&A - Thanks! We’re Hiring! https://www.shapeblue.com/careers/