Merge branch '42558-add-monitoring-no-data-empty-state' into 'master'

Resolve "Prometheus graphs have no empty state when no data is present"

Closes #42558

See merge request gitlab-org/gitlab-ce!17759

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>

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.`,

app/views/projects/environments/metrics.html.haml

@@ -14,6 +14,7 @@
     "documentation-path": help_page_path('administration/monitoring/prometheus/index.md'),
     "empty-getting-started-svg-path": image_path('illustrations/monitoring/getting_started.svg'),
     "empty-loading-svg-path": image_path('illustrations/monitoring/loading.svg'),
+    "empty-no-data-svg-path": image_path('illustrations/monitoring/no_data.svg'),
     "empty-unable-to-connect-svg-path": image_path('illustrations/monitoring/unable_to_connect.svg'),
     "metrics-endpoint": additional_metrics_project_environment_path(@project, @environment, format: :json),
     "deployment-endpoint": project_environment_deployments_path(@project, @environment, format: :json),

spec/javascripts/monitoring/dashboard_spec.js

@@ -18,6 +18,7 @@ describe('Dashboard', () => {
     deploymentEndpoint: null,
     emptyGettingStartedSvgPath: '/path/to/getting-started.svg',
     emptyLoadingSvgPath: '/path/to/loading.svg',
+    emptyNoDataSvgPath: '/path/to/no-data.svg',
     emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
   };

spec/javascripts/monitoring/dashboard_state_spec.js

@@ -2,13 +2,22 @@ import Vue from 'vue';
 import EmptyState from '~/monitoring/components/empty_state.vue';
 import { statePaths } from './mock_data';
-const createComponent = (propsData) => {
+function createComponent(props) {
   const Component = Vue.extend(EmptyState);
   return new Component({
-    propsData,
+    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();
@@ -19,11 +28,6 @@ describe('EmptyState', () => {
     it('currentState', () => {
       const component = createComponent({
         selectedState: 'gettingStarted',
-        settingsPath: statePaths.settingsPath,
-        documentationPath: statePaths.documentationPath,
-        emptyGettingStartedSvgPath: 'foo',
-        emptyLoadingSvgPath: 'foo',
-        emptyUnableToConnectSvgPath: 'foo',
       });
       expect(component.currentState).toBe(component.states.gettingStarted);
@@ -32,11 +36,6 @@ describe('EmptyState', () => {
     it('showButtonDescription returns a description with a link for the unableToConnect state', () => {
       const component = createComponent({
         selectedState: 'unableToConnect',
-        settingsPath: statePaths.settingsPath,
-        documentationPath: statePaths.documentationPath,
-        emptyGettingStartedSvgPath: 'foo',
-        emptyLoadingSvgPath: 'foo',
-        emptyUnableToConnectSvgPath: 'foo',
       });
       expect(component.showButtonDescription).toEqual(true);
@@ -45,11 +44,6 @@ describe('EmptyState', () => {
     it('showButtonDescription returns the description without a link for any other state', () => {
       const component = createComponent({
         selectedState: 'loading',
-        settingsPath: statePaths.settingsPath,
-        documentationPath: statePaths.documentationPath,
-        emptyGettingStartedSvgPath: 'foo',
-        emptyLoadingSvgPath: 'foo',
-        emptyUnableToConnectSvgPath: 'foo',
       });
       expect(component.showButtonDescription).toEqual(false);
@@ -59,12 +53,6 @@ describe('EmptyState', () => {
   it('should show the gettingStarted state', () => {
     const component = createComponent({
       selectedState: 'gettingStarted',
-      settingsPath: statePaths.settingsPath,
-      clustersPath: statePaths.clustersPath,
-      documentationPath: statePaths.documentationPath,
-      emptyGettingStartedSvgPath: 'foo',
-      emptyLoadingSvgPath: 'foo',
-      emptyUnableToConnectSvgPath: 'foo',
     });
     expect(component.$el.querySelector('svg')).toBeDefined();
@@ -76,11 +64,6 @@ describe('EmptyState', () => {
   it('should show the loading state', () => {
     const component = createComponent({
       selectedState: 'loading',
-      settingsPath: statePaths.settingsPath,
-      documentationPath: statePaths.documentationPath,
-      emptyGettingStartedSvgPath: 'foo',
-      emptyLoadingSvgPath: 'foo',
-      emptyUnableToConnectSvgPath: 'foo',
     });
     expect(component.$el.querySelector('svg')).toBeDefined();
@@ -92,11 +75,6 @@ describe('EmptyState', () => {
   it('should show the unableToConnect state', () => {
     const component = createComponent({
       selectedState: 'unableToConnect',
-      settingsPath: statePaths.settingsPath,
-      documentationPath: statePaths.documentationPath,
-      emptyGettingStartedSvgPath: 'foo',
-      emptyLoadingSvgPath: 'foo',
-      emptyUnableToConnectSvgPath: 'foo',
     });
     expect(component.$el.querySelector('svg')).toBeDefined();