From 2205464a8d9ecc7c0eae486365fe4787113f7b04 Mon Sep 17 00:00:00 2001 From: David Date: Fri, 28 May 2021 14:51:06 +0200 Subject: [PATCH] Prometheus: Add metadata to metrics in Metrics browser (#34708) * Prometheus: Add metadata to metrics in Metrics browser - use the available metadata to enhance the tooltip on metric items in the metrics browser - added meta info for histogram metrics (was missing before) - also added one for ALERTS * fix test --- .../prometheus/components/Label.tsx | 5 +-- .../components/PrometheusMetricsBrowser.tsx | 16 ++++++++- .../prometheus/language_utils.test.ts | 34 ++++++++++++++++--- .../datasource/prometheus/language_utils.ts | 32 ++++++++++++++++- 4 files changed, 79 insertions(+), 8 deletions(-) diff --git a/public/app/plugins/datasource/prometheus/components/Label.tsx b/public/app/plugins/datasource/prometheus/components/Label.tsx index f9a28ea4cc6..73aee5da58c 100644 --- a/public/app/plugins/datasource/prometheus/components/Label.tsx +++ b/public/app/plugins/datasource/prometheus/components/Label.tsx @@ -17,6 +17,7 @@ export interface Props extends Omit, 'onClick'> { searchTerm?: string; value?: string; facets?: number; + title?: string; onClick?: OnLabelClick; } @@ -24,7 +25,7 @@ export interface Props extends Omit, 'onClick'> { * TODO #33976: Create a common, shared component with public/app/plugins/datasource/loki/components/LokiLabel.tsx */ export const Label = forwardRef( - ({ name, value, hidden, facets, onClick, className, loading, searchTerm, active, style, ...rest }, ref) => { + ({ name, value, hidden, facets, onClick, className, loading, searchTerm, active, style, title, ...rest }, ref) => { const theme = useTheme2(); const styles = getLabelStyles(theme); const searchWords = searchTerm ? [searchTerm] : []; @@ -46,7 +47,7 @@ export const Label = forwardRef( ref={ref} onClick={onLabelClick} style={style} - title={text} + title={title || text} role="option" aria-selected={!!active} className={cx( diff --git a/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx b/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx index b7b98415d33..400bb60939e 100644 --- a/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx +++ b/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx @@ -36,6 +36,7 @@ interface BrowserState { interface FacettableValue { name: string; selected?: boolean; + details?: string; } export interface SelectableLabel { @@ -385,7 +386,19 @@ export class UnthemedPrometheusMetricsBrowser extends React.Component ({ name: value })); + const values: FacettableValue[] = []; + const { metricsMetadata } = languageProvider; + for (const labelValue of rawValues) { + const value: FacettableValue = { name: labelValue }; + // Adding type/help text to metrics + if (name === METRIC_LABEL && metricsMetadata) { + const meta = metricsMetadata[labelValue]?.[0]; + if (meta) { + value.details = `(${meta.type}) ${meta.help}`; + } + } + values.push(value); + } this.updateLabelState(name, { values, loading: false }); } catch (error) { console.error(error); @@ -498,6 +511,7 @@ export class UnthemedPrometheusMetricsBrowser extends React.Component { }); describe('fixSummariesMetadata', () => { - it('returns empty metadata', () => { - expect(fixSummariesMetadata({})).toEqual({}); + const synthetics = { + ALERTS: [ + { + type: 'counter', + help: + 'Time series showing pending and firing alerts. The sample value is set to 1 as long as the alert is in the indicated active (pending or firing) state.', + }, + ], + }; + it('returns only synthetics on empty metadata', () => { + expect(fixSummariesMetadata({})).toEqual({ ...synthetics }); }); it('returns unchanged metadata if no summary is present', () => { const metadata = { foo: [{ type: 'not_a_summary', help: 'foo help' }], }; - expect(fixSummariesMetadata(metadata)).toEqual(metadata); + expect(fixSummariesMetadata(metadata)).toEqual({ ...metadata, ...synthetics }); }); it('returns metadata with added count and sum for a summary', () => { @@ -94,7 +103,24 @@ describe('fixSummariesMetadata', () => { bar_count: [{ type: 'counter', help: 'Count of events that have been observed for the base metric (bar help)' }], bar_sum: [{ type: 'counter', help: 'Total sum of all observed values for the base metric (bar help)' }], }; - expect(fixSummariesMetadata(metadata)).toEqual(expected); + expect(fixSummariesMetadata(metadata)).toEqual({ ...expected, ...synthetics }); + }); + + it('returns metadata with added bucket/count/sum for a histogram', () => { + const metadata = { + foo: [{ type: 'not_a_histogram', help: 'foo help' }], + bar: [{ type: 'histogram', help: 'bar help' }], + }; + const expected = { + foo: [{ type: 'not_a_histogram', help: 'foo help' }], + bar: [{ type: 'histogram', help: 'bar help' }], + bar_bucket: [{ type: 'counter', help: 'Cumulative counters for the observation buckets (bar help)' }], + bar_count: [ + { type: 'counter', help: 'Count of events that have been observed for the histogram metric (bar help)' }, + ], + bar_sum: [{ type: 'counter', help: 'Total sum of all observed values for the histogram metric (bar help)' }], + }; + expect(fixSummariesMetadata(metadata)).toEqual({ ...expected, ...synthetics }); }); }); diff --git a/public/app/plugins/datasource/prometheus/language_utils.ts b/public/app/plugins/datasource/prometheus/language_utils.ts index edf0955be02..4ec792a62cf 100644 --- a/public/app/plugins/datasource/prometheus/language_utils.ts +++ b/public/app/plugins/datasource/prometheus/language_utils.ts @@ -176,6 +176,26 @@ export function fixSummariesMetadata(metadata: PromMetricsMetadata): PromMetrics const summaryMetadata: PromMetricsMetadata = {}; for (const metric in metadata) { const item = metadata[metric][0]; + if (item.type === 'histogram') { + summaryMetadata[`${metric}_bucket`] = [ + { + type: 'counter', + help: `Cumulative counters for the observation buckets (${item.help})`, + }, + ]; + summaryMetadata[`${metric}_count`] = [ + { + type: 'counter', + help: `Count of events that have been observed for the histogram metric (${item.help})`, + }, + ]; + summaryMetadata[`${metric}_sum`] = [ + { + type: 'counter', + help: `Total sum of all observed values for the histogram metric (${item.help})`, + }, + ]; + } if (item.type === 'summary') { summaryMetadata[`${metric}_count`] = [ { @@ -191,7 +211,17 @@ export function fixSummariesMetadata(metadata: PromMetricsMetadata): PromMetrics ]; } } - return { ...metadata, ...summaryMetadata }; + // Synthetic series + const syntheticMetadata: PromMetricsMetadata = {}; + syntheticMetadata['ALERTS'] = [ + { + type: 'counter', + help: + 'Time series showing pending and firing alerts. The sample value is set to 1 as long as the alert is in the indicated active (pending or firing) state.', + }, + ]; + + return { ...metadata, ...summaryMetadata, ...syntheticMetadata }; } export function roundMsToMin(milliseconds: number): number {