2017-04-12 07:37:47 -04:00
|
|
|
import d3 from 'd3';
|
|
|
|
|
|
|
|
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;
|
2017-04-12 07:37:47 -04:00
|
|
|
this.timeFormat = d3.time.format('%b %d, %Y, %H:%M%p');
|
2017-04-12 10:31:14 -04:00
|
|
|
|
|
|
|
this.endpoint = document.getElementById('js-metrics').dataset.deploymentEndpoint;
|
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-12 10:31:14 -04:00
|
|
|
this.charts = d3.selectAll('.prometheus-graph .graph-container');
|
|
|
|
|
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',
|
|
|
|
})
|
|
|
|
.done((data) => {
|
|
|
|
this.data = [];
|
|
|
|
|
|
|
|
data.deployments.forEach((deployment) => {
|
|
|
|
const date = new Date(deployment.created_at);
|
|
|
|
|
|
|
|
if (this.x(date) >= 0) {
|
|
|
|
this.data.push({
|
|
|
|
id: deployment.id,
|
|
|
|
time: new Date(deployment.created_at),
|
|
|
|
sha: deployment.sha,
|
2017-04-12 10:31:14 -04:00
|
|
|
tag: deployment.tag,
|
|
|
|
ref: deployment.ref.name,
|
2017-04-12 07:37:47 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
this.plotData();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
plotData() {
|
2017-04-12 10:31:14 -04:00
|
|
|
this.charts.each((d, i) => {
|
|
|
|
const chart = d3.select(this.charts[0][i]);
|
2017-04-12 07:37:47 -04:00
|
|
|
|
2017-04-12 10:31:14 -04:00
|
|
|
this.createLine(chart);
|
|
|
|
this.createDeployInfoBox(chart);
|
|
|
|
});
|
2017-04-12 07:37:47 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
createLine(chart) {
|
|
|
|
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({
|
|
|
|
class: d => `deploy-info-${d.id}`,
|
|
|
|
transform: d => `translate(${Math.floor(this.x(d.time)) + 1}, 0)`,
|
|
|
|
})
|
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-12 10:31:14 -04:00
|
|
|
y2: this.height,
|
2017-04-12 07:37:47 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
createDeployInfoBox(chart) {
|
|
|
|
this.data.forEach((d) => {
|
|
|
|
const group = chart.select(`.deploy-info-${d.id}`)
|
|
|
|
.append('svg')
|
2017-04-14 10:22:16 -04:00
|
|
|
.attr({
|
|
|
|
x: 3,
|
|
|
|
y: 0,
|
|
|
|
height: 41,
|
|
|
|
});
|
2017-04-12 10:31:14 -04:00
|
|
|
|
|
|
|
const rect = group.append('rect')
|
2017-04-14 10:22:16 -04:00
|
|
|
.attr({
|
|
|
|
class: 'rect-text-metric deploy-info-rect rect-metric',
|
|
|
|
x: 1,
|
|
|
|
y: 1,
|
|
|
|
rx: 2,
|
|
|
|
height: group.attr('height') - 2,
|
|
|
|
});
|
|
|
|
|
|
|
|
const textGroup = group.append('g')
|
|
|
|
.attr({
|
|
|
|
transform: 'translate(5, 2)',
|
|
|
|
});
|
|
|
|
|
|
|
|
textGroup.append('text')
|
|
|
|
.attr({
|
|
|
|
style: 'dominant-baseline: text-before-edge;',
|
|
|
|
})
|
|
|
|
.text(() => {
|
2017-04-12 10:31:14 -04:00
|
|
|
const isTag = d.tag;
|
|
|
|
const refText = isTag ? d.ref : d.sha.slice(0, 6);
|
|
|
|
|
2017-04-14 10:22:16 -04:00
|
|
|
return refText;
|
2017-04-12 07:37:47 -04:00
|
|
|
});
|
|
|
|
|
2017-04-14 10:22:16 -04:00
|
|
|
textGroup.append('text')
|
|
|
|
.attr({
|
|
|
|
style: 'dominant-baseline: text-before-edge; font-weight: 600;',
|
|
|
|
y: 18,
|
|
|
|
})
|
|
|
|
.text(() => this.timeFormat(d.time));
|
|
|
|
|
|
|
|
group.attr('width', Math.floor(textGroup.node().getBoundingClientRect().width) + 14);
|
2017-04-12 10:31:14 -04:00
|
|
|
|
2017-04-14 10:22:16 -04:00
|
|
|
rect.attr('width', Math.floor(textGroup.node().getBoundingClientRect().width) + 10);
|
2017-04-12 07:37:47 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|