Add empty state for graphs with no values

3 files changed, 91 insertions, 16 deletions

diff --git a/spec/javascripts/monitoring/graph_spec.js b/spec/javascripts/monitoring/graph_spec.js
index 4cc18afdf24..59d6d4f3a7f 100644
--- a/spec/javascripts/monitoring/graph_spec.js
+++ b/spec/javascripts/monitoring/graph_spec.js
@@ -5,6 +5,7 @@ import {
   deploymentData,
   convertDatesMultipleSeries,
   singleRowMetricsMultipleSeries,
+  queryWithoutData,
 } from './mock_data';
 
 const tagsPath = 'http://test.host/frontend-fixtures/environments-project/tags';
@@ -104,4 +105,23 @@ describe('Graph', () => {
 
     expect(component.currentData).toBe(component.timeSeries[0].values[10]);
   });
+
+  describe('Without data to display', () => {
+    it('shows a "no data to display" empty state on a graph', done => {
+      const component = createComponent({
+        graphData: queryWithoutData,
+        deploymentData,
+        tagsPath,
+        projectPath,
+      });
+
+      Vue.nextTick(() => {
+        expect(
+          component.$el.querySelector('.js-no-data-to-display text').textContent.trim(),
+        ).toEqual('No data to display');
+
+        done();
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/monitoring/mock_data.js b/spec/javascripts/monitoring/mock_data.js
index 6c833b17f98..18ad9843d22 100644
--- a/spec/javascripts/monitoring/mock_data.js
+++ b/spec/javascripts/monitoring/mock_data.js
@@ -14,7 +14,7 @@ export const metricsGroupsAPIResponse = {
           queries: [
             {
               query_range: 'avg(container_memory_usage_bytes{%{environment_filter}}) / 2^20',
-              y_label: 'Memory',
+              label: 'Memory',
               unit: 'MiB',
               result: [
                 {
@@ -324,12 +324,15 @@ export const metricsGroupsAPIResponse = {
           ],
         },
         {
+          id: 6,
           title: 'CPU usage',
           weight: 1,
           queries: [
             {
               query_range:
                 'avg(rate(container_cpu_usage_seconds_total{%{environment_filter}}[2m])) * 100',
+              label: 'Core Usage',
+              unit: 'Cores',
               result: [
                 {
                   metric: {},
@@ -639,6 +642,39 @@ export const metricsGroupsAPIResponse = {
         },
       ],
     },
+    {
+      group: 'NGINX',
+      priority: 2,
+      metrics: [
+        {
+          id: 100,
+          title: 'Http Error Rate',
+          weight: 100,
+          queries: [
+            {
+              query_range:
+                'sum(rate(nginx_upstream_responses_total{status_code="5xx", upstream=~"nginx-test-8691397-production-.*"}[2m])) / sum(rate(nginx_upstream_responses_total{upstream=~"nginx-test-8691397-production-.*"}[2m])) * 100',
+              label: '5xx errors',
+              unit: '%',
+              result: [
+                {
+                  metric: {},
+                  values: [
+                    [1495700554.925, NaN],
+                    [1495700614.925, NaN],
+                    [1495700674.925, NaN],
+                    [1495700734.925, NaN],
+                    [1495700794.925, NaN],
+                    [1495700854.925, NaN],
+                    [1495700914.925, NaN],
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
   ],
   last_update: '2017-05-25T13:18:34.949Z',
 };
@@ -6526,6 +6562,21 @@ export const singleRowMetricsMultipleSeries = [
   },
 ];
 
+export const queryWithoutData = {
+  title: 'HTTP Error rate',
+  weight: 10,
+  y_label: 'Http Error Rate',
+  queries: [
+    {
+      query_range:
+        'sum(rate(nginx_upstream_responses_total{status_code="5xx", upstream=~"nginx-test-8691397-production-.*"}[2m])) / sum(rate(nginx_upstream_responses_total{upstream=~"nginx-test-8691397-production-.*"}[2m])) * 100',
+      label: '5xx errors',
+      unit: '%',
+      result: [],
+    },
+  ],
+};
+
 export function convertDatesMultipleSeries(multipleSeries) {
   const convertedMultiple = multipleSeries;
   multipleSeries.forEach((column, index) => {
diff --git a/spec/javascripts/monitoring/monitoring_store_spec.js b/spec/javascripts/monitoring/monitoring_store_spec.js
index bf68c911549..d8a980c874d 100644
--- a/spec/javascripts/monitoring/monitoring_store_spec.js
+++ b/spec/javascripts/monitoring/monitoring_store_spec.js
@@ -1,31 +1,35 @@
 import MonitoringStore from '~/monitoring/stores/monitoring_store';
 import MonitoringMock, { deploymentData, environmentData } from './mock_data';
 
-describe('MonitoringStore', function() {
-  this.store = new MonitoringStore();
-  this.store.storeMetrics(MonitoringMock.data);
-
-  it('contains one group that contains two queries sorted by priority', () => {
-    expect(this.store.groups).toBeDefined();
-    expect(this.store.groups.length).toEqual(1);
-    expect(this.store.groups[0].metrics.length).toEqual(2);
+describe('MonitoringStore', () => {
+  const store = new MonitoringStore();
+  store.storeMetrics(MonitoringMock.data);
+
+  it('contains two groups that contains, one of which has two queries sorted by priority', () => {
+    expect(store.groups).toBeDefined();
+    expect(store.groups.length).toEqual(2);
+    expect(store.groups[0].metrics.length).toEqual(2);
   });
 
   it('gets the metrics count for every group', () => {
-    expect(this.store.getMetricsCount()).toEqual(2);
+    expect(store.getMetricsCount()).toEqual(3);
   });
 
   it('contains deployment data', () => {
-    this.store.storeDeploymentData(deploymentData);
+    store.storeDeploymentData(deploymentData);
 
-    expect(this.store.deploymentData).toBeDefined();
-    expect(this.store.deploymentData.length).toEqual(3);
-    expect(typeof this.store.deploymentData[0]).toEqual('object');
+    expect(store.deploymentData).toBeDefined();
+    expect(store.deploymentData.length).toEqual(3);
+    expect(typeof store.deploymentData[0]).toEqual('object');
   });
 
   it('only stores environment data that contains deployments', () => {
-    this.store.storeEnvironmentsData(environmentData);
+    store.storeEnvironmentsData(environmentData);
+
+    expect(store.environmentsData.length).toEqual(2);
+  });
 
-    expect(this.store.environmentsData.length).toEqual(2);
+  it('removes the data if all the values from a query are not defined', () => {
+    expect(store.groups[1].metrics[0].queries[0].result.length).toEqual(0);
   });
 });