From 676acf6a1bc016f8695f0c26b294959871c77ec4 Mon Sep 17 00:00:00 2001 From: Julius Volz Date: Mon, 14 Jun 2021 16:35:21 +0200 Subject: [PATCH] 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 * Fix up inconsistent title casing Signed-off-by: Julius Volz * Explicitly indicate empty labelsets in hover tooltip Signed-off-by: Julius Volz * Adjust tests to new hover detail Signed-off-by: Julius Volz --- .../src/pages/graph/GraphHelpers.test.ts | 36 +++++++++++++------ .../react-app/src/pages/graph/GraphHelpers.ts | 33 ++++++++--------- 2 files changed, 41 insertions(+), 28 deletions(-) diff --git a/web/ui/react-app/src/pages/graph/GraphHelpers.test.ts b/web/ui/react-app/src/pages/graph/GraphHelpers.test.ts index 989643cfbd..d4d2df7044 100644 --- a/web/ui/react-app/src/pages/graph/GraphHelpers.test.ts +++ b/web/ui/react-app/src/pages/graph/GraphHelpers.test.ts @@ -143,15 +143,21 @@ describe('GraphHelpers', () => { getOptions(true, false).tooltip.content('', 1572128592, 1572128592, { series: { labels: { foo: '1', bar: '2' }, color: '' }, } as any) - ).toEqual(` + ).toEqual( + `
1970-01-19 04:42:08 +00:00
value: 1572128592 -
-
+
+
Series:
+ +
+ +
foo: 1
bar: 2
-
`); +
` + ); }); it('should return proper tooltip html from options with local time', () => { moment.tz.setDefault('America/New_York'); @@ -164,8 +170,12 @@ describe('GraphHelpers', () => {
value: 1572128592 -
-
+
+
Series:
+ +
+ +
foo: 1
bar: 2
`); }); @@ -179,13 +189,19 @@ describe('GraphHelpers', () => {
value: 1572128592 -
-
+
+
Trace exemplar:
+ +
+ +
foo: 1
bar: 2
- Series labels: -
+
Associated series:
+
+ +
foo: 2
bar: 3
`); }); diff --git a/web/ui/react-app/src/pages/graph/GraphHelpers.ts b/web/ui/react-app/src/pages/graph/GraphHelpers.ts index 4d09010953..08f630ac42 100644 --- a/web/ui/react-app/src/pages/graph/GraphHelpers.ts +++ b/web/ui/react-app/src/pages/graph/GraphHelpers.ts @@ -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 => ` +
+ ${Object.keys(labels).length === 0 ? '
no labels
' : ''} + ${labels['__name__'] ? `
${labels['__name__']}
` : ''} + ${Object.keys(labels) + .filter(k => k !== '__name__') + .map(k => `
${k}: ${escapeHTML(labels[k])}
`) + .join('')} +
`; + return `
${dateTime.format('YYYY-MM-DD HH:mm:ss Z')}
${labels.__name__ || 'value'}: ${yval} -
-
- ${Object.keys(labels) - .map(k => - k !== '__name__' ? `
${k}: ${escapeHTML(labels[k])}
` : '' - ) - .join('')}
+
${'seriesLabels' in both ? 'Trace exemplar:' : 'Series:'}
+ ${formatLabels(labels)} ${ 'seriesLabels' in both ? ` - Series labels: -
- ${Object.keys(both.seriesLabels) - .map(k => - k !== '__name__' - ? `
${k}: ${escapeHTML(both.seriesLabels[k])}
` - : '' - ) - .join('')} -
- ` +
Associated series:
${formatLabels(both.seriesLabels)} +` : '' } `.trimEnd();