Google Summer of Code @ApacheCloudStack | Final Report.
Introduction
Apache CloudStack is open source software designed to deploy and manage large networks of virtual machines, as a highly available, highly scalable Infrastructure as a Service (IaaS) cloud computing platform and with the release of CloudStack 4.15 LTS, a new modern UI was added. This GSoC project aims to implement the two major UX enhancements for the incoming newer versions, they are:
- Navigation using Keyboard Shortcuts on CloudStack Management Server.
- AutoScroll to the first error field while deploying a VM or any other form.
PS: link to my GSoC proposal CloudStack and RocketChat. Yep, I contributed & drafted proposals for two organisations.😅
Navigation using Keyboard Shortcuts on CloudStack Management Server:
At first, I thought the project would be easy but eventually developed a library for handling the events on a different keypress.
Design: So, let us have a look at what exactly we wanted to achieve here:
So, as the flow chart suggests we need to call the same function on a specific keypress, which is being called on the click event.
Get Apurv’s stories in your inbox
Join Medium for free to get updates from this writer.
Implementation: Apache CloudStack Management Server UI is based on Vue.js. Though I do not have any experience working with Vue, but I had some really good experience with Reactjs and its concepts, so decided to make a new vue application and implemented keyboard shortkeys on it(repository | live). And that helped a lot for both concepts and in general how vue works.
Now In order to implement the feature, we need to create a new vue directive. So decided to go with the name “shortkey” so that we can use it inside any element to add a keyboard shortcut and the “@shortkey” for handling the method similar to click or v-on.
For the library part, took the inspiration from this awesome library called vue-shortkeys but it had some missing features like support for multiple character key combinations eg: “c + a” so implemented these features with optimizations.
This is how we can add shortkey directive to the elements that accept the shortcut. The shortkey must have explicitly which keys will be used and function in the modifier @shortkey will be called repeatedly while the key is pressed.
Challenges: Let’s start with the first challenge that was, whenever any user presses F all the shortkeys must be visible to them(just like vim). I had some good experience working with Redux & Context on Reactjs, which is used for Global state management and But here, we’re using the vuex store, which does similar things for Vue applications. Hence created a global boolean state variable called showShortkeys and conditionally rendered the elements based on this state.
The other challenge was to add the directive “v-shortkey” and the function modifier @shortkey on the Side Menu. Since every component was mapped using v-model. This was quite a task to go to almost every component and add the directive and map it.
You can find work done under this PR #5122.
AutoScroll to the first error field while deploying a VM or any other form:
The task was to auto-scroll to the first error field on form submission, for eg: when deploying an instance if you simply click ok without selecting network it will prompt you with an error and then you’ll need to scroll back to the network place and add it. We could be more intuitive and automatically move the focus of the user back at the networks place in the form, where the user can easily add or select a network.
Design & Implementation: After reading and trying out different methods to scroll to any element and messing up the code.
I finally took a step back and tried going through the Vue Ant Design documentation especially the forms part and guess what I found the simplest and very effective way to scroll on the error field. On form submission, we were using the method, validateFields which validate the specified fields and get their values and errors. If you don’t specify the parameter of fieldNames, you will validate all fields.
So by following the documentation tried using validateFieldsAndScroll, the function is similar to validateFields, but after validation, if the target field is not in visible area of the form, form will be automatically scrolled to the target field area. Which uses this dom-scroll-into-view library under the hood to scroll to the target field.
Challenges: Some forms like deployVM are used to scroll to the error field, but the field is still hidden due to Navigation Bar. So for this, we need some top offset so that it can show the error field.
You can find work done under this PR #5200
Experience
The GSoC was truly an amazing & unique experience, I learned many different things about technologies, scalability, best practices and much more. It was a wonderful experience working with the organization and amazing community at Apache CloudStack.
Apart from that, I’ve got some really cool mentors David Jumani, Boris Stoyanov and Rohit Yadav from ShapeBlue, who were always there for me when I was stuck. I would like to thank them for patiently reviewing my code, guiding and helping me through the program. Their feedback really helped me improve during this period.
At last, Thanks to Google for the amazing opportunity and for making the summer full of learnings! 🙌
