github
/
prometheus
mirror of https://github.com/prometheus/prometheus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

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

33
web/ui/react-app/src/pages/graph/GraphHelpers.ts
View File

@ -107,33 +107,30 @@ export const getOptions = (stacked: boolean, useLocalTime: boolean): jquery.flot
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="labels mt-1">
${Object.keys(labels)
.map(k =>
k !== '__name__' ? `<div class="mb-1"><strong>${k}</strong>: ${escapeHTML(labels[k])}</div>` : ''
)
.join('')}
</div>
<div class="mt-2 mb-1 font-weight-bold">${'seriesLabels' in both ? 'Trace exemplar:' : 'Series:'}</div>
${formatLabels(labels)}
${
'seriesLabels' in both
? `
<span>Series labels:</span>
<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>
`
<div class="mt-2 mb-1 font-weight-bold">Associated series:</div>${formatLabels(both.seriesLabels)}
`
: ''
}
`.trimEnd();