diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-03-14 20:35:16 +0300 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-04-03 18:38:16 +0300 |
commit | f2238a9b92a1a19ca2022c1be3e5eef061046ccd (patch) | |
tree | 9d15cf57226236cbf918a0d8616549e126250b1d /app/assets | |
parent | 2fceb4374141407b2f41ed7b6af5a0b6a2f9f4f1 (diff) |
Added the following ux improvements:
* Add text for the buttons on environment detail page
* Reduced the size of the charts
* Environment name is now a link
Also some general code cleanup
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/monitoring/prometheus_graph.js | 60 |
1 files changed, 33 insertions, 27 deletions
diff --git a/app/assets/javascripts/monitoring/prometheus_graph.js b/app/assets/javascripts/monitoring/prometheus_graph.js index 844a0785bc9..ce937fff9ad 100644 --- a/app/assets/javascripts/monitoring/prometheus_graph.js +++ b/app/assets/javascripts/monitoring/prometheus_graph.js @@ -1,4 +1,4 @@ -/* eslint-disable no-new*/ +/* eslint-disable no-new */ /* global Flash */ import d3 from 'd3'; @@ -21,9 +21,9 @@ class PrometheusGraph { const parentContainerWidth = $(prometheusGraphsContainer).parent().width() + extraAddedWidthParent; this.originalWidth = parentContainerWidth; - this.originalHeight = 400; + this.originalHeight = 330; this.width = parentContainerWidth - this.margin.left - this.margin.right; - this.height = 400 - this.margin.top - this.margin.bottom; + this.height = this.originalHeight - this.margin.top - this.margin.bottom; this.backOffRequestCounter = 0; this.configureGraph(); this.init(); @@ -49,13 +49,16 @@ class PrometheusGraph { }); } - plotValues(valuesToPlot, key) { + plotValues(key) { const x = d3.time.scale() .range([0, this.width]); const y = d3.scale.linear() .range([this.height, 0]); + this.graphSpecificProperties[key].xScale = x; + this.graphSpecificProperties[key].yScale = y; + const prometheusGraphContainer = `${prometheusGraphsContainer}[graph-type=${key}]`; const graphSpecifics = this.graphSpecificProperties[key]; @@ -67,13 +70,13 @@ class PrometheusGraph { .attr('transform', `translate(${this.margin.left},${this.margin.top})`); const axisLabelContainer = d3.select(prometheusGraphContainer) - .attr('width', this.originalWidth + this.marginLabelContainer.left + this.marginLabelContainer.right) - .attr('height', this.originalHeight + this.marginLabelContainer.bottom + this.marginLabelContainer.top) + .attr('width', this.originalWidth) + .attr('height', this.originalHeight) .append('g') .attr('transform', `translate(${this.marginLabelContainer.left},${this.marginLabelContainer.top})`); - x.domain(d3.extent(valuesToPlot, d => d.time)); - y.domain([0, d3.max(valuesToPlot.map(metricValue => metricValue.value))]); + x.domain(d3.extent(graphSpecifics.data, d => d.time)); + y.domain([0, d3.max(graphSpecifics.data.map(metricValue => metricValue.value))]); const xAxis = d3.svg.axis() .scale(x) @@ -108,13 +111,13 @@ class PrometheusGraph { .y(d => y(d.value)); chart.append('path') - .datum(valuesToPlot) + .datum(graphSpecifics.data) .attr('d', area) .attr('class', 'metric-area') .attr('fill', graphSpecifics.area_fill_color); chart.append('path') - .datum(valuesToPlot) + .datum(graphSpecifics.data) .attr('class', 'metric-line') .attr('stroke', graphSpecifics.line_color) .attr('fill', 'none') @@ -126,7 +129,7 @@ class PrometheusGraph { .attr('class', 'prometheus-graph-overlay') .attr('width', this.width) .attr('height', this.height) - .on('mousemove', this.handleMouseOverGraph.bind(this, x, y, valuesToPlot, chart, prometheusGraphContainer, key)); + .on('mousemove', this.handleMouseOverGraph.bind(this, x, y, chart, prometheusGraphContainer, key)); } // The legends from the metric @@ -139,9 +142,9 @@ class PrometheusGraph { .attr('stroke-width', '1') .attr({ x1: 0, - y1: this.originalHeight - this.marginLabelContainer.top, + y1: this.originalHeight - 80, x2: this.originalWidth - this.margin.right, - y2: this.originalHeight - this.marginLabelContainer.top, + y2: this.originalHeight - 80, }); axisLabelContainer.append('line') @@ -152,26 +155,26 @@ class PrometheusGraph { x1: 0, y1: 0, x2: 0, - y2: this.originalHeight - this.marginLabelContainer.top, + y2: this.originalHeight - 80, }); axisLabelContainer.append('text') .attr('class', 'label-axis-text') .attr('text-anchor', 'middle') - .attr('transform', `translate(15, ${(this.originalHeight - this.marginLabelContainer.top) / 2}) rotate(-90)`) + .attr('transform', `translate(15, ${(this.originalHeight - 80) / 2}) rotate(-90)`) .text(graphSpecifics.graph_legend_title); axisLabelContainer.append('rect') .attr('class', 'rect-axis-text') .attr('x', (this.originalWidth / 2) - this.margin.right) - .attr('y', this.originalHeight - this.marginLabelContainer.top - 20) + .attr('y', this.originalHeight - 100) .attr('width', 30) .attr('height', 80); axisLabelContainer.append('text') .attr('class', 'label-axis-text') .attr('x', (this.originalWidth / 2) - this.margin.right) - .attr('y', this.originalHeight - this.marginLabelContainer.top) + .attr('y', this.originalHeight - 80) .attr('dy', '.35em') .text('Time'); @@ -197,16 +200,18 @@ class PrometheusGraph { .attr('y', (this.originalHeight / 2) - 25); } - handleMouseOverGraph(x, y, valuesToPlot, chart, prometheusGraphContainer, key) { + handleMouseOverGraph(x, y, chart, prometheusGraphContainer, key) { + const graphSpecifics = this.graphSpecificProperties[key]; const rectOverlay = document.querySelector(`${prometheusGraphContainer} .prometheus-graph-overlay`); - const timeValueFromOverlay = x.invert(d3.mouse(rectOverlay)[0]); - const timeValueIndex = bisectDate(valuesToPlot, timeValueFromOverlay, 1); - const d0 = valuesToPlot[timeValueIndex - 1]; - const d1 = valuesToPlot[timeValueIndex]; + const mouseCoordOverlay = d3.mouse(rectOverlay)[0]; + const timeValueFromOverlay = x.invert(mouseCoordOverlay); + const timeValueIndex = bisectDate(graphSpecifics.data, timeValueFromOverlay, 1); + const d0 = graphSpecifics.data[timeValueIndex - 1]; + const d1 = graphSpecifics.data[timeValueIndex]; const currentData = timeValueFromOverlay - d0.time > d1.time - timeValueFromOverlay ? d1 : d0; - const maxValueMetric = y(d3.max(valuesToPlot.map(metricValue => metricValue.value))); + const maxValueMetric = y(d3.max(graphSpecifics.data.map(metricValue => metricValue.value))); const currentTimeCoordinate = x(currentData.time); - const graphSpecifics = this.graphSpecificProperties[key]; + // Remove the current selectors d3.selectAll(`${prometheusGraphContainer} .selected-metric-line`).remove(); d3.selectAll(`${prometheusGraphContainer} .circle-metric`).remove(); @@ -263,12 +268,14 @@ class PrometheusGraph { cpu_values: { area_fill_color: '#edf3fc', line_color: '#5b99f7', - graph_legend_title: 'CPU utilization (%)', + graph_legend_title: 'CPU Usage (Cores)', + data: [], }, memory_values: { area_fill_color: '#fca326', line_color: '#fc6d26', - graph_legend_title: 'Memory usage (MB)', + graph_legend_title: 'Memory Usage (MB)', + data: [], }, }; @@ -328,7 +335,6 @@ class PrometheusGraph { })); } }); - this.data = metricTypes; } } |