Skip to content

Convert Javascript to using Vue.js in Monitor Suite

Dylan Oliver Teague requested to merge feature/vuejs-monitoring into main


Since there has been discussion of moving from xdaq to a more modern framework such as Vue.js, this MR acts as a proof of concept.

Since Vue is a reactive framework, a template for the monitor table can be made and then the Vue class object can be updated and Vue handles the HTML update automatically. Them means very little need to write js code that directly interfaces with the html which makes the code cleaner and less prone to errors. In the current shelfMonitor.js, now there is a template string of the html for the table and the vue methods for filling and updating the monitorables. Having the literal HTML instead of DOMs calls to create and fill the elements needed for the table makes changing the table format also significantly easier.

Even if vue js is not used project-wide, this change may be beneficial for clarity of the code.

It should be noted that vue has many more bells and whistles, so this MR should be seen a partially an example of how Vue could be integrated into the gem online software, but please note this is by no means the full extent of its capabilities

Related Issue

First attempt of #128 for the monitoring suite.

How Has This Been Tested?

image The code should effectively change no frontend user experience, and it seems to work in that regard

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)


  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
Edited by Dylan Oliver Teague

Merge request reports