mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-02-02 08:31:11 -08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Improve graph info tooltip for series and exemplars (#8929)

Browse source 
* Improve graph info tooltip for series and exemplars

It now shows more clearly what the label sets are about (series vs. exemplar +
associated series) and also shows the metric name for both label sets when it
is present.

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Fix up inconsistent title casing

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Explicitly indicate empty labelsets in hover tooltip

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Adjust tests to new hover detail

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2021-06-14 16:35:21 +02:00 committed by GitHub
parent 039b651450
commit 676acf6a1b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
web/ui/react-app/src/pages/graph/GraphHelpers.test.ts
View file

@ -143,15 +143,21 @@ describe('GraphHelpers', () => {
getOptions(true, false).tooltip.content('', 1572128592, 1572128592, { getOptions(true, false).tooltip.content('', 1572128592, 1572128592, {
series: { labels: { foo: '1', bar: '2' }, color: '' }, series: { labels: { foo: '1', bar: '2' }, color: '' },
} as any) } as any)
).toEqual(` ).toEqual(
`
<div class="date">1970-01-19 04:42:08 +00:00</div> <div class="date">1970-01-19 04:42:08 +00:00</div>
<div> <div>
<span class="detail-swatch" style="background-color: "></span> <span class="detail-swatch" style="background-color: "></span>
<span>value: <strong>1572128592</strong></span> <span>value: <strong>1572128592</strong></span>
<div> </div>
<div class="labels mt-1"> <div class="mt-2 mb-1 font-weight-bold">Series:</div>
<div class="labels">
<div class="mb-1"><strong>foo</strong>: 1</div><div class="mb-1"><strong>bar</strong>: 2</div> <div class="mb-1"><strong>foo</strong>: 1</div><div class="mb-1"><strong>bar</strong>: 2</div>
</div>`); </div>`
);
}); });
it('should return proper tooltip html from options with local time', () => { it('should return proper tooltip html from options with local time', () => {
moment.tz.setDefault('America/New_York'); moment.tz.setDefault('America/New_York');
@ -164,8 +170,12 @@ describe('GraphHelpers', () => {
<div> <div>
<span class="detail-swatch" style="background-color: "></span> <span class="detail-swatch" style="background-color: "></span>
<span>value: <strong>1572128592</strong></span> <span>value: <strong>1572128592</strong></span>
<div> </div>
<div class="labels mt-1"> <div class="mt-2 mb-1 font-weight-bold">Series:</div>
<div class="labels">
<div class="mb-1"><strong>foo</strong>: 1</div><div class="mb-1"><strong>bar</strong>: 2</div> <div class="mb-1"><strong>foo</strong>: 1</div><div class="mb-1"><strong>bar</strong>: 2</div>
</div>`); </div>`);
}); });
@ -179,13 +189,19 @@ describe('GraphHelpers', () => {
<div> <div>
<span class="detail-swatch" style="background-color: "></span> <span class="detail-swatch" style="background-color: "></span>
<span>value: <strong>1572128592</strong></span> <span>value: <strong>1572128592</strong></span>
<div> </div>
<div class="labels mt-1"> <div class="mt-2 mb-1 font-weight-bold">Trace exemplar:</div>
<div class="labels">
<div class="mb-1"><strong>foo</strong>: 1</div><div class="mb-1"><strong>bar</strong>: 2</div> <div class="mb-1"><strong>foo</strong>: 1</div><div class="mb-1"><strong>bar</strong>: 2</div>
</div> </div>
<span>Series labels:</span> <div class="mt-2 mb-1 font-weight-bold">Associated series:</div>
<div class="labels mt-1"> <div class="labels">
<div class="mb-1"><strong>foo</strong>: 2</div><div class="mb-1"><strong>bar</strong>: 3</div> <div class="mb-1"><strong>foo</strong>: 2</div><div class="mb-1"><strong>bar</strong>: 3</div>
</div>`); </div>`);
}); });

31
web/ui/react-app/src/pages/graph/GraphHelpers.ts
View file

@ -107,32 +107,29 @@ export const getOptions = (stacked: boolean, useLocalTime: boolean): jquery.flot
if (!useLocalTime) { if (!useLocalTime) {
dateTime = dateTime.utc(); 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 ` return `
<div class="date">${dateTime.format('YYYY-MM-DD HH:mm:ss Z')}</div> <div class="date">${dateTime.format('YYYY-MM-DD HH:mm:ss Z')}</div>
<div> <div>
<span class="detail-swatch" style="background-color: ${color}"></span> <span class="detail-swatch" style="background-color: ${color}"></span>
<span>${labels.__name__ || 'value'}: <strong>${yval}</strong></span> <span>${labels.__name__ || 'value'}: <strong>${yval}</strong></span>
<div>
<div class="labels mt-1">
${Object.keys(labels)
.map(k =>
k !== '__name__' ? `<div class="mb-1"><strong>${k}</strong>: ${escapeHTML(labels[k])}</div>` : ''
)
.join('')}
</div> </div>
<div class="mt-2 mb-1 font-weight-bold">${'seriesLabels' in both ? 'Trace exemplar:' : 'Series:'}</div>
${formatLabels(labels)}
${ ${
'seriesLabels' in both 'seriesLabels' in both
? ` ? `
<span>Series labels:</span> <div class="mt-2 mb-1 font-weight-bold">Associated series:</div>${formatLabels(both.seriesLabels)}
<div class="labels mt-1">
${Object.keys(both.seriesLabels)
.map(k =>
k !== '__name__'
? `<div class="mb-1"><strong>${k}</strong>: ${escapeHTML(both.seriesLabels[k])}</div>`
: ''
)
.join('')}
</div>
` `
: '' : ''
} }