Ilya Zolotukhin, a team leader at Bitworks, presented on CloudStack-UI, an open source project to improve the user interface of the Apache CloudStack cloud computing platform. Some key points: - CloudStack-UI aims to improve the native CloudStack UI by focusing on simplicity, intuitive navigation, and early error detection from the user's perspective. - It uses modern technologies like Angular, TypeScript and Material Design, while the native UI relies on older jQuery. - Plugins allow extending functionality, like Shell In A Box for SSH access and Pulse for system monitoring. - Future goals include improving application deployment/management and moving beyond just infrastructure as a service (I

1. CloudStack-UI
Ilya Zolotukhin, Product Team Leader, Bitworks
mailto: zolotukhin_ii@bitworks.software
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

35. Extension Plugin: Pulse
35

36. Extension Plugin: Pulse
36

37. Pulse:
CPU/RAM
37

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

45. Vault: Technology
45

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

49. Development Process
49

50. Development Process
50

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:
info@bitworks.software

57. Many Thanks to Organizers
57

58. The End
Questions?
58