Merge branch 'fix-prometheus-empty-state-no-data' into 'master'

Add noData empty state to Prometheus graphs

Closes #42558

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

2 files changed, 16 insertions, 3 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 025e38ea99a..5afae93724b 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -76,7 +76,13 @@
             .then(data => this.store.storeDeploymentData(data))
             .catch(() => new Flash('Error getting deployment information.')),
         ])
-          .then(() => { this.showEmptyState = false; })
+          .then(() => {
+            if (this.store.groups.length < 1) {
+              this.state = 'noData';
+              return;
+            }
+            this.showEmptyState = false;
+          })
           .catch(() => { this.state = 'unableToConnect'; });
       },
 
diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue
index 87d1975d5ad..56cd60c583b 100644
--- a/app/assets/javascripts/monitoring/components/empty_state.vue
+++ b/app/assets/javascripts/monitoring/components/empty_state.vue
@@ -34,16 +34,23 @@
             svgUrl: this.emptyGettingStartedSvgPath,
             title: 'Get started with performance monitoring',
             description: `Stay updated about the performance and health
-of your environment by configuring Prometheus to monitor your deployments.`,
+              of your environment by configuring Prometheus to monitor your deployments.`,
             buttonText: 'Configure Prometheus',
           },
           loading: {
             svgUrl: this.emptyLoadingSvgPath,
             title: 'Waiting for performance data',
             description: `Creating graphs uses the data from the Prometheus server.
-If this takes a long time, ensure that data is available.`,
+              If this takes a long time, ensure that data is available.`,
             buttonText: 'View documentation',
           },
+          noData: {
+            svgUrl: this.emptyUnableToConnectSvgPath,
+            title: 'No data found',
+            description: `You are connected to the Prometheus server, but there is currently
+              no data to display.`,
+            buttonText: 'Configure Prometheus',
+          },
           unableToConnect: {
             svgUrl: this.emptyUnableToConnectSvgPath,
             title: 'Unable to connect to Prometheus server',