From 59616dc7505502bc1aab616099a9f37a295f7359 Mon Sep 17 00:00:00 2001 From: Phil Hughes <me@iamphill.com> Date: Wed, 12 Apr 2017 15:31:14 +0100 Subject: [PATCH] Fixed up some code Improved the design Pulls the endpoint from the HAML --- app/assets/javascripts/monitoring/deployments.js | 60 ++++++++++++++++++++++++++++++++---------------------------- app/assets/javascripts/monitoring/prometheus_graph.js | 5 +++-- app/assets/stylesheets/pages/environments.scss | 7 ++++++- app/views/projects/environments/metrics.html.haml | 2 +- spec/javascripts/fixtures/environments/metrics.html.haml | 3 ++- 5 files changed, 44 insertions(+), 33 deletions(-) diff --git a/app/assets/javascripts/monitoring/deployments.js b/app/assets/javascripts/monitoring/deployments.js index 0a7b037..94ad49b 100644 --- a/app/assets/javascripts/monitoring/deployments.js +++ b/app/assets/javascripts/monitoring/deployments.js @@ -1,9 +1,12 @@ import d3 from 'd3'; export default class Deployments { - constructor(width) { + constructor(width, height) { this.width = width; + this.height = height; this.timeFormat = d3.time.format('%b %d, %Y, %H:%M%p'); + + this.endpoint = document.getElementById('js-metrics').dataset.deploymentEndpoint; } init(chartData) { @@ -12,12 +15,14 @@ export default class Deployments { this.x = d3.time.scale().range([0, this.width]); this.x.domain(d3.extent(this.chartData, d => d.time)); + this.charts = d3.selectAll('.prometheus-graph .graph-container'); + this.getData(); } getData() { $.ajax({ - url: 'http://192.168.0.2:3000/root/hello-world/environments/21/deployments', + url: this.endpoint, dataType: 'JSON', }) .done((data) => { @@ -31,6 +36,8 @@ export default class Deployments { id: deployment.id, time: new Date(deployment.created_at), sha: deployment.sha, + tag: deployment.tag, + ref: deployment.ref.name, }); } }); @@ -40,15 +47,12 @@ export default class Deployments { } plotData() { - const charts = d3.selectAll('.prometheus-graph .graph-container'); - - charts - .each((d, i) => { - const chart = d3.select(charts[0][i]); + this.charts.each((d, i) => { + const chart = d3.select(this.charts[0][i]); - this.createLine(chart); - this.createDeployInfoBox(chart); - }); + this.createLine(chart); + this.createDeployInfoBox(chart); + }); } createLine(chart) { @@ -59,16 +63,14 @@ export default class Deployments { .enter() .append('g') .attr('class', d => `deploy-info-${d.id}`) - .attr('transform', d => `translate(${Math.floor(this.x(d.time)) + 1}, -1)`) + .attr('transform', d => `translate(${Math.floor(this.x(d.time)) + 1}, 0)`) .append('line') .attr('class', 'deployment-line') - .attr('stroke', '#000000') - .attr('stroke-width', '2') .attr({ x1: 0, x2: 0, y1: 0, - y2: chart.node().getBoundingClientRect().height - 22, + y2: this.height, }); } @@ -76,29 +78,31 @@ export default class Deployments { this.data.forEach((d) => { const group = chart.select(`.deploy-info-${d.id}`) .append('svg') - .attr('class', 'rect-text-metric deploy-info-rect') - .attr('x', '5') - .attr('y', '0') - .attr('width', 100) - .attr('height', 35); - - group.append('rect') - .attr('class', 'rect-metric') - .attr('x', 0) + .attr('x', 3) .attr('y', 0) - .attr('rx', 3) - .attr('width', '100%') - .attr('height', '100%') + .attr('height', 38); + + const rect = group.append('rect') + .attr('class', 'rect-text-metric deploy-info-rect rect-metric') + .attr('x', 1) + .attr('y', 1) + .attr('rx', 2) + .attr('height', 35); const text = group.append('text') .attr('x', 5) .attr('y', '50%') .attr('style', 'dominant-baseline: middle;') .text((d) => { - return `${d.sha.slice(0, 6)} - ${this.timeFormat(d.time)}`; + const isTag = d.tag; + const refText = isTag ? d.ref : d.sha.slice(0, 6); + + return `${refText} - ${this.timeFormat(d.time)}`; }); - group.attr('width', Math.floor(text.node().getBoundingClientRect().width) + 10); + group.attr('width', Math.floor(text.node().getBoundingClientRect().width) + 14); + + rect.attr('width', Math.floor(text.node().getBoundingClientRect().width) + 10); }); } } diff --git a/app/assets/javascripts/monitoring/prometheus_graph.js b/app/assets/javascripts/monitoring/prometheus_graph.js index 0c02d42..bdff045 100644 --- a/app/assets/javascripts/monitoring/prometheus_graph.js +++ b/app/assets/javascripts/monitoring/prometheus_graph.js @@ -26,7 +26,7 @@ class PrometheusGraph { this.width = parentContainerWidth - this.margin.left - this.margin.right; this.height = 400 - this.margin.top - this.margin.bottom; this.backOffRequestCounter = 0; - this.deployments = new Deployments(this.width); + this.deployments = new Deployments(this.width, this.height); this.configureGraph(); this.init(); @@ -89,6 +89,7 @@ class PrometheusGraph { .scale(y) .ticks(this.commonGraphProperties.axis_no_ticks) .tickSize(-this.width) + .outerTickSize(0) .orient('left'); this.createAxisLabelContainers(axisLabelContainer, key); @@ -237,7 +238,7 @@ class PrometheusGraph { const rectTextMetric = chart.append('svg') .attr('class', 'rect-text-metric') .attr('x', currentTimeCoordinate) - .attr('y', -1); + .attr('y', 0); rectTextMetric.append('rect') .attr('class', 'rect-metric') diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 8d35a26..4090578 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -213,6 +213,11 @@ } .selected-metric-line { - stroke: $black; + stroke: #8c8c8c; stroke-width: 1; } + +.deployment-line { + stroke: #000; + stroke-width: 2; +} diff --git a/app/views/projects/environments/metrics.html.haml b/app/views/projects/environments/metrics.html.haml index 3b45162..69a7165 100644 --- a/app/views/projects/environments/metrics.html.haml +++ b/app/views/projects/environments/metrics.html.haml @@ -5,7 +5,7 @@ = page_specific_javascript_bundle_tag('monitoring') = render "projects/pipelines/head" -%div{ class: container_class } +#js-metrics{ class: container_class, data: { deployment_endpoint: namespace_project_environment_deployments_path(@project.namespace, @project, @environment, format: :json) } } .top-area .row .col-sm-6 diff --git a/spec/javascripts/fixtures/environments/metrics.html.haml b/spec/javascripts/fixtures/environments/metrics.html.haml index 483063f..e104c53 100644 --- a/spec/javascripts/fixtures/environments/metrics.html.haml +++ b/spec/javascripts/fixtures/environments/metrics.html.haml @@ -1,4 +1,5 @@ %div + %svg.graph-line-shadow .top-area .row .col-sm-6 @@ -9,4 +10,4 @@ %svg.prometheus-graph{ 'graph-type' => 'cpu_values' } .row .col-sm-12 - %svg.prometheus-graph{ 'graph-type' => 'memory_values' } \ No newline at end of file + %svg.prometheus-graph{ 'graph-type' => 'memory_values' } -- libgit2 0.27.1