diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue index 029bb64a99035a2e25fe2806bc17aa979d13b541..9c785f4ada810b94fa6ab85017d60a182335ceaf 100644 --- a/app/assets/javascripts/monitoring/components/graph.vue +++ b/app/assets/javascripts/monitoring/components/graph.vue @@ -233,7 +233,6 @@ :graph-height="graphHeight" :margin="margin" :measurements="measurements" - :area-color-rgb="areaColorRgb" :legend-title="legendTitle" :y-axis-label="yAxisLabel" :time-series="timeSeries" @@ -249,17 +248,9 @@ :key="index" :generated-line-path="path.linePath" :generated-area-path="path.areaPath" - :line-color="lineColorRgb" - :area-color="areaColorRgb" + :line-color="path.lineColor" + :area-color="path.areaColor" /> - <rect - class="prometheus-graph-overlay" - :width="(graphWidth - 70)" - :height="(graphHeight - 100)" - transform="translate(-5, 20)" - ref="graphOverlay" - @mousemove="handleMouseOverGraph($event)"> - </rect> <monitoring-deployment :show-deploy-info="showDeployInfo" :deployment-data="reducedDeploymentData" diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue index 621e5fe337262a400be28b955af3129aca1b3b44..a43dad8e601fd244a028803acb5db05171a9d458 100644 --- a/app/assets/javascripts/monitoring/components/graph/legend.vue +++ b/app/assets/javascripts/monitoring/components/graph/legend.vue @@ -19,10 +19,6 @@ type: Object, required: true, }, - areaColorRgb: { - type: String, - required: true, - }, legendTitle: { type: String, required: true, @@ -156,7 +152,7 @@ :key="index" :transform="translateLegendGroup(index)"> <rect - :fill="areaColorRgb" + :fill="series.areaColor" :width="measurements.legends.width" :height="measurements.legends.height" x="20" diff --git a/app/assets/javascripts/monitoring/components/monitoring_paths.vue b/app/assets/javascripts/monitoring/components/monitoring_paths.vue index 2d17f544cb6a9c8408cd8334f89e5b1af19b6397..043f1bf66bbfb8ffb9bb9b86487bc40cbc8da374 100644 --- a/app/assets/javascripts/monitoring/components/monitoring_paths.vue +++ b/app/assets/javascripts/monitoring/components/monitoring_paths.vue @@ -33,7 +33,7 @@ :d="generatedLinePath" :stroke="lineColor" fill="none" - stroke-width="2" + stroke-width="1" transform="translate(-5, 20)"> </path> </g> diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js index 12943239b74ffca45d9c1c653a0bda1960bf8b0f..05d551e917c19202027abbe8f3ff985c41c147b9 100644 --- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js +++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js @@ -12,6 +12,9 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr const maxValueFromSeries = _.max(maxValues, val => val.maxValue); + let timeSeriesNumber = 1; + let lineColor = '#1f78d1'; + let areaColor = '#8fbce8'; return seriesData.map((timeSeries) => { const timeSeriesScaleX = d3.time.scale() .range([0, graphWidth - 70]); @@ -32,11 +35,46 @@ 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; + } + + if (timeSeriesNumber <= 5) { + timeSeriesNumber = timeSeriesNumber += 1; + } else { + timeSeriesNumber = 1; + } + return { linePath: lineFunction(timeSeries.values), areaPath: areaFunction(timeSeries.values), timeSeriesScaleX, values: timeSeries.values, + lineColor, + areaColor, }; }); } diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 7ae57be9f6e3b5e36c2cea98df1b58fe07926136..c53f7e8e1b4627f339f212e0bb1a3d9a066fdf3d 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -167,7 +167,7 @@ } .metric-area { - opacity: 0.8; + opacity: 0.1; } .prometheus-graph-overlay { diff --git a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js index 6bbc9811adba55d8111ee9f0225464acdaf37987..3daf6bf82dfd45b6747ae7269d5cf9047e674100 100644 --- a/spec/javascripts/monitoring/utils/multiple_time_series_spec.js +++ b/spec/javascripts/monitoring/utils/multiple_time_series_spec.js @@ -9,6 +9,8 @@ describe('Multiple time series', () => { 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); });