2 files changed, 24 insertions, 8 deletions
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 192473b7dd1..f80a26b3fd4 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -23,6 +23,9 @@
         settingsPath: metricsData.settingsPath,
         metricsEndpoint: metricsData.additionalMetrics,
         deploymentEndpoint: metricsData.deploymentEndpoint,
+        emptyGettingStartedSvgPath: metricsData.emptyGettingStartedSvgPath,
+        emptyLoadingSvgPath: metricsData.emptyLoadingSvgPath,
+        emptyUnableToConnectSvgPath: metricsData.emptyUnableToConnectSvgPath,
         showEmptyState: true,
         updateAspectRatio: false,
         updatedAspectRatios: 0,
@@ -109,5 +112,8 @@
     :selected-state="state"
     :documentation-path="documentationPath"
     :settings-path="settingsPath"
+    :empty-getting-started-svg-path="emptyGettingStartedSvgPath"
+    :empty-loading-svg-path="emptyLoadingSvgPath"
+    :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 a8708be76de..a7b483f6786 100644
--- a/app/assets/javascripts/monitoring/components/empty_state.vue
+++ b/app/assets/javascripts/monitoring/components/empty_state.vue
@@ -1,8 +1,4 @@
 <script>
-  import gettingStartedSvg from 'empty_states/monitoring/_getting_started.svg';
-  import loadingSvg from 'empty_states/monitoring/_loading.svg';
-  import unableToConnectSvg from 'empty_states/monitoring/_unable_to_connect.svg';
-
   export default {
     props: {
       documentationPath: {
@@ -18,24 +14,36 @@
         type: String,
         required: true,
       },
+      emptyGettingStartedSvgPath: {
+        type: String,
+        required: true,
+      },
+      emptyLoadingSvgPath: {
+        type: String,
+        required: true,
+      },
+      emptyUnableToConnectSvgPath: {
+        type: String,
+        required: true,
+      },
     },
     data() {
       return {
         states: {
           gettingStarted: {
-            svg: gettingStartedSvg,
+            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.',
             buttonText: 'Configure Prometheus',
           },
           loading: {
-            svg: loadingSvg,
+            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.',
             buttonText: 'View documentation',
           },
           unableToConnect: {
-            svg: unableToConnectSvg,
+            svgUrl: this.emptyUnableToConnectSvgPath,
             title: 'Unable to connect to Prometheus server',
             description: 'Ensure connectivity is available from the GitLab server to the ',
             buttonText: 'View documentation',
@@ -66,7 +74,9 @@
 <template>
   <div class="prometheus-state">
     <div class="row">
-      <div class="col-md-4 col-md-offset-4 state-svg" v-html="currentState.svg"></div>
+      <div class="col-md-4 col-md-offset-4 state-svg svg-content">
+        <img :src="currentState.svgUrl"/>
+      </div>
     </div>
     <div class="row">
       <div class="col-md-6 col-md-offset-3">