Merge branch '35652-prometheus-service-page-shows-error' into 'master'

Resolve "Prometheus service page shows error"

Closes #35652

See merge request gitlab-org/gitlab-ce!14771

3 files changed, 18 insertions, 5 deletions

diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
index a4d50a52315..55c93923cc8 100644
--- a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
+++ b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
@@ -81,7 +81,11 @@ export default class PrometheusMetrics {
   loadActiveMetrics() {
     this.showMonitoringMetricsPanelState(PANEL_STATE.LOADING);
     backOff((next, stop) => {
-      $.getJSON(this.activeMetricsEndpoint)
+      $.ajax({
+        url: this.activeMetricsEndpoint,
+        dataType: 'json',
+        global: false,
+      })
         .done((res) => {
           if (res && res.success) {
             stop(res);
diff --git a/changelogs/unreleased/35652-prometheus-service-page-shows-error.yml b/changelogs/unreleased/35652-prometheus-service-page-shows-error.yml
new file mode 100644
index 00000000000..7e2a7222162
--- /dev/null
+++ b/changelogs/unreleased/35652-prometheus-service-page-shows-error.yml
@@ -0,0 +1,5 @@
+---
+title: Fix flash errors showing up on a non configured prometheus integration
+merge_request: 35652
+author:
+type: fixed
diff --git a/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js b/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js
index 2b3a821dbd9..b24567ffc0c 100644
--- a/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js
+++ b/spec/javascripts/prometheus_metrics/prometheus_metrics_spec.js
@@ -109,12 +109,16 @@ describe('PrometheusMetrics', () => {
 
     it('should show loader animation while response is being loaded and hide it when request is complete', (done) => {
       const deferred = $.Deferred();
-      spyOn($, 'getJSON').and.returnValue(deferred.promise());
+      spyOn($, 'ajax').and.returnValue(deferred.promise());
 
       prometheusMetrics.loadActiveMetrics();
 
       expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeFalsy();
-      expect($.getJSON).toHaveBeenCalledWith(prometheusMetrics.activeMetricsEndpoint);
+      expect($.ajax).toHaveBeenCalledWith({
+        url: prometheusMetrics.activeMetricsEndpoint,
+        dataType: 'json',
+        global: false,
+      });
 
       deferred.resolve({ data: metrics, success: true });
 
@@ -126,7 +130,7 @@ describe('PrometheusMetrics', () => {
 
     it('should show empty state if response failed to load', (done) => {
       const deferred = $.Deferred();
-      spyOn($, 'getJSON').and.returnValue(deferred.promise());
+      spyOn($, 'ajax').and.returnValue(deferred.promise());
       spyOn(prometheusMetrics, 'populateActiveMetrics');
 
       prometheusMetrics.loadActiveMetrics();
@@ -142,7 +146,7 @@ describe('PrometheusMetrics', () => {
 
     it('should populate metrics list once response is loaded', (done) => {
       const deferred = $.Deferred();
-      spyOn($, 'getJSON').and.returnValue(deferred.promise());
+      spyOn($, 'ajax').and.returnValue(deferred.promise());
       spyOn(prometheusMetrics, 'populateActiveMetrics');
 
       prometheusMetrics.loadActiveMetrics();