mirror of
https://github.com/prometheus/prometheus.git
synced 2025-03-05 20:59:13 -08:00
2e205ee95c
ui: heatmap visualization for histogram buckets Signed-off-by: Yury Moladau <yurymolodov@gmail.com> --------- Signed-off-by: Yury Moladau <yurymolodov@gmail.com>
288 lines
9.2 KiB
TypeScript
288 lines
9.2 KiB
TypeScript
import $ from 'jquery';
|
|
|
|
import { escapeHTML } from '../../utils';
|
|
import { GraphData, GraphExemplar, GraphProps, GraphSeries } from './Graph';
|
|
import moment from 'moment-timezone';
|
|
import { colorPool } from './ColorPool';
|
|
import { prepareHeatmapData } from './GraphHeatmapHelpers';
|
|
import { GraphDisplayMode } from './Panel';
|
|
|
|
export const formatValue = (y: number | null): string => {
|
|
if (y === null) {
|
|
return 'null';
|
|
}
|
|
const absY = Math.abs(y);
|
|
|
|
if (absY >= 1e24) {
|
|
return (y / 1e24).toFixed(2) + 'Y';
|
|
} else if (absY >= 1e21) {
|
|
return (y / 1e21).toFixed(2) + 'Z';
|
|
} else if (absY >= 1e18) {
|
|
return (y / 1e18).toFixed(2) + 'E';
|
|
} else if (absY >= 1e15) {
|
|
return (y / 1e15).toFixed(2) + 'P';
|
|
} else if (absY >= 1e12) {
|
|
return (y / 1e12).toFixed(2) + 'T';
|
|
} else if (absY >= 1e9) {
|
|
return (y / 1e9).toFixed(2) + 'G';
|
|
} else if (absY >= 1e6) {
|
|
return (y / 1e6).toFixed(2) + 'M';
|
|
} else if (absY >= 1e3) {
|
|
return (y / 1e3).toFixed(2) + 'k';
|
|
} else if (absY >= 1) {
|
|
return y.toFixed(2);
|
|
} else if (absY === 0) {
|
|
return y.toFixed(2);
|
|
} else if (absY < 1e-23) {
|
|
return (y / 1e-24).toFixed(2) + 'y';
|
|
} else if (absY < 1e-20) {
|
|
return (y / 1e-21).toFixed(2) + 'z';
|
|
} else if (absY < 1e-17) {
|
|
return (y / 1e-18).toFixed(2) + 'a';
|
|
} else if (absY < 1e-14) {
|
|
return (y / 1e-15).toFixed(2) + 'f';
|
|
} else if (absY < 1e-11) {
|
|
return (y / 1e-12).toFixed(2) + 'p';
|
|
} else if (absY < 1e-8) {
|
|
return (y / 1e-9).toFixed(2) + 'n';
|
|
} else if (absY < 1e-5) {
|
|
return (y / 1e-6).toFixed(2) + 'µ';
|
|
} else if (absY < 1e-2) {
|
|
return (y / 1e-3).toFixed(2) + 'm';
|
|
} else if (absY <= 1) {
|
|
return y.toFixed(2);
|
|
}
|
|
throw Error("couldn't format a value, this is a bug");
|
|
};
|
|
|
|
export const getHoverColor = (color: string, opacity: number, stacked: boolean): string => {
|
|
const { r, g, b } = $.color.parse(color);
|
|
if (!stacked) {
|
|
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
|
|
}
|
|
/*
|
|
Unfortunately flot doesn't take into consideration
|
|
the alpha value when adjusting the color on the stacked series.
|
|
TODO: find better way to set the opacity.
|
|
*/
|
|
const base = (1 - opacity) * 255;
|
|
return `rgb(${Math.round(base + opacity * r)},${Math.round(base + opacity * g)},${Math.round(base + opacity * b)})`;
|
|
};
|
|
|
|
export const toHoverColor =
|
|
(index: number, stacked: boolean) =>
|
|
(
|
|
series: GraphSeries,
|
|
i: number
|
|
): { color: string; data: (number | null)[][]; index: number; labels: { [p: string]: string } } => ({
|
|
...series,
|
|
color: getHoverColor(series.color, i !== index ? 0.3 : 1, stacked),
|
|
});
|
|
|
|
export const getOptions = (stacked: boolean, useLocalTime: boolean): jquery.flot.plotOptions => {
|
|
return {
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true,
|
|
autoHighlight: true,
|
|
mouseActiveRadius: 100,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
xaxis: {
|
|
mode: 'time',
|
|
showTicks: true,
|
|
showMinorTicks: true,
|
|
timeBase: 'milliseconds',
|
|
timezone: useLocalTime ? 'browser' : undefined,
|
|
},
|
|
yaxis: {
|
|
tickFormatter: formatValue,
|
|
},
|
|
crosshair: {
|
|
mode: 'xy',
|
|
color: '#bbb',
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
cssClass: 'graph-tooltip',
|
|
content: (_, xval, yval, { series }): string => {
|
|
const both = series as GraphExemplar | GraphSeries;
|
|
const { labels, color } = both;
|
|
let dateTime = moment(xval);
|
|
if (!useLocalTime) {
|
|
dateTime = dateTime.utc();
|
|
}
|
|
|
|
const formatLabels = (labels: { [key: string]: string }): string => `
|
|
<div class="labels">
|
|
${Object.keys(labels).length === 0 ? '<div class="mb-1 font-italic">no labels</div>' : ''}
|
|
${labels['__name__'] ? `<div class="mb-1"><strong>${labels['__name__']}</strong></div>` : ''}
|
|
${Object.keys(labels)
|
|
.filter((k) => k !== '__name__')
|
|
.map((k) => `<div class="mb-1"><strong>${k}</strong>: ${escapeHTML(labels[k])}</div>`)
|
|
.join('')}
|
|
</div>`;
|
|
|
|
return `
|
|
<div class="date">${dateTime.format('YYYY-MM-DD HH:mm:ss Z')}</div>
|
|
<div>
|
|
<span class="detail-swatch" style="background-color: ${color}"></span>
|
|
<span>${labels.__name__ || 'value'}: <strong>${yval}</strong></span>
|
|
</div>
|
|
<div class="mt-2 mb-1 font-weight-bold">${'seriesLabels' in both ? 'Trace exemplar:' : 'Series:'}</div>
|
|
${formatLabels(labels)}
|
|
${
|
|
'seriesLabels' in both
|
|
? `
|
|
<div class="mt-2 mb-1 font-weight-bold">Associated series:</div>${formatLabels(both.seriesLabels)}
|
|
`
|
|
: ''
|
|
}
|
|
`.trimEnd();
|
|
},
|
|
defaultTheme: false,
|
|
lines: true,
|
|
},
|
|
series: {
|
|
stack: false, // Stacking is set on a per-series basis because exemplar symbols don't support it.
|
|
heatmap: false,
|
|
lines: {
|
|
lineWidth: stacked ? 1 : 2,
|
|
steps: false,
|
|
fill: stacked,
|
|
},
|
|
shadowSize: 0,
|
|
},
|
|
selection: {
|
|
mode: 'x',
|
|
},
|
|
};
|
|
};
|
|
|
|
export const normalizeData = ({ queryParams, data, exemplars, displayMode }: GraphProps): GraphData => {
|
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
const { startTime, endTime, resolution } = queryParams!;
|
|
|
|
let sum = 0;
|
|
const values: number[] = [];
|
|
// Exemplars are grouped into buckets by time to use for de-densifying.
|
|
const buckets: { [time: number]: GraphExemplar[] } = {};
|
|
for (const exemplar of exemplars || []) {
|
|
for (const { labels, value, timestamp } of exemplar.exemplars) {
|
|
const parsed = parseValue(value) || 0;
|
|
sum += parsed;
|
|
values.push(parsed);
|
|
|
|
const bucketTime = Math.floor((timestamp / ((endTime - startTime) / 60)) * 0.8) * 1000;
|
|
if (!buckets[bucketTime]) {
|
|
buckets[bucketTime] = [];
|
|
}
|
|
|
|
buckets[bucketTime].push({
|
|
seriesLabels: exemplar.seriesLabels,
|
|
labels: labels,
|
|
data: [[timestamp * 1000, parsed]],
|
|
points: { symbol: exemplarSymbol },
|
|
color: '#0275d8',
|
|
});
|
|
}
|
|
}
|
|
const deviation = stdDeviation(sum, values);
|
|
|
|
const series = data.result.map(({ values, histograms, metric }, index) => {
|
|
// Insert nulls for all missing steps.
|
|
const data = [];
|
|
let valuePos = 0;
|
|
let histogramPos = 0;
|
|
|
|
for (let t = startTime; t <= endTime; t += resolution) {
|
|
// Allow for floating point inaccuracy.
|
|
const currentValue = values && values[valuePos];
|
|
const currentHistogram = histograms && histograms[histogramPos];
|
|
if (currentValue && values.length > valuePos && currentValue[0] < t + resolution / 100) {
|
|
data.push([currentValue[0] * 1000, parseValue(currentValue[1])]);
|
|
valuePos++;
|
|
} else if (currentHistogram && histograms.length > histogramPos && currentHistogram[0] < t + resolution / 100) {
|
|
data.push([currentHistogram[0] * 1000, parseValue(currentHistogram[1].sum)]);
|
|
histogramPos++;
|
|
} else {
|
|
data.push([t * 1000, null]);
|
|
}
|
|
}
|
|
return {
|
|
labels: metric !== null ? metric : {},
|
|
color: colorPool[index % colorPool.length],
|
|
stack: displayMode === GraphDisplayMode.Stacked,
|
|
data,
|
|
index,
|
|
};
|
|
});
|
|
|
|
return {
|
|
series: displayMode === GraphDisplayMode.Heatmap ? prepareHeatmapData(series) : series,
|
|
exemplars: Object.values(buckets).flatMap((bucket) => {
|
|
if (bucket.length === 1) {
|
|
return bucket[0];
|
|
}
|
|
return bucket
|
|
.sort((a, b) => exValue(b) - exValue(a)) // Sort exemplars by value in descending order.
|
|
.reduce((exemplars: GraphExemplar[], exemplar) => {
|
|
if (exemplars.length === 0) {
|
|
exemplars.push(exemplar);
|
|
} else {
|
|
const prev = exemplars[exemplars.length - 1];
|
|
// Don't plot this exemplar if it's less than two times the standard
|
|
// deviation spaced from the last.
|
|
if (exValue(prev) - exValue(exemplar) >= 2 * deviation) {
|
|
exemplars.push(exemplar);
|
|
}
|
|
}
|
|
return exemplars;
|
|
}, []);
|
|
}),
|
|
};
|
|
};
|
|
|
|
export const parseValue = (value: string): null | number => {
|
|
const val = parseFloat(value);
|
|
// "+Inf", "-Inf", "+Inf" will be parsed into NaN by parseFloat(). They
|
|
// can't be graphed, so show them as gaps (null).
|
|
return isNaN(val) ? null : val;
|
|
};
|
|
|
|
const exemplarSymbol = (ctx: CanvasRenderingContext2D, x: number, y: number) => {
|
|
// Center the symbol on the point.
|
|
y = y - 3.5;
|
|
|
|
// Correct if the symbol is overflowing off the grid.
|
|
if (x > ctx.canvas.clientWidth - 59) {
|
|
x = ctx.canvas.clientWidth - 59;
|
|
}
|
|
if (y > ctx.canvas.clientHeight - 40) {
|
|
y = ctx.canvas.clientHeight - 40;
|
|
}
|
|
|
|
ctx.translate(x, y);
|
|
ctx.rotate(Math.PI / 4);
|
|
ctx.translate(-x, -y);
|
|
|
|
ctx.fillStyle = '#92bce1';
|
|
ctx.fillRect(x, y, 7, 7);
|
|
|
|
ctx.strokeStyle = '#0275d8';
|
|
ctx.lineWidth = 1;
|
|
ctx.strokeRect(x, y, 7, 7);
|
|
};
|
|
|
|
const stdDeviation = (sum: number, values: number[]): number => {
|
|
const avg = sum / values.length;
|
|
let squaredAvg = 0;
|
|
values.map((value) => (squaredAvg += (value - avg) ** 2));
|
|
squaredAvg = squaredAvg / values.length;
|
|
return Math.sqrt(squaredAvg);
|
|
};
|
|
|
|
const exValue = (exemplar: GraphExemplar): number => exemplar.data[0][1];
|