diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-09-01 16:28:23 -0500 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-09-07 09:19:12 -0500 |
commit | 057e84d6e3997033584339c5c7df1d2278af8ebd (patch) | |
tree | 63fb4a96a9d6e05cc52b2d544bbdd3d6b1815496 | |
parent | 0357726d29b51e6593509850c17c01e9c18fa55b (diff) | |
download | gitlab-ce-057e84d6e3997033584339c5c7df1d2278af8ebd.tar.gz |
Renamed some components
-rw-r--r-- | app/assets/javascripts/monitoring/components/graph.vue | 8 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/components/graph_path.vue (renamed from app/assets/javascripts/monitoring/components/monitoring_paths.vue) | 0 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/utils/multiple_time_series.js | 31 | ||||
-rw-r--r-- | changelogs/unreleased/additional-time-series-charts.yml | 2 | ||||
-rw-r--r-- | spec/javascripts/monitoring/graph_path_spec.js (renamed from spec/javascripts/monitoring/monitoring_paths_spec.js) | 13 | ||||
-rw-r--r-- | spec/javascripts/monitoring/utils/multiple_time_series_spec.js | 13 |
6 files changed, 24 insertions, 43 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue index cde2ff7ca2a..11bbeb9392b 100644 --- a/app/assets/javascripts/monitoring/components/graph.vue +++ b/app/assets/javascripts/monitoring/components/graph.vue @@ -3,7 +3,7 @@ import GraphLegend from './graph/legend.vue'; import GraphFlag from './graph/flag.vue'; import GraphDeployment from './graph/deployment.vue'; - import monitoringPaths from './monitoring_paths.vue'; + import GraphPath from './graph_path.vue'; import MonitoringMixin from '../mixins/monitoring_mixins'; import eventHub from '../event_hub'; import measurements from '../utils/measurements'; @@ -63,7 +63,7 @@ GraphLegend, GraphFlag, GraphDeployment, - monitoringPaths, + GraphPath, }, computed: { @@ -238,7 +238,7 @@ class="graph-data" :viewBox="innerViewBox" ref="graphData"> - <monitoring-paths + <graph-path v-for="(path, index) in timeSeries" :key="index" :generated-line-path="path.linePath" @@ -246,7 +246,7 @@ :line-color="path.lineColor" :area-color="path.areaColor" /> - <monitoring-deployment + <graph-deployment :show-deploy-info="showDeployInfo" :deployment-data="reducedDeploymentData" :graph-height="graphHeight" diff --git a/app/assets/javascripts/monitoring/components/monitoring_paths.vue b/app/assets/javascripts/monitoring/components/graph_path.vue index 043f1bf66bb..043f1bf66bb 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_paths.vue +++ b/app/assets/javascripts/monitoring/components/graph_path.vue diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js index 05d551e917c..c47da3daf80 100644 --- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js +++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js @@ -15,6 +15,9 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr let timeSeriesNumber = 1; let lineColor = '#1f78d1'; let areaColor = '#8fbce8'; + const lineColors = ['#1f78d1', '#fc9403', '#db3b21', '#1aaa55', '#6666c4']; + const areaColors = ['#8fbce8', '#feca81', '#ed9d90', '#8dd5aa', '#d1d1f0']; + return seriesData.map((timeSeries) => { const timeSeriesScaleX = d3.time.scale() .range([0, graphWidth - 70]); @@ -35,32 +38,8 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr .y1(d => timeSeriesScaleY(d.value)) .interpolate('linear'); - switch (timeSeriesNumber) { - case 1: - lineColor = '#1f78d1'; - areaColor = '#8fbce8'; - break; - case 2: - lineColor = '#fc9403'; - areaColor = '#feca81'; - break; - case 3: - lineColor = '#db3b21'; - areaColor = '#ed9d90'; - break; - case 4: - lineColor = '#1aaa55'; - areaColor = '#8dd5aa'; - break; - case 5: - lineColor = '#6666c4'; - areaColor = '#d1d1f0'; - break; - default: - lineColor = '#1f78d1'; - areaColor = '#8fbce8'; - break; - } + lineColor = lineColors[timeSeriesNumber - 1]; + areaColor = areaColors[timeSeriesNumber - 1]; if (timeSeriesNumber <= 5) { timeSeriesNumber = timeSeriesNumber += 1; diff --git a/changelogs/unreleased/additional-time-series-charts.yml b/changelogs/unreleased/additional-time-series-charts.yml index 80c1af54881..d5fd24cf2e7 100644 --- a/changelogs/unreleased/additional-time-series-charts.yml +++ b/changelogs/unreleased/additional-time-series-charts.yml @@ -1,5 +1,5 @@ --- -title: Added support the multiple time series for prometheus monitoring +title: Added support for multiple time series merge_request: !36893 author: type: changed diff --git a/spec/javascripts/monitoring/monitoring_paths_spec.js b/spec/javascripts/monitoring/graph_path_spec.js index d39db945e17..105fb852e8e 100644 --- a/spec/javascripts/monitoring/monitoring_paths_spec.js +++ b/spec/javascripts/monitoring/graph_path_spec.js @@ -1,10 +1,10 @@ import Vue from 'vue'; -import MonitoringPaths from '~/monitoring/components/monitoring_paths.vue'; +import GraphPath from '~/monitoring/components/graph_path.vue'; import createTimeSeries from '~/monitoring/utils/multiple_time_series'; import { singleRowMetricsMultipleSeries, convertDatesMultipleSeries } from './mock_data'; const createComponent = (propsData) => { - const Component = Vue.extend(MonitoringPaths); + const Component = Vue.extend(GraphPath); return new Component({ propsData, @@ -14,12 +14,13 @@ const createComponent = (propsData) => { const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries); const timeSeries = createTimeSeries(convertedMetrics[0].queries[0].result, 428, 272, 120); +const firstTimeSeries = timeSeries[0]; describe('Monitoring Paths', () => { it('renders two paths to represent a line and the area underneath it', () => { const component = createComponent({ - generatedLinePath: timeSeries[0].linePath, - generatedAreaPath: timeSeries[0].areaPath, + generatedLinePath: firstTimeSeries.linePath, + generatedAreaPath: firstTimeSeries.areaPath, lineColor: '#ccc', areaColor: '#fff', }); @@ -27,8 +28,8 @@ describe('Monitoring Paths', () => { const metricLine = component.$el.querySelector('.metric-line'); expect(metricArea.getAttribute('fill')).toBe('#fff'); - expect(metricArea.getAttribute('d')).toBe(timeSeries[0].areaPath); + expect(metricArea.getAttribute('d')).toBe(firstTimeSeries.areaPath); expect(metricLine.getAttribute('stroke')).toBe('#ccc'); - expect(metricLine.getAttribute('d')).toBe(timeSeries[0].linePath); + expect(metricLine.getAttribute('d')).toBe(firstTimeSeries.linePath); }); }); diff --git a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js index 3daf6bf82df..b78314accd0 100644 --- a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js +++ b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js @@ -3,15 +3,16 @@ import { convertDatesMultipleSeries, singleRowMetricsMultipleSeries } from '../m const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries); const timeSeries = createTimeSeries(convertedMetrics[0].queries[0].result, 428, 272, 120); +const firstTimeSeries = timeSeries[0]; describe('Multiple time series', () => { it('createTimeSeries returned array contains an object for each element', () => { - expect(typeof timeSeries[0].linePath).toEqual('string'); - expect(typeof timeSeries[0].areaPath).toEqual('string'); - expect(typeof timeSeries[0].timeSeriesScaleX).toEqual('function'); - expect(typeof timeSeries[0].areaColor).toEqual('string'); - expect(typeof timeSeries[0].lineColor).toEqual('string'); - expect(timeSeries[0].values instanceof Array).toEqual(true); + expect(typeof firstTimeSeries.linePath).toEqual('string'); + expect(typeof firstTimeSeries.areaPath).toEqual('string'); + expect(typeof firstTimeSeries.timeSeriesScaleX).toEqual('function'); + expect(typeof firstTimeSeries.areaColor).toEqual('string'); + expect(typeof firstTimeSeries.lineColor).toEqual('string'); + expect(firstTimeSeries.values instanceof Array).toEqual(true); }); it('createTimeSeries returns an array', () => { |