2017-04-21 07:33:31 -04:00
|
|
|
/* global Flash */
|
2017-04-12 07:37:47 -04:00
|
|
|
import d3 from 'd3';
|
2017-04-21 07:33:31 -04:00
|
|
|
import {
|
|
|
|
dateFormat,
|
|
|
|
timeFormat,
|
|
|
|
} from './constants';
|
2017-04-12 07:37:47 -04:00
|
|
|
|
|
|
|
export default class Deployments {
|
2017-04-12 10:31:14 -04:00
|
|
|
constructor(width, height) {
|
2017-04-12 07:37:47 -04:00
|
|
|
this.width = width;
|
2017-04-12 10:31:14 -04:00
|
|
|
this.height = height;
|
|
|
|
|
|
|
|
this.endpoint = document.getElementById('js-metrics').dataset.deploymentEndpoint;
|
2017-04-19 07:06:14 -04:00
|
|
|
|
2017-04-21 06:30:40 -04:00
|
|
|
this.createGradientDef();
|
2017-04-12 07:37:47 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
init(chartData) {
|
|
|
|
this.chartData = chartData;
|
|
|
|
|
|
|
|
this.x = d3.time.scale().range([0, this.width]);
|
|
|
|
this.x.domain(d3.extent(this.chartData, d => d.time));
|
|
|
|
|
2017-04-20 07:14:48 -04:00
|
|
|
this.charts = d3.selectAll('.prometheus-graph');
|
2017-04-12 10:31:14 -04:00
|
|
|
|
2017-04-12 07:37:47 -04:00
|
|
|
this.getData();
|
|
|
|
}
|
|
|
|
|
|
|
|
getData() {
|
|
|
|
$.ajax({
|
2017-04-12 10:31:14 -04:00
|
|
|
url: this.endpoint,
|
2017-04-12 07:37:47 -04:00
|
|
|
dataType: 'JSON',
|
|
|
|
})
|
2017-04-21 07:33:31 -04:00
|
|
|
.fail(() => new Flash('Error getting deployment information.'))
|
2017-04-12 07:37:47 -04:00
|
|
|
.done((data) => {
|
2017-04-21 07:33:31 -04:00
|
|
|
this.data = data.deployments.reduce((deploymentDataArray, deployment) => {
|
2017-04-21 06:30:40 -04:00
|
|
|
const time = new Date(deployment.created_at);
|
2017-04-18 05:23:01 -04:00
|
|
|
const xPos = Math.floor(this.x(time));
|
2017-04-12 07:37:47 -04:00
|
|
|
|
2017-04-21 06:30:40 -04:00
|
|
|
time.setSeconds(this.chartData[0].time.getSeconds());
|
|
|
|
|
2017-04-18 05:23:01 -04:00
|
|
|
if (xPos >= 0) {
|
2017-04-21 07:33:31 -04:00
|
|
|
deploymentDataArray.push({
|
2017-04-12 07:37:47 -04:00
|
|
|
id: deployment.id,
|
2017-04-18 05:23:01 -04:00
|
|
|
time,
|
2017-04-12 07:37:47 -04:00
|
|
|
sha: deployment.sha,
|
2017-04-12 10:31:14 -04:00
|
|
|
tag: deployment.tag,
|
|
|
|
ref: deployment.ref.name,
|
2017-04-18 05:23:01 -04:00
|
|
|
xPos,
|
2017-04-12 07:37:47 -04:00
|
|
|
});
|
|
|
|
}
|
2017-04-21 07:33:31 -04:00
|
|
|
|
|
|
|
return deploymentDataArray;
|
|
|
|
}, []);
|
2017-04-12 07:37:47 -04:00
|
|
|
|
|
|
|
this.plotData();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
plotData() {
|
2017-04-12 10:31:14 -04:00
|
|
|
this.charts.each((d, i) => {
|
2017-04-20 07:14:48 -04:00
|
|
|
const svg = d3.select(this.charts[0][i]);
|
|
|
|
const chart = svg.select('.graph-container');
|
|
|
|
const key = svg.node().getAttribute('graph-type');
|
2017-04-12 07:37:47 -04:00
|
|
|
|
2017-04-20 07:14:48 -04:00
|
|
|
this.createLine(chart, key);
|
|
|
|
this.createDeployInfoBox(chart, key);
|
2017-04-12 10:31:14 -04:00
|
|
|
});
|
2017-04-12 07:37:47 -04:00
|
|
|
}
|
|
|
|
|
2017-04-21 06:30:40 -04:00
|
|
|
createGradientDef() {
|
2017-04-19 07:06:14 -04:00
|
|
|
const defs = d3.select('body')
|
|
|
|
.append('svg')
|
|
|
|
.attr({
|
|
|
|
height: 0,
|
|
|
|
width: 0,
|
|
|
|
})
|
|
|
|
.append('defs');
|
|
|
|
|
|
|
|
defs.append('linearGradient')
|
|
|
|
.attr({
|
|
|
|
id: 'shadow-gradient',
|
|
|
|
})
|
|
|
|
.append('stop')
|
|
|
|
.attr({
|
|
|
|
offset: '0%',
|
|
|
|
'stop-color': '#000',
|
|
|
|
'stop-opacity': 0.4,
|
|
|
|
})
|
2017-04-21 06:30:40 -04:00
|
|
|
.select(this.selectParentNode)
|
2017-04-19 07:06:14 -04:00
|
|
|
.append('stop')
|
|
|
|
.attr({
|
|
|
|
offset: '100%',
|
|
|
|
'stop-color': '#000',
|
|
|
|
'stop-opacity': 0,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-04-20 07:14:48 -04:00
|
|
|
createLine(chart, key) {
|
2017-04-12 07:37:47 -04:00
|
|
|
chart.append('g')
|
2017-04-14 10:22:16 -04:00
|
|
|
.attr({
|
|
|
|
class: 'deploy-info',
|
|
|
|
})
|
2017-04-12 07:37:47 -04:00
|
|
|
.selectAll('.deploy-info')
|
|
|
|
.data(this.data)
|
|
|
|
.enter()
|
|
|
|
.append('g')
|
2017-04-14 10:22:16 -04:00
|
|
|
.attr({
|
2017-04-20 07:14:48 -04:00
|
|
|
class: d => `deploy-info-${d.id}-${key}`,
|
2017-04-18 05:23:01 -04:00
|
|
|
transform: d => `translate(${Math.floor(d.xPos) + 1}, 0)`,
|
2017-04-14 10:22:16 -04:00
|
|
|
})
|
2017-04-19 07:06:14 -04:00
|
|
|
.append('rect')
|
|
|
|
.attr({
|
|
|
|
x: 1,
|
|
|
|
y: 0,
|
2017-04-20 07:14:48 -04:00
|
|
|
height: this.height + 1,
|
2017-04-19 07:06:14 -04:00
|
|
|
width: 3,
|
|
|
|
fill: 'url(#shadow-gradient)',
|
|
|
|
})
|
2017-04-21 06:30:40 -04:00
|
|
|
.select(this.selectParentNode)
|
2017-04-12 07:37:47 -04:00
|
|
|
.append('line')
|
|
|
|
.attr({
|
2017-04-14 10:22:16 -04:00
|
|
|
class: 'deployment-line',
|
2017-04-12 07:37:47 -04:00
|
|
|
x1: 0,
|
|
|
|
x2: 0,
|
|
|
|
y1: 0,
|
2017-04-20 07:14:48 -04:00
|
|
|
y2: this.height + 1,
|
2017-04-12 07:37:47 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-04-20 07:14:48 -04:00
|
|
|
createDeployInfoBox(chart, key) {
|
2017-04-21 06:30:40 -04:00
|
|
|
chart.selectAll('.deploy-info')
|
|
|
|
.selectAll('.js-deploy-info-box')
|
|
|
|
.data(this.data)
|
|
|
|
.enter()
|
|
|
|
.select(d => document.querySelector(`.deploy-info-${d.id}-${key}`))
|
|
|
|
.append('svg')
|
|
|
|
.attr({
|
|
|
|
class: 'js-deploy-info-box hidden',
|
|
|
|
x: 3,
|
|
|
|
y: 0,
|
|
|
|
width: 92,
|
|
|
|
height: 60,
|
|
|
|
})
|
|
|
|
.append('rect')
|
|
|
|
.attr({
|
|
|
|
class: 'rect-text-metric deploy-info-rect rect-metric',
|
|
|
|
x: 1,
|
|
|
|
y: 1,
|
|
|
|
rx: 2,
|
|
|
|
width: 90,
|
|
|
|
height: 58,
|
|
|
|
})
|
|
|
|
.select(this.selectParentNode)
|
|
|
|
.append('g')
|
|
|
|
.attr({
|
|
|
|
transform: 'translate(5, 2)',
|
|
|
|
})
|
|
|
|
.append('text')
|
|
|
|
.attr({
|
|
|
|
class: 'deploy-info-text text-metric-bold',
|
|
|
|
})
|
|
|
|
.text(Deployments.refText)
|
|
|
|
.select(this.selectParentNode)
|
|
|
|
.append('text')
|
|
|
|
.attr({
|
|
|
|
class: 'deploy-info-text',
|
|
|
|
y: 18,
|
|
|
|
})
|
2017-04-21 07:33:31 -04:00
|
|
|
.text(d => dateFormat(d.time))
|
2017-04-21 06:30:40 -04:00
|
|
|
.select(this.selectParentNode)
|
|
|
|
.append('text')
|
|
|
|
.attr({
|
|
|
|
class: 'deploy-info-text text-metric-bold',
|
|
|
|
y: 38,
|
|
|
|
})
|
2017-04-21 07:33:31 -04:00
|
|
|
.text(d => timeFormat(d.time));
|
2017-04-12 07:37:47 -04:00
|
|
|
}
|
2017-04-18 05:23:01 -04:00
|
|
|
|
2017-04-20 07:14:48 -04:00
|
|
|
static toggleDeployTextbox(deploy, key, showInfoBox) {
|
|
|
|
d3.selectAll(`.deploy-info-${deploy.id}-${key} .js-deploy-info-box`)
|
2017-04-18 05:23:01 -04:00
|
|
|
.classed('hidden', !showInfoBox);
|
|
|
|
}
|
|
|
|
|
2017-04-20 07:14:48 -04:00
|
|
|
mouseOverDeployInfo(mouseXPos, key) {
|
2017-04-18 05:23:01 -04:00
|
|
|
if (!this.data) return false;
|
|
|
|
|
|
|
|
let dataFound = false;
|
|
|
|
|
|
|
|
this.data.forEach((d) => {
|
|
|
|
if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
|
2017-04-19 07:06:14 -04:00
|
|
|
dataFound = d.xPos + 1;
|
2017-04-18 05:23:01 -04:00
|
|
|
|
2017-04-20 07:14:48 -04:00
|
|
|
Deployments.toggleDeployTextbox(d, key, true);
|
2017-04-18 05:23:01 -04:00
|
|
|
} else {
|
2017-04-20 07:14:48 -04:00
|
|
|
Deployments.toggleDeployTextbox(d, key, false);
|
2017-04-18 05:23:01 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
return dataFound;
|
|
|
|
}
|
2017-04-21 06:30:40 -04:00
|
|
|
|
|
|
|
/* `this` is bound to the D3 node */
|
|
|
|
selectParentNode() {
|
|
|
|
return this.parentNode;
|
|
|
|
}
|
|
|
|
|
|
|
|
static refText(d) {
|
2017-04-21 07:33:31 -04:00
|
|
|
return d.tag ? d.ref : d.sha.slice(0, 6);
|
2017-04-21 06:30:40 -04:00
|
|
|
}
|
2017-04-12 07:37:47 -04:00
|
|
|
}
|