1 files changed, 34 insertions, 40 deletions

diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue
index d3157b731b2..5e7c9b5d906 100644
--- a/app/assets/javascripts/monitoring/components/empty_state.vue
+++ b/app/assets/javascripts/monitoring/components/empty_state.vue
@@ -1,12 +1,19 @@
 <script>
-import { GlEmptyState } from '@gitlab/ui';
+import { GlLoadingIcon, GlEmptyState } from '@gitlab/ui';
 import { __ } from '~/locale';
+import { dashboardEmptyStates } from '../constants';
 
 export default {
   components: {
+    GlLoadingIcon,
     GlEmptyState,
   },
   props: {
+    selectedState: {
+      type: String,
+      required: true,
+      validator: state => Object.values(dashboardEmptyStates).includes(state),
+    },
     documentationPath: {
       type: String,
       required: true,
@@ -21,10 +28,6 @@ export default {
       required: false,
       default: '',
     },
-    selectedState: {
-      type: String,
-      required: true,
-    },
     emptyGettingStartedSvgPath: {
       type: String,
       required: true,
@@ -53,52 +56,49 @@ export default {
   },
   data() {
     return {
+      /**
+       * Possible empty states.
+       * Keys in each state must match GlEmptyState props
+       */
       states: {
-        gettingStarted: {
-          svgUrl: this.emptyGettingStartedSvgPath,
+        [dashboardEmptyStates.GETTING_STARTED]: {
+          svgPath: 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: __('Install on clusters'),
-          buttonPath: this.clustersPath,
+          primaryButtonText: __('Install on clusters'),
+          primaryButtonLink: this.clustersPath,
           secondaryButtonText: __('Configure existing installation'),
-          secondaryButtonPath: this.settingsPath,
+          secondaryButtonLink: this.settingsPath,
         },
-        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.`),
-          buttonText: __('View documentation'),
-          buttonPath: this.documentationPath,
-          secondaryButtonText: '',
-          secondaryButtonPath: '',
-        },
-        noData: {
-          svgUrl: this.emptyNoDataSvgPath,
+        [dashboardEmptyStates.NO_DATA]: {
+          svgPath: this.emptyNoDataSvgPath,
           title: __('No data found'),
           description: __(`You are connected to the Prometheus server, but there is currently
               no data to display.`),
-          buttonText: __('Configure Prometheus'),
-          buttonPath: this.settingsPath,
+          primaryButtonText: __('Configure Prometheus'),
+          primaryButtonLink: this.settingsPath,
           secondaryButtonText: '',
-          secondaryButtonPath: '',
+          secondaryButtonLink: '',
         },
-        unableToConnect: {
-          svgUrl: this.emptyUnableToConnectSvgPath,
+        [dashboardEmptyStates.UNABLE_TO_CONNECT]: {
+          svgPath: this.emptyUnableToConnectSvgPath,
           title: __('Unable to connect to Prometheus server'),
           description: __(
             'Ensure connectivity is available from the GitLab server to the Prometheus server',
           ),
-          buttonText: __('View documentation'),
-          buttonPath: this.documentationPath,
+          primaryButtonText: __('View documentation'),
+          primaryButtonLink: this.documentationPath,
           secondaryButtonText: __('Configure Prometheus'),
-          secondaryButtonPath: this.settingsPath,
+          secondaryButtonLink: this.settingsPath,
         },
       },
     };
   },
   computed: {
+    isLoading() {
+      return this.selectedState === dashboardEmptyStates.LOADING;
+    },
     currentState() {
       return this.states[this.selectedState];
     },
@@ -107,14 +107,8 @@ export default {
 </script>
 
 <template>
-  <gl-empty-state
-    :title="currentState.title"
-    :description="currentState.description"
-    :primary-button-text="currentState.buttonText"
-    :primary-button-link="currentState.buttonPath"
-    :secondary-button-text="currentState.secondaryButtonText"
-    :secondary-button-link="currentState.secondaryButtonPath"
-    :svg-path="currentState.svgUrl"
-    :compact="compact"
-  />
+  <div>
+    <gl-loading-icon v-if="isLoading" size="xl" class="gl-my-9" />
+    <gl-empty-state v-if="currentState" v-bind="currentState" :compact="compact" />
+  </div>
 </template>