diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2018-11-29 19:22:43 +0000 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2018-11-29 19:22:43 +0000 |
commit | 40bb1bb363830763f33474a9f576d5a43c69bb5c (patch) | |
tree | 416aa23a6bbad66445bed362f2f4173fd376b15f /spec | |
parent | b05a36430404aa8eaeeed8560ed03c18117f6d72 (diff) | |
download | gitlab-ce-40bb1bb363830763f33474a9f576d5a43c69bb5c.tar.gz |
Add empty state for graphs with no values
Diffstat (limited to 'spec')
-rw-r--r-- | spec/javascripts/monitoring/graph_spec.js | 20 | ||||
-rw-r--r-- | spec/javascripts/monitoring/mock_data.js | 53 | ||||
-rw-r--r-- | spec/javascripts/monitoring/monitoring_store_spec.js | 34 |
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); }); }); |