Add frontend validation for uploading metrics images

Summary

When uploading an image to the metrics tab, there is no validation in the frontend of the URL, when an invalid URL is passed, it will only fail after clicking upload.

By adding validation in the frontend, it will allow the user to quickly see the mistake and have the option to fix rather than starting the process over.

Steps to reproduce

  1. Navigate to Monitor > Incidents page
  2. Create new or open an existing incident
  3. Navigate to Metrics tab of the incident
  4. Add new metric image using incorrectly formatted URL

Relevant logs and/or screenshots

Validation rules listed in pop up but not enforced:

Screenshot_2022-12-20_at_15.06.58

Possible fixes

Implementation guide

Files to look at:

  • app/assets/javascripts/vue_shared/components/metric_images/metric_images_tab.vue