add no_data illustration to monitoring empty state

2 files changed, 10 insertions, 1 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 8ca94ef3e2a..10b3a4d2fee 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -73,6 +73,10 @@
         type: String,
         required: true,
       },
+      emptyNoDataSvgPath: {
+        type: String,
+        required: true,
+      },
       emptyUnableToConnectSvgPath: {
         type: String,
         required: true,
@@ -188,6 +192,7 @@
     :clusters-path="clustersPath"
     :empty-getting-started-svg-path="emptyGettingStartedSvgPath"
     :empty-loading-svg-path="emptyLoadingSvgPath"
+    :empty-no-data-svg-path="emptyNoDataSvgPath"
     :empty-unable-to-connect-svg-path="emptyUnableToConnectSvgPath"
   />
 </template>
diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue
index 9517b8ccb67..fbf451fce68 100644
--- a/app/assets/javascripts/monitoring/components/empty_state.vue
+++ b/app/assets/javascripts/monitoring/components/empty_state.vue
@@ -27,6 +27,10 @@
         type: String,
         required: true,
       },
+      emptyNoDataSvgPath: {
+        type: String,
+        required: true,
+      },
       emptyUnableToConnectSvgPath: {
         type: String,
         required: true,
@@ -54,7 +58,7 @@
             buttonPath: this.documentationPath,
           },
           noData: {
-            svgUrl: this.emptyUnableToConnectSvgPath,
+            svgUrl: this.emptyNoDataSvgPath,
             title: 'No data found',
             description: `You are connected to the Prometheus server, but there is currently
               no data to display.`,