Use gl-empty-state for monitor charts

Move a unit test to jest and use snapshot tests

2 files changed, 34 insertions, 37 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 2cbda8ea05d..ed25a6e3684 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -124,6 +124,11 @@ export default {
       required: false,
       default: '',
     },
+    smallEmptyState: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -386,6 +391,7 @@ export default {
       :empty-loading-svg-path="emptyLoadingSvgPath"
       :empty-no-data-svg-path="emptyNoDataSvgPath"
       :empty-unable-to-connect-svg-path="emptyUnableToConnectSvgPath"
+      :compact="smallEmptyState"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue
index a3c6de14aa4..1bb40447a3e 100644
--- a/app/assets/javascripts/monitoring/components/empty_state.vue
+++ b/app/assets/javascripts/monitoring/components/empty_state.vue
@@ -1,7 +1,11 @@
 <script>
 import { __ } from '~/locale';
+import { GlEmptyState } from '@gitlab/ui';
 
 export default {
+  components: {
+    GlEmptyState,
+  },
   props: {
     documentationPath: {
       type: String,
@@ -37,6 +41,11 @@ export default {
       type: String,
       required: true,
     },
+    compact: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -58,6 +67,8 @@ export default {
               If this takes a long time, ensure that data is available.`),
           buttonText: __('View documentation'),
           buttonPath: this.documentationPath,
+          secondaryButtonText: '',
+          secondaryButtonPath: '',
         },
         noData: {
           svgUrl: this.emptyNoDataSvgPath,
@@ -66,13 +77,19 @@ export default {
               no data to display.`),
           buttonText: __('Configure Prometheus'),
           buttonPath: this.settingsPath,
+          secondaryButtonText: '',
+          secondaryButtonPath: '',
         },
         unableToConnect: {
           svgUrl: this.emptyUnableToConnectSvgPath,
           title: __('Unable to connect to Prometheus server'),
-          description: 'Ensure connectivity is available from the GitLab server to the ',
+          description: __(
+            'Ensure connectivity is available from the GitLab server to the Prometheus server',
+          ),
           buttonText: __('View documentation'),
           buttonPath: this.documentationPath,
+          secondaryButtonText: __('Configure Prometheus'),
+          secondaryButtonPath: this.settingsPath,
         },
       },
     };
@@ -81,45 +98,19 @@ export default {
     currentState() {
       return this.states[this.selectedState];
     },
-    showButtonDescription() {
-      if (this.selectedState === 'unableToConnect') return true;
-      return false;
-    },
   },
 };
 </script>
 
 <template>
-  <div class="row empty-state js-empty-state">
-    <div class="col-12">
-      <div class="state-svg svg-content">
-        <img :src="currentState.svgUrl" />
-      </div>
-    </div>
-
-    <div class="col-12">
-      <div class="text-content">
-        <h4 class="state-title text-center">{{ currentState.title }}</h4>
-        <p class="state-description">
-          {{ currentState.description }}
-          <a v-if="showButtonDescription" :href="settingsPath">{{ __('Prometheus server') }}</a>
-        </p>
-
-        <div class="text-center">
-          <a
-            v-if="currentState.buttonPath"
-            :href="currentState.buttonPath"
-            class="btn btn-success"
-            >{{ currentState.buttonText }}</a
-          >
-          <a
-            v-if="currentState.secondaryButtonPath"
-            :href="currentState.secondaryButtonPath"
-            class="btn"
-            >{{ currentState.secondaryButtonText }}</a
-          >
-        </div>
-      </div>
-    </div>
-  </div>
+  <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"
+  />
 </template>