Shrink empty states for cluster health charts

Move failing test to jest
Remove computed property checks and use snapshots
Change text + inline button in description to secondary button

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>

app/assets/javascripts/monitoring/components/empty_state.vue

 <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>

ee/app/assets/javascripts/pages/projects/clusters/show/cluster_health.js

@@ -9,6 +9,7 @@ export default () => {
       showLegend: false,
       showPanels: false,
       forceSmallGraph: true,
+      smallEmptyState: true,
       currentEnvironmentName: '',
       environmentsEndpoint: '',
       hasMetrics: true,

ee/changelogs/unreleased/little-cluster-health-charts.yml

+---
+title: Shrink empty/loading states for cluster health charts
+merge_request:
+author:
+type: fixed

locale/gitlab.pot

@@ -4921,6 +4921,9 @@ msgstr ""
 msgid "Enforce DNS rebinding attack protection"
 msgstr ""
 
+msgid "Ensure connectivity is available from the GitLab server to the Prometheus server"
+msgstr ""
+
 msgid "Enter IP address range"
 msgstr ""
 
@@ -10782,9 +10785,6 @@ msgstr ""
 msgid "ProjectsDropdown|This feature requires browser localStorage support"
 msgstr ""
 
-msgid "Prometheus server"
-msgstr ""
-
 msgid "PrometheusAlerts|Add alert"
 msgstr ""
 

spec/frontend/monitoring/__snapshots__/dashboard_state_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EmptyState shows gettingStarted state 1`] = `
+<glemptystate-stub
+  description="Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments."
+  primarybuttonlink="/clustersPath"
+  primarybuttontext="Install on clusters"
+  secondarybuttonlink="/settingsPath"
+  secondarybuttontext="Configure existing installation"
+  svgpath="/path/to/getting-started.svg"
+  title="Get started with performance monitoring"
+/>
+`;
+
+exports[`EmptyState shows loading state 1`] = `
+<glemptystate-stub
+  description="Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available."
+  primarybuttonlink="/documentationPath"
+  primarybuttontext="View documentation"
+  secondarybuttonlink=""
+  secondarybuttontext=""
+  svgpath="/path/to/loading.svg"
+  title="Waiting for performance data"
+/>
+`;
+
+exports[`EmptyState shows unableToConnect state 1`] = `
+<glemptystate-stub
+  description="Ensure connectivity is available from the GitLab server to the Prometheus server"
+  primarybuttonlink="/documentationPath"
+  primarybuttontext="View documentation"
+  secondarybuttonlink="/settingsPath"
+  secondarybuttontext="Configure Prometheus"
+  svgpath="/path/to/unable-to-connect.svg"
+  title="Unable to connect to Prometheus server"
+/>
+`;

spec/frontend/monitoring/dashboard_state_spec.js

+import { shallowMount } from '@vue/test-utils';
+import EmptyState from '~/monitoring/components/empty_state.vue';
+
+function createComponent(props) {
+  return shallowMount(EmptyState, {
+    propsData: {
+      ...props,
+      settingsPath: '/settingsPath',
+      clustersPath: '/clustersPath',
+      documentationPath: '/documentationPath',
+      emptyGettingStartedSvgPath: '/path/to/getting-started.svg',
+      emptyLoadingSvgPath: '/path/to/loading.svg',
+      emptyNoDataSvgPath: '/path/to/no-data.svg',
+      emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
+    },
+  });
+}
+
+describe('EmptyState', () => {
+  it('shows gettingStarted state', () => {
+    const wrapper = createComponent({
+      selectedState: 'gettingStarted',
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('shows loading state', () => {
+    const wrapper = createComponent({
+      selectedState: 'loading',
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('shows unableToConnect state', () => {
+    const wrapper = createComponent({
+      selectedState: 'unableToConnect',
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

spec/javascripts/monitoring/dashboard_state_spec.js

-import Vue from 'vue';
-import EmptyState from '~/monitoring/components/empty_state.vue';
-import { statePaths } from './mock_data';
-
-function createComponent(props) {
-  const Component = Vue.extend(EmptyState);
-
-  return new Component({
-    propsData: {
-      ...props,
-      settingsPath: statePaths.settingsPath,
-      clustersPath: statePaths.clustersPath,
-      documentationPath: statePaths.documentationPath,
-      emptyGettingStartedSvgPath: '/path/to/getting-started.svg',
-      emptyLoadingSvgPath: '/path/to/loading.svg',
-      emptyNoDataSvgPath: '/path/to/no-data.svg',
-      emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
-    },
-  }).$mount();
-}
-
-function getTextFromNode(component, selector) {
-  return component.$el.querySelector(selector).firstChild.nodeValue.trim();
-}
-
-describe('EmptyState', () => {
-  describe('Computed props', () => {
-    it('currentState', () => {
-      const component = createComponent({
-        selectedState: 'gettingStarted',
-      });
-
-      expect(component.currentState).toBe(component.states.gettingStarted);
-    });
-
-    it('showButtonDescription returns a description with a link for the unableToConnect state', () => {
-      const component = createComponent({
-        selectedState: 'unableToConnect',
-      });
-
-      expect(component.showButtonDescription).toEqual(true);
-    });
-
-    it('showButtonDescription returns the description without a link for any other state', () => {
-      const component = createComponent({
-        selectedState: 'loading',
-      });
-
-      expect(component.showButtonDescription).toEqual(false);
-    });
-  });
-
-  it('should show the gettingStarted state', () => {
-    const component = createComponent({
-      selectedState: 'gettingStarted',
-    });
-
-    expect(component.$el.querySelector('svg')).toBeDefined();
-    expect(getTextFromNode(component, '.state-title')).toEqual(
-      component.states.gettingStarted.title,
-    );
-
-    expect(getTextFromNode(component, '.state-description')).toEqual(
-      component.states.gettingStarted.description,
-    );
-
-    expect(getTextFromNode(component, '.btn-success')).toEqual(
-      component.states.gettingStarted.buttonText,
-    );
-  });
-
-  it('should show the loading state', () => {
-    const component = createComponent({
-      selectedState: 'loading',
-    });
-
-    expect(component.$el.querySelector('svg')).toBeDefined();
-    expect(getTextFromNode(component, '.state-title')).toEqual(component.states.loading.title);
-    expect(getTextFromNode(component, '.state-description')).toEqual(
-      component.states.loading.description,
-    );
-
-    expect(getTextFromNode(component, '.btn-success')).toEqual(component.states.loading.buttonText);
-  });
-
-  it('should show the unableToConnect state', () => {
-    const component = createComponent({
-      selectedState: 'unableToConnect',
-    });
-
-    expect(component.$el.querySelector('svg')).toBeDefined();
-    expect(getTextFromNode(component, '.state-title')).toEqual(
-      component.states.unableToConnect.title,
-    );
-
-    expect(component.$el.querySelector('.state-description a')).toBeDefined();
-    expect(getTextFromNode(component, '.btn-success')).toEqual(
-      component.states.unableToConnect.buttonText,
-    );
-  });
-});