433 lines
14 KiB
JavaScript
433 lines
14 KiB
JavaScript
/* eslint-disable no-new */
|
|
/* global Flash */
|
|
|
|
import d3 from 'd3';
|
|
import statusCodes from '~/lib/utils/http_status';
|
|
import Deployments from './deployments';
|
|
import '../lib/utils/common_utils';
|
|
import { formatRelevantDigits } from '../lib/utils/number_utils';
|
|
import '../flash';
|
|
import {
|
|
dateFormat,
|
|
timeFormat,
|
|
} from './constants';
|
|
|
|
const prometheusContainer = '.prometheus-container';
|
|
const prometheusParentGraphContainer = '.prometheus-graphs';
|
|
const prometheusGraphsContainer = '.prometheus-graph';
|
|
const prometheusStatesContainer = '.prometheus-state';
|
|
const metricsEndpoint = 'metrics.json';
|
|
const bisectDate = d3.bisector(d => d.time).left;
|
|
const extraAddedWidthParent = 100;
|
|
|
|
class PrometheusGraph {
|
|
constructor() {
|
|
const $prometheusContainer = $(prometheusContainer);
|
|
const hasMetrics = $prometheusContainer.data('has-metrics');
|
|
this.docLink = $prometheusContainer.data('doc-link');
|
|
this.integrationLink = $prometheusContainer.data('prometheus-integration');
|
|
this.state = '';
|
|
|
|
$(document).ajaxError(() => {});
|
|
|
|
if (hasMetrics) {
|
|
this.margin = { top: 80, right: 180, bottom: 80, left: 100 };
|
|
this.marginLabelContainer = { top: 40, right: 0, bottom: 40, left: 0 };
|
|
const parentContainerWidth = $(prometheusGraphsContainer).parent().width() +
|
|
extraAddedWidthParent;
|
|
this.originalWidth = parentContainerWidth;
|
|
this.originalHeight = 330;
|
|
this.width = parentContainerWidth - this.margin.left - this.margin.right;
|
|
this.height = this.originalHeight - this.margin.top - this.margin.bottom;
|
|
this.backOffRequestCounter = 0;
|
|
this.deployments = new Deployments(this.width, this.height);
|
|
this.configureGraph();
|
|
this.init();
|
|
} else {
|
|
const prevState = this.state;
|
|
this.state = '.js-getting-started';
|
|
this.updateState(prevState);
|
|
}
|
|
}
|
|
|
|
createGraph() {
|
|
Object.keys(this.graphSpecificProperties).forEach((key) => {
|
|
const value = this.graphSpecificProperties[key];
|
|
if (value.data.length > 0) {
|
|
this.plotValues(key);
|
|
}
|
|
});
|
|
}
|
|
|
|
init() {
|
|
return this.getData().then((metricsResponse) => {
|
|
let enoughData = true;
|
|
if (typeof metricsResponse === 'undefined') {
|
|
enoughData = false;
|
|
} else {
|
|
Object.keys(metricsResponse.metrics).forEach((key) => {
|
|
if (key === 'cpu_values' || key === 'memory_values') {
|
|
const currentData = (metricsResponse.metrics[key])[0];
|
|
if (currentData.values.length <= 2) {
|
|
enoughData = false;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
if (enoughData) {
|
|
$(prometheusStatesContainer).hide();
|
|
$(prometheusParentGraphContainer).show();
|
|
this.transformData(metricsResponse);
|
|
this.createGraph();
|
|
|
|
const firstMetricData = this.graphSpecificProperties[
|
|
Object.keys(this.graphSpecificProperties)[0]
|
|
].data;
|
|
|
|
this.deployments.init(firstMetricData);
|
|
}
|
|
});
|
|
}
|
|
|
|
plotValues(key) {
|
|
const graphSpecifics = this.graphSpecificProperties[key];
|
|
|
|
const x = d3.time.scale()
|
|
.range([0, this.width]);
|
|
|
|
const y = d3.scale.linear()
|
|
.range([this.height, 0]);
|
|
|
|
graphSpecifics.xScale = x;
|
|
graphSpecifics.yScale = y;
|
|
|
|
const prometheusGraphContainer = `${prometheusGraphsContainer}[graph-type=${key}]`;
|
|
|
|
const chart = d3.select(prometheusGraphContainer)
|
|
.attr('width', this.width + this.margin.left + this.margin.right)
|
|
.attr('height', this.height + this.margin.bottom + this.margin.top)
|
|
.append('g')
|
|
.attr('class', 'graph-container')
|
|
.attr('transform', `translate(${this.margin.left},${this.margin.top})`);
|
|
|
|
const axisLabelContainer = d3.select(prometheusGraphContainer)
|
|
.attr('width', this.originalWidth)
|
|
.attr('height', this.originalHeight)
|
|
.append('g')
|
|
.attr('transform', `translate(${this.marginLabelContainer.left},${this.marginLabelContainer.top})`);
|
|
|
|
x.domain(d3.extent(graphSpecifics.data, d => d.time));
|
|
y.domain([0, d3.max(graphSpecifics.data.map(metricValue => metricValue.value))]);
|
|
|
|
const xAxis = d3.svg.axis()
|
|
.scale(x)
|
|
.ticks(this.commonGraphProperties.axis_no_ticks)
|
|
.orient('bottom');
|
|
|
|
const yAxis = d3.svg.axis()
|
|
.scale(y)
|
|
.ticks(this.commonGraphProperties.axis_no_ticks)
|
|
.tickSize(-this.width)
|
|
.outerTickSize(0)
|
|
.orient('left');
|
|
|
|
this.createAxisLabelContainers(axisLabelContainer, key);
|
|
|
|
chart.append('g')
|
|
.attr('class', 'x-axis')
|
|
.attr('transform', `translate(0,${this.height})`)
|
|
.call(xAxis);
|
|
|
|
chart.append('g')
|
|
.attr('class', 'y-axis')
|
|
.call(yAxis);
|
|
|
|
const area = d3.svg.area()
|
|
.x(d => x(d.time))
|
|
.y0(this.height)
|
|
.y1(d => y(d.value))
|
|
.interpolate('linear');
|
|
|
|
const line = d3.svg.line()
|
|
.x(d => x(d.time))
|
|
.y(d => y(d.value));
|
|
|
|
chart.append('path')
|
|
.datum(graphSpecifics.data)
|
|
.attr('d', area)
|
|
.attr('class', 'metric-area')
|
|
.attr('fill', graphSpecifics.area_fill_color);
|
|
|
|
chart.append('path')
|
|
.datum(graphSpecifics.data)
|
|
.attr('class', 'metric-line')
|
|
.attr('stroke', graphSpecifics.line_color)
|
|
.attr('fill', 'none')
|
|
.attr('stroke-width', this.commonGraphProperties.area_stroke_width)
|
|
.attr('d', line);
|
|
|
|
// Overlay area for the mouseover events
|
|
chart.append('rect')
|
|
.attr('class', 'prometheus-graph-overlay')
|
|
.attr('width', this.width)
|
|
.attr('height', this.height)
|
|
.on('mousemove', this.handleMouseOverGraph.bind(this, prometheusGraphContainer));
|
|
}
|
|
|
|
// The legends from the metric
|
|
createAxisLabelContainers(axisLabelContainer, key) {
|
|
const graphSpecifics = this.graphSpecificProperties[key];
|
|
|
|
axisLabelContainer.append('line')
|
|
.attr('class', 'label-x-axis-line')
|
|
.attr('stroke', '#000000')
|
|
.attr('stroke-width', '1')
|
|
.attr({
|
|
x1: 10,
|
|
y1: this.originalHeight - this.margin.top,
|
|
x2: (this.originalWidth - this.margin.right) + 10,
|
|
y2: this.originalHeight - this.margin.top,
|
|
});
|
|
|
|
axisLabelContainer.append('line')
|
|
.attr('class', 'label-y-axis-line')
|
|
.attr('stroke', '#000000')
|
|
.attr('stroke-width', '1')
|
|
.attr({
|
|
x1: 10,
|
|
y1: 0,
|
|
x2: 10,
|
|
y2: this.originalHeight - this.margin.top,
|
|
});
|
|
|
|
axisLabelContainer.append('rect')
|
|
.attr('class', 'rect-axis-text')
|
|
.attr('x', 0)
|
|
.attr('y', 50)
|
|
.attr('width', 30)
|
|
.attr('height', 150);
|
|
|
|
axisLabelContainer.append('text')
|
|
.attr('class', 'label-axis-text')
|
|
.attr('text-anchor', 'middle')
|
|
.attr('transform', `translate(15, ${(this.originalHeight - this.margin.top) / 2}) rotate(-90)`)
|
|
.text(graphSpecifics.graph_legend_title);
|
|
|
|
axisLabelContainer.append('rect')
|
|
.attr('class', 'rect-axis-text')
|
|
.attr('x', (this.originalWidth / 2) - this.margin.right)
|
|
.attr('y', this.originalHeight - 100)
|
|
.attr('width', 30)
|
|
.attr('height', 80);
|
|
|
|
axisLabelContainer.append('text')
|
|
.attr('class', 'label-axis-text')
|
|
.attr('x', (this.originalWidth / 2) - this.margin.right)
|
|
.attr('y', this.originalHeight - this.margin.top)
|
|
.attr('dy', '.35em')
|
|
.text('Time');
|
|
|
|
// Legends
|
|
|
|
// Metric Usage
|
|
axisLabelContainer.append('rect')
|
|
.attr('x', this.originalWidth - 170)
|
|
.attr('y', (this.originalHeight / 2) - 60)
|
|
.style('fill', graphSpecifics.area_fill_color)
|
|
.attr('width', 20)
|
|
.attr('height', 35);
|
|
|
|
axisLabelContainer.append('text')
|
|
.attr('class', 'text-metric-title')
|
|
.attr('x', this.originalWidth - 140)
|
|
.attr('y', (this.originalHeight / 2) - 50)
|
|
.text('Average');
|
|
|
|
axisLabelContainer.append('text')
|
|
.attr('class', 'text-metric-usage')
|
|
.attr('x', this.originalWidth - 140)
|
|
.attr('y', (this.originalHeight / 2) - 25);
|
|
}
|
|
|
|
handleMouseOverGraph(prometheusGraphContainer) {
|
|
const rectOverlay = document.querySelector(`${prometheusGraphContainer} .prometheus-graph-overlay`);
|
|
const currentXCoordinate = d3.mouse(rectOverlay)[0];
|
|
|
|
Object.keys(this.graphSpecificProperties).forEach((key) => {
|
|
const currentGraphProps = this.graphSpecificProperties[key];
|
|
const timeValueOverlay = currentGraphProps.xScale.invert(currentXCoordinate);
|
|
const overlayIndex = bisectDate(currentGraphProps.data, timeValueOverlay, 1);
|
|
const d0 = currentGraphProps.data[overlayIndex - 1];
|
|
const d1 = currentGraphProps.data[overlayIndex];
|
|
const evalTime = timeValueOverlay - d0.time > d1.time - timeValueOverlay;
|
|
const currentData = evalTime ? d1 : d0;
|
|
const currentTimeCoordinate = Math.floor(currentGraphProps.xScale(currentData.time));
|
|
const currentDeployXPos = this.deployments.mouseOverDeployInfo(currentXCoordinate, key);
|
|
const currentPrometheusGraphContainer = `${prometheusGraphsContainer}[graph-type=${key}]`;
|
|
const maxValueFromData = d3.max(currentGraphProps.data.map(metricValue => metricValue.value));
|
|
const maxMetricValue = currentGraphProps.yScale(maxValueFromData);
|
|
|
|
// Clear up all the pieces of the flag
|
|
d3.selectAll(`${currentPrometheusGraphContainer} .selected-metric-line`).remove();
|
|
d3.selectAll(`${currentPrometheusGraphContainer} .circle-metric`).remove();
|
|
d3.selectAll(`${currentPrometheusGraphContainer} .rect-text-metric:not(.deploy-info-rect)`).remove();
|
|
|
|
const currentChart = d3.select(currentPrometheusGraphContainer).select('g');
|
|
currentChart.append('line')
|
|
.attr({
|
|
class: `${currentDeployXPos ? 'hidden' : ''} selected-metric-line`,
|
|
x1: currentTimeCoordinate,
|
|
y1: currentGraphProps.yScale(0),
|
|
x2: currentTimeCoordinate,
|
|
y2: maxMetricValue,
|
|
});
|
|
|
|
currentChart.append('circle')
|
|
.attr('class', 'circle-metric')
|
|
.attr('fill', currentGraphProps.line_color)
|
|
.attr('cx', currentDeployXPos || currentTimeCoordinate)
|
|
.attr('cy', currentGraphProps.yScale(currentData.value))
|
|
.attr('r', this.commonGraphProperties.circle_radius_metric);
|
|
|
|
if (currentDeployXPos) return;
|
|
|
|
// The little box with text
|
|
const rectTextMetric = currentChart.append('svg')
|
|
.attr({
|
|
class: 'rect-text-metric',
|
|
x: currentTimeCoordinate,
|
|
y: 0,
|
|
});
|
|
|
|
rectTextMetric.append('rect')
|
|
.attr({
|
|
class: 'rect-metric',
|
|
x: 4,
|
|
y: 1,
|
|
rx: 2,
|
|
width: this.commonGraphProperties.rect_text_width,
|
|
height: this.commonGraphProperties.rect_text_height,
|
|
});
|
|
|
|
rectTextMetric.append('text')
|
|
.attr({
|
|
class: 'text-metric text-metric-bold',
|
|
x: 8,
|
|
y: 35,
|
|
})
|
|
.text(timeFormat(currentData.time));
|
|
|
|
rectTextMetric.append('text')
|
|
.attr({
|
|
class: 'text-metric-date',
|
|
x: 8,
|
|
y: 15,
|
|
})
|
|
.text(dateFormat(currentData.time));
|
|
|
|
let currentMetricValue = formatRelevantDigits(currentData.value);
|
|
if (key === 'cpu_values') {
|
|
currentMetricValue = `${currentMetricValue}%`;
|
|
} else {
|
|
currentMetricValue = `${currentMetricValue} MB`;
|
|
}
|
|
|
|
d3.select(`${currentPrometheusGraphContainer} .text-metric-usage`)
|
|
.text(currentMetricValue);
|
|
});
|
|
}
|
|
|
|
configureGraph() {
|
|
this.graphSpecificProperties = {
|
|
cpu_values: {
|
|
area_fill_color: '#edf3fc',
|
|
line_color: '#5b99f7',
|
|
graph_legend_title: 'CPU Usage (Cores)',
|
|
data: [],
|
|
xScale: {},
|
|
yScale: {},
|
|
},
|
|
memory_values: {
|
|
area_fill_color: '#fca326',
|
|
line_color: '#fc6d26',
|
|
graph_legend_title: 'Memory Usage (MB)',
|
|
data: [],
|
|
xScale: {},
|
|
yScale: {},
|
|
},
|
|
};
|
|
|
|
this.commonGraphProperties = {
|
|
area_stroke_width: 2,
|
|
median_total_characters: 8,
|
|
circle_radius_metric: 5,
|
|
rect_text_width: 90,
|
|
rect_text_height: 40,
|
|
axis_no_ticks: 3,
|
|
};
|
|
}
|
|
|
|
getData() {
|
|
const maxNumberOfRequests = 3;
|
|
this.state = '.js-loading';
|
|
this.updateState();
|
|
return gl.utils.backOff((next, stop) => {
|
|
$.ajax({
|
|
url: metricsEndpoint,
|
|
dataType: 'json',
|
|
})
|
|
.done((data, statusText, resp) => {
|
|
if (resp.status === statusCodes.NO_CONTENT) {
|
|
this.backOffRequestCounter = this.backOffRequestCounter += 1;
|
|
if (this.backOffRequestCounter < maxNumberOfRequests) {
|
|
next();
|
|
} else if (this.backOffRequestCounter >= maxNumberOfRequests) {
|
|
stop(new Error('loading'));
|
|
}
|
|
} else if (!data.success) {
|
|
stop(new Error('loading'));
|
|
} else {
|
|
stop({
|
|
status: resp.status,
|
|
metrics: data,
|
|
});
|
|
}
|
|
}).fail(stop);
|
|
})
|
|
.then((resp) => {
|
|
if (resp.status === statusCodes.NO_CONTENT) {
|
|
return {};
|
|
}
|
|
return resp.metrics;
|
|
})
|
|
.catch(() => {
|
|
const prevState = this.state;
|
|
this.state = '.js-unable-to-connect';
|
|
this.updateState(prevState);
|
|
});
|
|
}
|
|
|
|
transformData(metricsResponse) {
|
|
Object.keys(metricsResponse.metrics).forEach((key) => {
|
|
if (key === 'cpu_values' || key === 'memory_values') {
|
|
const metricValues = (metricsResponse.metrics[key])[0];
|
|
this.graphSpecificProperties[key].data = metricValues.values.map(metric => ({
|
|
time: new Date(metric[0] * 1000),
|
|
value: metric[1],
|
|
}));
|
|
}
|
|
});
|
|
}
|
|
|
|
updateState(prevState) {
|
|
const $statesContainer = $(prometheusStatesContainer);
|
|
$(prometheusParentGraphContainer).hide();
|
|
if (prevState) {
|
|
$(`${prevState}`, $statesContainer).addClass('hidden');
|
|
}
|
|
$(`${this.state}`, $statesContainer).removeClass('hidden');
|
|
$(prometheusStatesContainer).show();
|
|
}
|
|
}
|
|
|
|
export default PrometheusGraph;
|