Bitworks CloudStack UI - CSEUUG 08 August 2017
1 like135 views
The document outlines a presentation on Cloudstack-UI by Ilya Zolotukhin, focusing on its development process, user experience improvements compared to the native Apache CloudStack UI, and future goals. It addresses current issues users face with the native UI, including difficulties in navigation and outdated design, while emphasizing the modern, user-friendly features of Cloudstack-UI such as its responsive design and efficient frameworks. The presentation also covers the role of tags, development challenges, and the team's background, highlighting Bitworks' involvement and expertise in software development.
![The Role of ACS Tags in CloudStack-UI
[cloudstack-ui-cleaner]
31
Current cleaner implementation is naive. Need to
reimplement with event subscription.](https://image.slidesharecdn.com/csui-cseuug082017-170815094853/85/Bitworks-CloudStack-UI-CSEUUG-08-August-2017-31-320.jpg)
![The Role of ACS Tags in CloudStack-UI:
[cloudstack-ui-cleaner]
32
Lack of delete chain operations for VM:
1. for SGs
2. Snapshots
3. Disks
4. Anything else?
markResourceAutoExpunge?resource=sg&id=<sgid>&vm=<vmid>
Suggestion:](https://image.slidesharecdn.com/csui-cseuug082017-170815094853/85/Bitworks-CloudStack-UI-CSEUUG-08-August-2017-32-320.jpg)
![Development Process
1. Public:
a. Docker hub releases ( https://hub.docker.com/r/bwsw/cloudstack-ui )
■ docker pull bwsw/cloudstack-ui:latest
■ docker pull bwsw/cloudstack-ui:[version]
b. Travis CI
2. Private: Jenkins
a. Docker per-branch testing and deployment
■ http://sandbox-url/[branch-name]
51](https://image.slidesharecdn.com/csui-cseuug082017-170815094853/85/Bitworks-CloudStack-UI-CSEUUG-08-August-2017-51-320.jpg)
Bitworks CloudStack UI - CSEUUG 08 August 2017
- 1. CloudStack-UI Ilya Zolotukhin, Product Team Leader, Bitworks mailto: [email protected] https://bitworks.software/ CSEUUG Meetup, August 17, 2017 Apache CloudStack user self-service web interface for IaaS and application delivery services
- 2. Agenda 1. About the speaker 2. Origins - how and why we decided to develop the product 3. Current problems of the native ACS UI as our users and helpdesks see them 4. Comparison - native vs CloudStack-UI 5. UX Goals: Simplicity, Early Errors Detection, Intuitive Navigation, Less Steps 6. Domains 7. Where the project moves 8. The role of tags for the product 9. Pluggable infrastructure a. Shell In A Box plugin b. Pulse plugin c. Vault plugin 10. Application delivery (and CICD) development 11. Development process - work on features, bugs, release cycles 12. Development roadmap 13. Product difficulties and ACS advices 14. Team 15. About Bitworks 16. Thank you slide 2
- 3. 1. Team Leader at Bitworks a. 3 Years of full-stack development b. 3 Years of front-end development for AdTech Industry 2. Front-End consultant About the Speaker Who is it? 3
- 4. Why We Develop CloudStack-UI 1. Educational “Incubator” for new teammates 2. Our affiliate ISP company uses ACS and has collected broad experience over 3 years of service delivery: a. We have a Project Sponsor b. We have an understanding of what shortcomings the current UI has and what features and UX our competitors provide (AWS, DO, etc.) c. Affiliate company plans to launch new ACS-based cloud 3. As a software development company, we understand jQuery is not a good choice any longer for current web UI and new adopters try to stay away from it (why not just change the current layout?). 4
- 5. Current Problems of Native ACS UI From User’s Perspective 1. Difficult to learn and remember how to run operations (even for Basic Zone). E.g. to make a template from a snapshot 2. Old-fashioned (competes poorly against AWS, DO, GCP) 3. First glance disappointments a. rookie administrators (who deploy ACS for the first time) b. newbie users who come from AWS, DO, GCP, etc 5
- 6. Current Problems of Native ACS UI From HelpDesk Perspective 1. Difficult to learn and remember how to run operations (even for Basic Zone). E.g. to make a template from a snapshot 2. Troublesome phone-based consultations (it’s difficult to explain where to navigate, what input to find, and change) 3. Troublesome ticket-based consultations (no way to remember the state) 6
- 7. CloudStack-UI vs Native ACS UI (I) Feature CS-UI Native UI Credo 1. Better UX 2. User’s needs first 3. Simplify navigation 1. Reflect API fully 2. ER-based navigation design 3. Administrator needs first Purpose Cloud Users Cloud Administrators Cloud Users Care Helpful, protective. Advanced client-side logic. Tries to avoid error situations and explains errors if possible. Careless (let’s try it and see what happens). Almost server-side error detection. Business logic “Thinks” about cloud from the business logic point of view (e.g. default service offerings) Just reflects technology to UI 7
- 8. CloudStack-UI vs Native ACS UI (II) Feature CS-UI Native Look & Feel Modern Material (Google) design, responsive (PC, Tablets), fits great for “tap-ish” devices. Custom design, sometimes old-fashioned, designed for PC. Redesign proposal (ACS 4.3 - 2013, not implemented): https://cwiki.apache.org/confluence/display/CLOUDST ACK/Update+UI+visual+appearance Navigation State reflection to URL (History API) No reflection (makes life of HelpDesk difficult) Technology 1. Angular v4 https://angular.io/ 2. TypeScript 3. Material Design (Look & Feel) https://material.angular.io/ 1. No framework 2. JavaScript 3. jQuery Deployment Dockerized SPA Embedded 8
- 9. CloudStack-UI vs Native ACS UI (III) Feature CS-UI Native Future Supportability Uses modern Angular framework which is expected to be used for the next 6-7 years (angular.js - 2009-2016) Custom jQuery-based framework Maturity Rookie Mature Adoption None High License Apache License v2 Apache License v2 9
- 10. Native UI VM Creation 10
- 11. Every State is Represented with a Permalink 11 https://cs.ui/instances? zones=031a55bb-5d6b-4336-ab93-d5dead28a887&groups=www&states=Running&groupings=zones&groupings=groups
- 12. UX Goals: Simplicity, Early Errors Detection, Intuitive Navigation, Less Steps 12
- 13. UX Goals: Simplicity, Early Errors Detection, Intuitive Navigation, Less Steps 13
- 14. UX Goals: Simplicity, Early Errors Detection, Intuitive Navigation, Less Steps 14
- 15. UX Goals: Simplicity, Early Errors Detection, Intuitive Navigation, Less Steps 15
- 16. UX Goals: Simplicity, Early Errors Detection, Intuitive Navigation, Less Steps 16
- 17. UX Goals: Simplicity, Early Errors Detection, Intuitive Navigation, Less Steps 17
- 18. UX Goals: Simplicity, Early Errors Detection, Intuitive Navigation, Less Steps 18
- 19. UX Goals: Simplicity, Early Errors Detection, Intuitive Navigation, Less Steps 19
- 20. UX Goals: Simplicity, Early Errors Detection, Intuitive Navigation, Less Steps 20
- 21. UX Goals: Simplicity, Early Errors Detection, Intuitive Navigation, Less Steps 21
- 22. UX Goals: Simplicity, Early Errors Detection, Intuitive Navigation, Less Steps 22
- 23. UX Goals: Simplicity, Early Errors Detection, Intuitive Navigation, Less Steps 23
- 24. UX Goals: Simplicity, Early Errors Detection, Intuitive Navigation, Less Steps 24
- 25. Security Group Review: Single SG per VM - Useful For Average Cloud Users 25
- 26. Security Group Review: Single SG per VM - Useful For Average Cloud Users 26
- 27. Security Group Review: Single SG per VM - Useful For Average Cloud Users 27
- 28. Domain Improvements 28 3 ways to specify a default domain: 1. URL Query params 2. Config (config.json) (deployment) 3. Type it on the Login Page
- 29. The Role of ACS Tags in CloudStack-UI 29 Tags are widely used 1. user - preferences, localization, theming, plugins 2. vm - helpers, colors, description, grouping, plugins 3. volume - marking for removal 4. SG - distinguish between SG templates and actual SGs, marking for removal 5. template - helpers Suffer from: 1. tag values are too short (255 chars max) 2. no account tags
- 30. The Role of ACS Tags in CloudStack-UI Where do we use tags? 1. VM a. Instance group b. UI-specific settings. i.e. color, description 2. Snapshot description 3. Template download URL 4. User a. Language b. Time format c. Interface color 5. Volume description 6. Plugins a. WebShell b. Pulse 30
- 31. The Role of ACS Tags in CloudStack-UI [cloudstack-ui-cleaner] 31 Current cleaner implementation is naive. Need to reimplement with event subscription.
- 32. The Role of ACS Tags in CloudStack-UI: [cloudstack-ui-cleaner] 32 Lack of delete chain operations for VM: 1. for SGs 2. Snapshots 3. Disks 4. Anything else? markResourceAutoExpunge?resource=sg&id=<sgid>&vm=<vmid> Suggestion:
- 33. The Role of ACS Tags in CloudStack-UI. An Example of Tags Usage for VMs 33 Suggestion: Add option to API to copy tags from template to VM
- 34. Extensions Ecosystem: ACS Umbrella 34
- 38. 38 Disk: read/write/errors Network: read/write/errors/drops
- 39. Extension Plugin: Shell In A Box 39
- 40. Shell In A Box: Benefits 40 ● High Interactivity ● Copy & Paste ● Automatic session termination on inactivity timeout ● No out-of-band access TODO: ● Vault plugin integration (passwordless SSH) ● Control-centre (SSH-sessions multiplexor)
- 41. Shell In A Box: Use of Tags 41
- 42. Shell In A Box: Console View 42
- 43. Extension (Vault) = Philosophy 43
- 44. Vault: Purpose 44 ● CMDB (Configuration Management Database) implementation ● Tag service replacement for native ACS (because native ACS tags lack functionality) ● Two-way secure communication for VM <-> CMDB (via Vault’s tokens, scopes, ACLs) ● One-time tokens for Webshell (private SSH keys storage, passwordless SSH access) ● The basis for Applications plugin
- 46. Thoughts on Project Direction 46
- 47. Project Direction - Traditional IaaS vs IaC (CCA). More and More Users Don’t Need VMs - They Need: 47 Applications 1. deployed (templates) 2. configured (templates) 3. upgraded (seamlessly) 4. monitored (visually) 5. troubleshot (visually) 6. backed up and restored (automatically) 7. optimized (performance / price optimization) Decrease costs and simplify all mentioned above (DIY approach) OK. Sure, traditional users are still here (corporate users)
- 48. Development Process 1. Agile + Scrum + ZenHub 2. 2-week sprints 3. peer-to-peer code review 48
- 51. Development Process 1. Public: a. Docker hub releases ( https://hub.docker.com/r/bwsw/cloudstack-ui ) ■ docker pull bwsw/cloudstack-ui:latest ■ docker pull bwsw/cloudstack-ui:[version] b. Travis CI 2. Private: Jenkins a. Docker per-branch testing and deployment ■ http://sandbox-url/[branch-name] 51
- 52. Difficulties: ACS Advices 1. Missing fields in responses a. RestoreVM - missing jobinstancetype and jobinstanceid 2. Lowercase a. <jobstatus> b. <jobprocstatus> c. <jobresultcode> d. <jobresulttype> 3. Some responses contain <success>true</success> , while others contain entity 4. No Error codes 5. Strange naming a. UserVm instead of VirtualMachine (tags) b. getVMPassword, cleanVMReservationsCleanups 52
- 53. Difficulties: ACS Advices 1. Schedule format in createSnapshot is confusing 2. Results don't contain all necessary fields: 3. templatefilter is required in listTemplates, while isofilter is optional in listIsos 4. Tag operations are asynchronous (require polling) 5. Arrays in "list" responses are named inconsistently. For example, listVirtualMachines returns <virtualmachine>, while listAsyncJobs returns <asyncjobs> 6. Some of trues in { success: true } are strings “true” and some are booleans 53
- 54. Core Development Team 1. Ivan Kudryavtsev - Product Owner 2. Elena Ershova - Project Manager 3. Ilya Zolotukhin - me (technical consulting, review, PM) 4. Developers: a. Andrey Bents b. Vladimir Shakhov (3 more developers and a QA-engineer help when available) 54
- 55. About Bitworks Software 55 ● Telecommunications (ISP, XaaS, HPC) ● AdTech ● FinTech (NASDAQ technologies) ● Pharmaceutical (medical data processing, machine learning models) ● IoT ● Backend (Scala, Java, Python, Go) ● Frontend (Angular.js, Angular, React) ● QA (automation, manual) ● ML/ETL (Apache Spark, TensorFlow, etc.) ● Project Management (Scrum)
- 56. About Bitworks Software 56 WWW: https://bitworks.software/en Corporate Presentation: https://goo.gl/uYCzGu Please, ask for a free USB flash stick with the presentation if you are interested (we have some) E-mail: [email protected]
- 57. Many Thanks to Organizers 57