Commit f2238a9b authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

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
parent 2fceb437
/* eslint-disable no-new*/ /* eslint-disable no-new */
/* global Flash */ /* global Flash */
import d3 from 'd3'; import d3 from 'd3';
...@@ -21,9 +21,9 @@ class PrometheusGraph { ...@@ -21,9 +21,9 @@ class PrometheusGraph {
const parentContainerWidth = $(prometheusGraphsContainer).parent().width() + const parentContainerWidth = $(prometheusGraphsContainer).parent().width() +
extraAddedWidthParent; extraAddedWidthParent;
this.originalWidth = parentContainerWidth; this.originalWidth = parentContainerWidth;
this.originalHeight = 400; this.originalHeight = 330;
this.width = parentContainerWidth - this.margin.left - this.margin.right; 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.backOffRequestCounter = 0;
this.configureGraph(); this.configureGraph();
this.init(); this.init();
...@@ -49,13 +49,16 @@ class PrometheusGraph { ...@@ -49,13 +49,16 @@ class PrometheusGraph {
}); });
} }
plotValues(valuesToPlot, key) { plotValues(key) {
const x = d3.time.scale() const x = d3.time.scale()
.range([0, this.width]); .range([0, this.width]);
const y = d3.scale.linear() const y = d3.scale.linear()
.range([this.height, 0]); .range([this.height, 0]);
this.graphSpecificProperties[key].xScale = x;
this.graphSpecificProperties[key].yScale = y;
const prometheusGraphContainer = `${prometheusGraphsContainer}[graph-type=${key}]`; const prometheusGraphContainer = `${prometheusGraphsContainer}[graph-type=${key}]`;
const graphSpecifics = this.graphSpecificProperties[key]; const graphSpecifics = this.graphSpecificProperties[key];
...@@ -67,13 +70,13 @@ class PrometheusGraph { ...@@ -67,13 +70,13 @@ class PrometheusGraph {
.attr('transform', `translate(${this.margin.left},${this.margin.top})`); .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
const axisLabelContainer = d3.select(prometheusGraphContainer) const axisLabelContainer = d3.select(prometheusGraphContainer)
.attr('width', this.originalWidth + this.marginLabelContainer.left + this.marginLabelContainer.right) .attr('width', this.originalWidth)
.attr('height', this.originalHeight + this.marginLabelContainer.bottom + this.marginLabelContainer.top) .attr('height', this.originalHeight)
.append('g') .append('g')
.attr('transform', `translate(${this.marginLabelContainer.left},${this.marginLabelContainer.top})`); .attr('transform', `translate(${this.marginLabelContainer.left},${this.marginLabelContainer.top})`);
x.domain(d3.extent(valuesToPlot, d => d.time)); x.domain(d3.extent(graphSpecifics.data, d => d.time));
y.domain([0, d3.max(valuesToPlot.map(metricValue => metricValue.value))]); y.domain([0, d3.max(graphSpecifics.data.map(metricValue => metricValue.value))]);
const xAxis = d3.svg.axis() const xAxis = d3.svg.axis()
.scale(x) .scale(x)
...@@ -108,13 +111,13 @@ class PrometheusGraph { ...@@ -108,13 +111,13 @@ class PrometheusGraph {
.y(d => y(d.value)); .y(d => y(d.value));
chart.append('path') chart.append('path')
.datum(valuesToPlot) .datum(graphSpecifics.data)
.attr('d', area) .attr('d', area)
.attr('class', 'metric-area') .attr('class', 'metric-area')
.attr('fill', graphSpecifics.area_fill_color); .attr('fill', graphSpecifics.area_fill_color);
chart.append('path') chart.append('path')
.datum(valuesToPlot) .datum(graphSpecifics.data)
.attr('class', 'metric-line') .attr('class', 'metric-line')
.attr('stroke', graphSpecifics.line_color) .attr('stroke', graphSpecifics.line_color)
.attr('fill', 'none') .attr('fill', 'none')
...@@ -126,7 +129,7 @@ class PrometheusGraph { ...@@ -126,7 +129,7 @@ class PrometheusGraph {
.attr('class', 'prometheus-graph-overlay') .attr('class', 'prometheus-graph-overlay')
.attr('width', this.width) .attr('width', this.width)
.attr('height', this.height) .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 // The legends from the metric
...@@ -139,9 +142,9 @@ class PrometheusGraph { ...@@ -139,9 +142,9 @@ class PrometheusGraph {
.attr('stroke-width', '1') .attr('stroke-width', '1')
.attr({ .attr({
x1: 0, x1: 0,
y1: this.originalHeight - this.marginLabelContainer.top, y1: this.originalHeight - 80,
x2: this.originalWidth - this.margin.right, x2: this.originalWidth - this.margin.right,
y2: this.originalHeight - this.marginLabelContainer.top, y2: this.originalHeight - 80,
}); });
axisLabelContainer.append('line') axisLabelContainer.append('line')
...@@ -152,26 +155,26 @@ class PrometheusGraph { ...@@ -152,26 +155,26 @@ class PrometheusGraph {
x1: 0, x1: 0,
y1: 0, y1: 0,
x2: 0, x2: 0,
y2: this.originalHeight - this.marginLabelContainer.top, y2: this.originalHeight - 80,
}); });
axisLabelContainer.append('text') axisLabelContainer.append('text')
.attr('class', 'label-axis-text') .attr('class', 'label-axis-text')
.attr('text-anchor', 'middle') .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); .text(graphSpecifics.graph_legend_title);
axisLabelContainer.append('rect') axisLabelContainer.append('rect')
.attr('class', 'rect-axis-text') .attr('class', 'rect-axis-text')
.attr('x', (this.originalWidth / 2) - this.margin.right) .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('width', 30)
.attr('height', 80); .attr('height', 80);
axisLabelContainer.append('text') axisLabelContainer.append('text')
.attr('class', 'label-axis-text') .attr('class', 'label-axis-text')
.attr('x', (this.originalWidth / 2) - this.margin.right) .attr('x', (this.originalWidth / 2) - this.margin.right)
.attr('y', this.originalHeight - this.marginLabelContainer.top) .attr('y', this.originalHeight - 80)
.attr('dy', '.35em') .attr('dy', '.35em')
.text('Time'); .text('Time');
...@@ -197,16 +200,18 @@ class PrometheusGraph { ...@@ -197,16 +200,18 @@ class PrometheusGraph {
.attr('y', (this.originalHeight / 2) - 25); .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 rectOverlay = document.querySelector(`${prometheusGraphContainer} .prometheus-graph-overlay`);
const timeValueFromOverlay = x.invert(d3.mouse(rectOverlay)[0]); const mouseCoordOverlay = d3.mouse(rectOverlay)[0];
const timeValueIndex = bisectDate(valuesToPlot, timeValueFromOverlay, 1); const timeValueFromOverlay = x.invert(mouseCoordOverlay);
const d0 = valuesToPlot[timeValueIndex - 1]; const timeValueIndex = bisectDate(graphSpecifics.data, timeValueFromOverlay, 1);
const d1 = valuesToPlot[timeValueIndex]; const d0 = graphSpecifics.data[timeValueIndex - 1];
const d1 = graphSpecifics.data[timeValueIndex];
const currentData = timeValueFromOverlay - d0.time > d1.time - timeValueFromOverlay ? d1 : d0; 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 currentTimeCoordinate = x(currentData.time);
const graphSpecifics = this.graphSpecificProperties[key];
// Remove the current selectors // Remove the current selectors
d3.selectAll(`${prometheusGraphContainer} .selected-metric-line`).remove(); d3.selectAll(`${prometheusGraphContainer} .selected-metric-line`).remove();
d3.selectAll(`${prometheusGraphContainer} .circle-metric`).remove(); d3.selectAll(`${prometheusGraphContainer} .circle-metric`).remove();
...@@ -263,12 +268,14 @@ class PrometheusGraph { ...@@ -263,12 +268,14 @@ class PrometheusGraph {
cpu_values: { cpu_values: {
area_fill_color: '#edf3fc', area_fill_color: '#edf3fc',
line_color: '#5b99f7', line_color: '#5b99f7',
graph_legend_title: 'CPU utilization (%)', graph_legend_title: 'CPU Usage (Cores)',
data: [],
}, },
memory_values: { memory_values: {
area_fill_color: '#fca326', area_fill_color: '#fca326',
line_color: '#fc6d26', line_color: '#fc6d26',
graph_legend_title: 'Memory usage (MB)', graph_legend_title: 'Memory Usage (MB)',
data: [],
}, },
}; };
...@@ -328,7 +335,6 @@ class PrometheusGraph { ...@@ -328,7 +335,6 @@ class PrometheusGraph {
})); }));
} }
}); });
this.data = metricTypes;
} }
} }
......
- if environment.external_url && can?(current_user, :read_environment, environment) - if environment.external_url && can?(current_user, :read_environment, environment)
= link_to environment.external_url, target: '_blank', rel: 'noopener noreferrer', class: 'btn external-url' do = link_to environment.external_url, target: '_blank', rel: 'noopener noreferrer', class: 'btn external-url' do
= icon('external-link') = icon('external-link')
View deployment
...@@ -4,3 +4,4 @@ ...@@ -4,3 +4,4 @@
= link_to environment_metrics_path(environment), title: 'See metrics', class: 'btn metrics-button' do = link_to environment_metrics_path(environment), title: 'See metrics', class: 'btn metrics-button' do
= icon('area-chart') = icon('area-chart')
Monitoring
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
.col-sm-6 .col-sm-6
%h3.page-title %h3.page-title
Environment: Environment:
= link_to environment_path(@environment) do
= @environment.name = @environment.name
.col-sm-6 .col-sm-6
......
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
%div{ class: container_class } %div{ class: container_class }
.top-area.adjust .top-area.adjust
.col-md-9 .col-md-7
%h3.page-title= @environment.name %h3.page-title= @environment.name
.col-md-3 .col-md-5
.nav-controls .nav-controls
= render 'projects/environments/metrics_button', environment: @environment = render 'projects/environments/metrics_button', environment: @environment
= render 'projects/environments/terminal_button', environment: @environment = render 'projects/environments/terminal_button', environment: @environment
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment