BigW Consortium Gitlab

Commit da2a7823 by Phil Hughes

Shows deployment box on hover

parent 69c450c0
...@@ -4,7 +4,8 @@ export default class Deployments { ...@@ -4,7 +4,8 @@ export default class Deployments {
constructor(width, height) { constructor(width, height) {
this.width = width; this.width = width;
this.height = height; this.height = height;
this.timeFormat = d3.time.format('%b %d, %Y, %H:%M%p'); this.dateFormat = d3.time.format('%b %d, %Y');
this.timeFormat = d3.time.format('%H:%M%p');
this.endpoint = document.getElementById('js-metrics').dataset.deploymentEndpoint; this.endpoint = document.getElementById('js-metrics').dataset.deploymentEndpoint;
} }
...@@ -29,15 +30,20 @@ export default class Deployments { ...@@ -29,15 +30,20 @@ export default class Deployments {
this.data = []; this.data = [];
data.deployments.forEach((deployment) => { data.deployments.forEach((deployment) => {
const date = new Date(deployment.created_at); const coeff = 1000 * 60;
let time = new Date(deployment.created_at);
time = new Date(Math.round(time.getTime() / coeff) * coeff);
time.setSeconds(this.chartData[0].time.getSeconds());
const xPos = Math.floor(this.x(time));
if (this.x(date) >= 0) { if (xPos >= 0) {
this.data.push({ this.data.push({
id: deployment.id, id: deployment.id,
time: new Date(deployment.created_at), time,
sha: deployment.sha, sha: deployment.sha,
tag: deployment.tag, tag: deployment.tag,
ref: deployment.ref.name, ref: deployment.ref.name,
xPos,
}); });
} }
}); });
...@@ -66,7 +72,7 @@ export default class Deployments { ...@@ -66,7 +72,7 @@ export default class Deployments {
.append('g') .append('g')
.attr({ .attr({
class: d => `deploy-info-${d.id}`, class: d => `deploy-info-${d.id}`,
transform: d => `translate(${Math.floor(this.x(d.time)) + 1}, 0)`, transform: d => `translate(${Math.floor(d.xPos) + 1}, 0)`,
}) })
.append('line') .append('line')
.attr({ .attr({
...@@ -85,7 +91,7 @@ export default class Deployments { ...@@ -85,7 +91,7 @@ export default class Deployments {
.attr({ .attr({
x: 3, x: 3,
y: 0, y: 0,
height: 41, height: 58,
}); });
const rect = group.append('rect') const rect = group.append('rect')
...@@ -115,14 +121,46 @@ export default class Deployments { ...@@ -115,14 +121,46 @@ export default class Deployments {
textGroup.append('text') textGroup.append('text')
.attr({ .attr({
style: 'dominant-baseline: text-before-edge; font-weight: 600;', style: 'dominant-baseline: text-before-edge;',
y: 18, y: 18,
}) })
.text(() => this.dateFormat(d.time));
textGroup.append('text')
.attr({
style: 'dominant-baseline: text-before-edge;',
y: 36,
})
.text(() => this.timeFormat(d.time)); .text(() => this.timeFormat(d.time));
group.attr('width', Math.floor(textGroup.node().getBoundingClientRect().width) + 14); group.attr('width', Math.floor(textGroup.node().getBoundingClientRect().width) + 14);
rect.attr('width', Math.floor(textGroup.node().getBoundingClientRect().width) + 10); rect.attr('width', Math.floor(textGroup.node().getBoundingClientRect().width) + 10);
group.attr('class', 'js-deploy-info-box hidden');
}); });
} }
static toggleDeployTextbox(deploy, showInfoBox) {
d3.selectAll(`.deploy-info-${deploy.id} .js-deploy-info-box`)
.classed('hidden', !showInfoBox);
}
mouseOverDeployInfo(mouseXPos) {
if (!this.data) return false;
let dataFound = false;
this.data.forEach((d) => {
if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
dataFound = true;
Deployments.toggleDeployTextbox(d, true);
} else {
Deployments.toggleDeployTextbox(d, false);
}
});
return dataFound;
}
} }
...@@ -9,8 +9,8 @@ import '../flash'; ...@@ -9,8 +9,8 @@ import '../flash';
const prometheusGraphsContainer = '.prometheus-graph'; const prometheusGraphsContainer = '.prometheus-graph';
const metricsEndpoint = 'metrics.json'; const metricsEndpoint = 'metrics.json';
const timeFormat = d3.time.format('%H:%M'); const timeFormat = d3.time.format('%H:%M%p');
const dayFormat = d3.time.format('%b %e, %a'); const dayFormat = d3.time.format('%b %d, %Y');
const bisectDate = d3.bisector(d => d.time).left; const bisectDate = d3.bisector(d => d.time).left;
const extraAddedWidthParent = 100; const extraAddedWidthParent = 100;
...@@ -205,7 +205,8 @@ class PrometheusGraph { ...@@ -205,7 +205,8 @@ class PrometheusGraph {
handleMouseOverGraph(x, y, valuesToPlot, chart, prometheusGraphContainer, key) { handleMouseOverGraph(x, y, valuesToPlot, chart, prometheusGraphContainer, 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 mouse = d3.mouse(rectOverlay)[0];
const timeValueFromOverlay = x.invert(mouse);
const timeValueIndex = bisectDate(valuesToPlot, timeValueFromOverlay, 1); const timeValueIndex = bisectDate(valuesToPlot, timeValueFromOverlay, 1);
const d0 = valuesToPlot[timeValueIndex - 1]; const d0 = valuesToPlot[timeValueIndex - 1];
const d1 = valuesToPlot[timeValueIndex]; const d1 = valuesToPlot[timeValueIndex];
...@@ -215,11 +216,21 @@ class PrometheusGraph { ...@@ -215,11 +216,21 @@ class PrometheusGraph {
); );
const currentTimeCoordinate = Math.floor(x(currentData.time)); const currentTimeCoordinate = Math.floor(x(currentData.time));
const graphSpecifics = this.graphSpecificProperties[key]; const graphSpecifics = this.graphSpecificProperties[key];
const shouldHideTextMetric = this.deployments.mouseOverDeployInfo(mouse);
// 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();
d3.selectAll(`${prometheusGraphContainer} .rect-text-metric:not(.deploy-info-rect)`).remove(); d3.selectAll(`${prometheusGraphContainer} .rect-text-metric:not(.deploy-info-rect)`).remove();
chart.append('circle')
.attr('class', 'circle-metric')
.attr('fill', graphSpecifics.line_color)
.attr('cx', currentTimeCoordinate)
.attr('cy', y(currentData.value))
.attr('r', this.commonGraphProperties.circle_radius_metric);
if (shouldHideTextMetric) return;
chart.append('line') chart.append('line')
.attr('class', 'selected-metric-line') .attr('class', 'selected-metric-line')
.attr({ .attr({
...@@ -229,13 +240,6 @@ class PrometheusGraph { ...@@ -229,13 +240,6 @@ class PrometheusGraph {
y2: maxValueMetric, y2: maxValueMetric,
}); });
chart.append('circle')
.attr('class', 'circle-metric')
.attr('fill', graphSpecifics.line_color)
.attr('cx', currentTimeCoordinate)
.attr('cy', y(currentData.value))
.attr('r', this.commonGraphProperties.circle_radius_metric);
// The little box with text // The little box with text
const rectTextMetric = chart.append('svg') const rectTextMetric = chart.append('svg')
.attr('class', 'rect-text-metric') .attr('class', 'rect-text-metric')
...@@ -244,20 +248,20 @@ class PrometheusGraph { ...@@ -244,20 +248,20 @@ class PrometheusGraph {
rectTextMetric.append('rect') rectTextMetric.append('rect')
.attr('class', 'rect-metric') .attr('class', 'rect-metric')
.attr('x', 10) .attr('x', 4)
.attr('y', 0) .attr('y', 1)
.attr('rx', 2)
.attr('width', this.commonGraphProperties.rect_text_width) .attr('width', this.commonGraphProperties.rect_text_width)
.attr('height', this.commonGraphProperties.rect_text_height); .attr('height', this.commonGraphProperties.rect_text_height);
rectTextMetric.append('text') rectTextMetric.append('text')
.attr('class', 'text-metric') .attr('x', 8)
.attr('x', 35)
.attr('y', 35) .attr('y', 35)
.text(timeFormat(currentData.time)); .text(timeFormat(currentData.time));
rectTextMetric.append('text') rectTextMetric.append('text')
.attr('class', 'text-metric-date') .attr('class', 'text-metric-date')
.attr('x', 15) .attr('x', 8)
.attr('y', 15) .attr('y', 15)
.text(dayFormat(currentData.time)); .text(dayFormat(currentData.time));
......
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