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

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);

changelogs/unreleased/35652-prometheus-service-page-shows-error.yml

+---
+title: Fix flash errors showing up on a non configured prometheus integration
+merge_request: 35652
+author:
+type: fixed

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();