Skip to content

Instantly share code, notes, and snippets.

@suvigyavijay

suvigyavijay/GSoC 2017.md

Last active August 28, 2017 22:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save suvigyavijay/23fc3da2df3016edddc20b7e5f2a7959 to your computer and use it in GitHub Desktop.
Save suvigyavijay/23fc3da2df3016edddc20b7e5f2a7959 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
GSoC 2017.md

GSoC 2017 | Vector - Performance Co-Pilot

Suvigya Vijay

Vector is a web application that produces graphs and performance dashboard from performance metrics provided via Performance Co-Pilot(PCP). The graph generated allows engineers to monitor host performance in real time. The user can select from a number of widgets available, to monitor necessary metrics to understand how system behaves and troubleshoot issues.

Vector currently provides us with a set number of widgets which are generally used to monitor performance of the system. My project was to extend the web application by adding a new feature that enables the user to add a new blank widget and then add metrics to the widget.

Project Links

GSoC Project Page: https://summerofcode.withgoogle.com/projects/#6183383211180032

GitHub Pull Request: Netflix/vector#148

GitHub Branch: https://github.com/Netflix/vector/tree/feat_custom_widget

Documentation: http://vectoross.io/docs/custom-widget.html

Mentors

  • Martin Spier
  • Henry Chang
  • Mark Goodwin

Tasks and Features Implemented

  • GUI: The basic GUI required for the custom widget feature was thought and implemented, as a modal form which takes in input from the user about the type of metric to be added to the widget.
  • Storing Metric Metadata: The types of metrics that the PCP WebAPI provides were listed and stored to populate the typeahead for easy metric selection. The metadata also contained basic description of the metric being added to the dashboard.
  • Modal: A custom widget modal was implemented using angular service for adding the widget.
  • Pushing Widget Definitions: The custom widget definitions was pushed to the existing widget definitions, and then the dashboard reloads to add the custom widget.
  • Modal Options: Additional widget and metric features were added to UI Options and Advanced Options for expert users. These options are not necessary to add a widget, but allow users to further control the added widget and metric.
  • Cumulative and Converted Metrics: For cumulative metrics, a checkbox was added to the modal, which automatically sets according to the metric selected based on semantic values from the metadata. For converted metric, the user can input a conversion function, thus manipulating the metric data being plotted.
  • Bug Fix: A bug relating the widgets reappearing on the dashboard was removed by adding a function to remove the widget from widgetsToLoad.
  • Enabling Local Storage and Saving Custom Widgets: The widgets currently added are temporary, the local storage needs to enabled. The Malhar-Angular-Dashboard allows using the LocalStorageAPI to enable saving the dashboard. This feature was partially implemented, but is buggy as of now and still needs to be edited.
  • Documentation: The basic documentation to add the custom widget was added on the official website.

Challenges Faced

There were several challenges I faced during GSoC period. However, the mentors were helpful in providing valuable suggestions and alternatives to them.

A major challenge was to push the widget defintions to predefined array. Dynamic addition of defintions is currently not possible in the Malhar-Angular-Dashboard being used in Vector. I found a quick fix to the problem by reloading the dashboard on every addition. This was done via toggling the ng-if in the dashboard div.

Another challenge was adding the conversion function for the converted metric model, to which I found the conversion fucntion as buggy itself. Once fixed, the feature will work without any problems.

Last but not the least, enabling local storage and saving the current dashboard is still a puzzle to me, I have successfully enabled the widgets to be saved to the local storage of the browser but once the page is refreshed, some widgets come out as blank and show no data. This problem is not persistant, it may or may not occur. I still need to figure out how it can be corrected.

Future Prospects

Once the local storage is successfully enabled, custom widgets can be saved making them permanent for the local client. This will further enable custom widgets to be shared with a simple querystring as

../?widgets=<widget1>,<widget2>&host=<host>&addcustom=<widgetdef1>,<widgetdef2>

Further Features can be added as follows:

  • Multiple Metric Widget
  • Enable preview from different hosts
  • Support multiple tabs for different hosts
  • Enabling Different Chart Types

Commits

Conclusion

Google Summer of Code 2017 was a great learning experience for me. With PCP, I got chance to work for an open source project which is used by a large number of people specifically performance engineers and futhermore learn how to use AngularJS Framework and write modular code to implement the feature. I hope my work helps people to add perform the simple task quickly and efficiently. At last, I thank my mentors for helping and guiding me throughout the GSoC period.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment