mirror of https://github.com/grafana/grafana
Prometheus: Metrics browser (#33847)
* [WIP] Metrics browser * Removed unused import * Metrics selection logic * Remove redundant tests All data is fetched now regardless to the current range so test for checking reloading the data on the range change are no longer relevant. * Remove commented out code blocks * Add issue number to todos Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>pull/33689/head^2
David
4 years ago
committed by
GitHub
parent
8d442c9b44
commit
4b0b69292e
@ -0,0 +1,123 @@ |
||||
import React, { forwardRef, HTMLAttributes } from 'react'; |
||||
import { cx, css } from '@emotion/css'; |
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { useTheme2 } from '@grafana/ui'; |
||||
// @ts-ignore
|
||||
import Highlighter from 'react-highlight-words'; |
||||
|
||||
/** |
||||
* @public |
||||
*/ |
||||
export type OnLabelClick = (name: string, value: string | undefined, event: React.MouseEvent<HTMLElement>) => void; |
||||
|
||||
export interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> { |
||||
name: string; |
||||
active?: boolean; |
||||
loading?: boolean; |
||||
searchTerm?: string; |
||||
value?: string; |
||||
facets?: number; |
||||
onClick?: OnLabelClick; |
||||
} |
||||
|
||||
/** |
||||
* TODO #33976: Create a common, shared component with public/app/plugins/datasource/loki/components/LokiLabel.tsx |
||||
*/ |
||||
export const Label = forwardRef<HTMLElement, Props>( |
||||
({ name, value, hidden, facets, onClick, className, loading, searchTerm, active, style, ...rest }, ref) => { |
||||
const theme = useTheme2(); |
||||
const styles = getLabelStyles(theme); |
||||
const searchWords = searchTerm ? [searchTerm] : []; |
||||
|
||||
const onLabelClick = (event: React.MouseEvent<HTMLElement>) => { |
||||
if (onClick && !hidden) { |
||||
onClick(name, value, event); |
||||
} |
||||
}; |
||||
// Using this component for labels and label values. If value is given use value for display text.
|
||||
let text = value || name; |
||||
if (facets) { |
||||
text = `${text} (${facets})`; |
||||
} |
||||
|
||||
return ( |
||||
<span |
||||
key={text} |
||||
ref={ref} |
||||
onClick={onLabelClick} |
||||
style={style} |
||||
title={text} |
||||
role="option" |
||||
aria-selected={!!active} |
||||
className={cx( |
||||
styles.base, |
||||
active && styles.active, |
||||
loading && styles.loading, |
||||
hidden && styles.hidden, |
||||
className, |
||||
onClick && !hidden && styles.hover |
||||
)} |
||||
{...rest} |
||||
> |
||||
<Highlighter textToHighlight={text} searchWords={searchWords} highlightClassName={styles.matchHighLight} /> |
||||
</span> |
||||
); |
||||
} |
||||
); |
||||
|
||||
Label.displayName = 'Label'; |
||||
|
||||
const getLabelStyles = (theme: GrafanaTheme2) => ({ |
||||
base: css` |
||||
cursor: pointer; |
||||
font-size: ${theme.typography.size.sm}; |
||||
line-height: ${theme.typography.bodySmall.lineHeight}; |
||||
background-color: ${theme.colors.background.secondary}; |
||||
vertical-align: baseline; |
||||
color: ${theme.colors.text}; |
||||
white-space: nowrap; |
||||
text-shadow: none; |
||||
padding: ${theme.spacing(0.5)}; |
||||
border-radius: ${theme.shape.borderRadius()}; |
||||
margin-right: ${theme.spacing(1)}; |
||||
margin-bottom: ${theme.spacing(0.5)}; |
||||
`,
|
||||
loading: css` |
||||
font-weight: ${theme.typography.fontWeightMedium}; |
||||
background-color: ${theme.colors.primary.shade}; |
||||
color: ${theme.colors.text.primary}; |
||||
animation: pulse 3s ease-out 0s infinite normal forwards; |
||||
@keyframes pulse { |
||||
0% { |
||||
color: ${theme.colors.text.primary}; |
||||
} |
||||
50% { |
||||
color: ${theme.colors.text.secondary}; |
||||
} |
||||
100% { |
||||
color: ${theme.colors.text.disabled}; |
||||
} |
||||
} |
||||
`,
|
||||
active: css` |
||||
font-weight: ${theme.typography.fontWeightMedium}; |
||||
background-color: ${theme.colors.primary.main}; |
||||
color: ${theme.colors.primary.contrastText}; |
||||
`,
|
||||
matchHighLight: css` |
||||
background: inherit; |
||||
color: ${theme.colors.primary.text}; |
||||
background-color: ${theme.colors.primary.transparent}; |
||||
`,
|
||||
hidden: css` |
||||
opacity: 0.6; |
||||
cursor: default; |
||||
border: 1px solid transparent; |
||||
`,
|
||||
hover: css` |
||||
&:hover { |
||||
opacity: 0.85; |
||||
cursor: pointer; |
||||
} |
||||
`,
|
||||
}); |
||||
@ -0,0 +1,265 @@ |
||||
import React from 'react'; |
||||
import { render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react'; |
||||
import userEvent from '@testing-library/user-event'; |
||||
|
||||
import { getTheme } from '@grafana/ui'; |
||||
import { |
||||
buildSelector, |
||||
facetLabels, |
||||
SelectableLabel, |
||||
UnthemedPrometheusMetricsBrowser, |
||||
BrowserProps, |
||||
} from './PrometheusMetricsBrowser'; |
||||
import PromQlLanguageProvider from '../language_provider'; |
||||
|
||||
describe('buildSelector()', () => { |
||||
it('returns an empty selector for no labels', () => { |
||||
expect(buildSelector([])).toEqual('{}'); |
||||
}); |
||||
it('returns an empty selector for selected labels with no values', () => { |
||||
const labels: SelectableLabel[] = [{ name: 'foo', selected: true }]; |
||||
expect(buildSelector(labels)).toEqual('{}'); |
||||
}); |
||||
it('returns an empty selector for one selected label with no selected values', () => { |
||||
const labels: SelectableLabel[] = [{ name: 'foo', selected: true, values: [{ name: 'bar' }] }]; |
||||
expect(buildSelector(labels)).toEqual('{}'); |
||||
}); |
||||
it('returns a simple selector from a selected label with a selected value', () => { |
||||
const labels: SelectableLabel[] = [{ name: 'foo', selected: true, values: [{ name: 'bar', selected: true }] }]; |
||||
expect(buildSelector(labels)).toEqual('{foo="bar"}'); |
||||
}); |
||||
it('metric selector without labels', () => { |
||||
const labels: SelectableLabel[] = [{ name: '__name__', selected: true, values: [{ name: 'foo', selected: true }] }]; |
||||
expect(buildSelector(labels)).toEqual('foo{}'); |
||||
}); |
||||
it('selector with multiple metrics', () => { |
||||
const labels: SelectableLabel[] = [ |
||||
{ |
||||
name: '__name__', |
||||
selected: true, |
||||
values: [ |
||||
{ name: 'foo', selected: true }, |
||||
{ name: 'bar', selected: true }, |
||||
], |
||||
}, |
||||
]; |
||||
expect(buildSelector(labels)).toEqual('{__name__=~"foo|bar"}'); |
||||
}); |
||||
it('metric selector with labels', () => { |
||||
const labels: SelectableLabel[] = [ |
||||
{ name: '__name__', selected: true, values: [{ name: 'foo', selected: true }] }, |
||||
{ name: 'bar', selected: true, values: [{ name: 'baz', selected: true }] }, |
||||
]; |
||||
expect(buildSelector(labels)).toEqual('foo{bar="baz"}'); |
||||
}); |
||||
}); |
||||
|
||||
describe('facetLabels()', () => { |
||||
const possibleLabels = { |
||||
cluster: ['dev'], |
||||
namespace: ['alertmanager'], |
||||
}; |
||||
const labels: SelectableLabel[] = [ |
||||
{ name: 'foo', selected: true, values: [{ name: 'bar' }] }, |
||||
{ name: 'cluster', values: [{ name: 'dev' }, { name: 'ops' }, { name: 'prod' }] }, |
||||
{ name: 'namespace', values: [{ name: 'alertmanager' }] }, |
||||
]; |
||||
|
||||
it('returns no labels given an empty label set', () => { |
||||
expect(facetLabels([], {})).toEqual([]); |
||||
}); |
||||
|
||||
it('marks all labels as hidden when no labels are possible', () => { |
||||
const result = facetLabels(labels, {}); |
||||
expect(result.length).toEqual(labels.length); |
||||
expect(result[0].hidden).toBeTruthy(); |
||||
expect(result[0].values).toBeUndefined(); |
||||
}); |
||||
|
||||
it('keeps values as facetted when they are possible', () => { |
||||
const result = facetLabels(labels, possibleLabels); |
||||
expect(result.length).toEqual(labels.length); |
||||
expect(result[0].hidden).toBeTruthy(); |
||||
expect(result[0].values).toBeUndefined(); |
||||
expect(result[1].hidden).toBeFalsy(); |
||||
expect(result[1].values!.length).toBe(1); |
||||
expect(result[1].values![0].name).toBe('dev'); |
||||
}); |
||||
|
||||
it('does not facet out label values that are currently being facetted', () => { |
||||
const result = facetLabels(labels, possibleLabels, 'cluster'); |
||||
expect(result.length).toEqual(labels.length); |
||||
expect(result[0].hidden).toBeTruthy(); |
||||
expect(result[1].hidden).toBeFalsy(); |
||||
// 'cluster' is being facetted, should show all 3 options even though only 1 is possible
|
||||
expect(result[1].values!.length).toBe(3); |
||||
expect(result[2].values!.length).toBe(1); |
||||
}); |
||||
}); |
||||
|
||||
describe('PrometheusMetricsBrowser', () => { |
||||
const setupProps = (): BrowserProps => { |
||||
const mockLanguageProvider = { |
||||
start: () => Promise.resolve(), |
||||
getLabelValues: (name: string) => { |
||||
switch (name) { |
||||
case 'label1': |
||||
return ['value1-1', 'value1-2']; |
||||
case 'label2': |
||||
return ['value2-1', 'value2-2']; |
||||
case 'label3': |
||||
return ['value3-1', 'value3-2']; |
||||
} |
||||
return []; |
||||
}, |
||||
fetchSeriesLabels: (selector: string) => { |
||||
switch (selector) { |
||||
case '{label1="value1-1"}': |
||||
return { label1: ['value1-1'], label2: ['value2-1'], label3: ['value3-1'] }; |
||||
case '{label1=~"value1-1|value1-2"}': |
||||
return { label1: ['value1-1', 'value1-2'], label2: ['value2-1'], label3: ['value3-1', 'value3-2'] }; |
||||
} |
||||
// Allow full set by default
|
||||
return { |
||||
label1: ['value1-1', 'value1-2'], |
||||
label2: ['value2-1', 'value2-2'], |
||||
}; |
||||
}, |
||||
getLabelKeys: () => ['label1', 'label2', 'label3'], |
||||
}; |
||||
|
||||
const defaults: BrowserProps = { |
||||
theme: getTheme(), |
||||
onChange: () => {}, |
||||
autoSelect: 0, |
||||
languageProvider: (mockLanguageProvider as unknown) as PromQlLanguageProvider, |
||||
}; |
||||
|
||||
return defaults; |
||||
}; |
||||
|
||||
// Clear label selection manually because it's saved in localStorage
|
||||
afterEach(() => { |
||||
const clearBtn = screen.getByLabelText('Selector clear button'); |
||||
userEvent.click(clearBtn); |
||||
}); |
||||
|
||||
it('renders and loader shows when empty, and then first set of labels', async () => { |
||||
const props = setupProps(); |
||||
render(<UnthemedPrometheusMetricsBrowser {...props} />); |
||||
// Loading appears and dissappears
|
||||
screen.getByText(/Loading labels/); |
||||
await waitFor(() => { |
||||
expect(screen.queryByText(/Loading labels/)).not.toBeInTheDocument(); |
||||
}); |
||||
// Initial set of labels is available and not selected
|
||||
expect(screen.queryByRole('option', { name: 'label1' })).toBeInTheDocument(); |
||||
expect(screen.queryByRole('option', { name: 'label1', selected: true })).not.toBeInTheDocument(); |
||||
expect(screen.queryByRole('option', { name: 'label2' })).toBeInTheDocument(); |
||||
expect(screen.queryByRole('option', { name: 'label2', selected: true })).not.toBeInTheDocument(); |
||||
expect(screen.queryByLabelText('selector')).toHaveTextContent('{}'); |
||||
}); |
||||
|
||||
it('allows label and value selection/deselection', async () => { |
||||
const props = setupProps(); |
||||
render(<UnthemedPrometheusMetricsBrowser {...props} />); |
||||
// Selecting label2
|
||||
const label2 = await screen.findByRole('option', { name: /label2/, selected: false }); |
||||
expect(screen.queryByRole('list', { name: /Values/ })).not.toBeInTheDocument(); |
||||
userEvent.click(label2); |
||||
expect(screen.queryByRole('option', { name: /label2/, selected: true })).toBeInTheDocument(); |
||||
// List of values for label2 appears
|
||||
expect(await screen.findAllByRole('list')).toHaveLength(1); |
||||
expect(screen.queryByLabelText(/Values for/)).toHaveTextContent('label2'); |
||||
expect(screen.queryByRole('option', { name: 'value2-1' })).toBeInTheDocument(); |
||||
expect(screen.queryByRole('option', { name: 'value2-2' })).toBeInTheDocument(); |
||||
expect(screen.queryByLabelText('selector')).toHaveTextContent('{}'); |
||||
// Selecting label1, list for its values appears
|
||||
const label1 = await screen.findByRole('option', { name: /label1/, selected: false }); |
||||
userEvent.click(label1); |
||||
expect(screen.queryByRole('option', { name: /label1/, selected: true })).toBeInTheDocument(); |
||||
await screen.findByLabelText('Values for label1'); |
||||
expect(await screen.findAllByRole('list', { name: /Values/ })).toHaveLength(2); |
||||
// Selecting value2-2 of label2
|
||||
const value = await screen.findByRole('option', { name: 'value2-2', selected: false }); |
||||
userEvent.click(value); |
||||
await screen.findByRole('option', { name: 'value2-2', selected: true }); |
||||
expect(screen.queryByLabelText('selector')).toHaveTextContent('{label2="value2-2"}'); |
||||
// Selecting value2-1 of label2, both values now selected
|
||||
const value2 = await screen.findByRole('option', { name: 'value2-1', selected: false }); |
||||
userEvent.click(value2); |
||||
// await screen.findByRole('option', {name: 'value2-1', selected: true});
|
||||
await screen.findByText('{label2=~"value2-1|value2-2"}'); |
||||
// Deselecting value2-2, one value should remain
|
||||
const selectedValue = await screen.findByRole('option', { name: 'value2-2', selected: true }); |
||||
userEvent.click(selectedValue); |
||||
await screen.findByRole('option', { name: 'value2-1', selected: true }); |
||||
await screen.findByRole('option', { name: 'value2-2', selected: false }); |
||||
expect(screen.queryByLabelText('selector')).toHaveTextContent('{label2="value2-1"}'); |
||||
// Selecting value from label1 for combined selector
|
||||
const value1 = await screen.findByRole('option', { name: 'value1-2', selected: false }); |
||||
userEvent.click(value1); |
||||
await screen.findByRole('option', { name: 'value1-2', selected: true }); |
||||
await screen.findByText('{label1="value1-2",label2="value2-1"}'); |
||||
// Deselect label1 should remove label and value
|
||||
const selectedLabel = (await screen.findAllByRole('option', { name: /label1/, selected: true }))[0]; |
||||
userEvent.click(selectedLabel); |
||||
await screen.findByRole('option', { name: /label1/, selected: false }); |
||||
expect(await screen.findAllByRole('list', { name: /Values/ })).toHaveLength(1); |
||||
expect(screen.queryByLabelText('selector')).toHaveTextContent('{label2="value2-1"}'); |
||||
// Clear selector
|
||||
const clearBtn = screen.getByLabelText('Selector clear button'); |
||||
userEvent.click(clearBtn); |
||||
await screen.findByRole('option', { name: /label2/, selected: false }); |
||||
expect(screen.queryByLabelText('selector')).toHaveTextContent('{}'); |
||||
}); |
||||
|
||||
it('filters values by input text', async () => { |
||||
const props = setupProps(); |
||||
render(<UnthemedPrometheusMetricsBrowser {...props} />); |
||||
// Selecting label2 and label1
|
||||
const label2 = await screen.findByRole('option', { name: /label2/, selected: false }); |
||||
userEvent.click(label2); |
||||
const label1 = await screen.findByRole('option', { name: /label1/, selected: false }); |
||||
userEvent.click(label1); |
||||
await screen.findByLabelText('Values for label1'); |
||||
await screen.findByLabelText('Values for label2'); |
||||
expect(await screen.findAllByRole('option', { name: /value/ })).toHaveLength(4); |
||||
// Typing '1' to filter for values
|
||||
userEvent.type(screen.getByLabelText('Filter expression for label values'), '1'); |
||||
expect(screen.getByLabelText('Filter expression for label values')).toHaveValue('1'); |
||||
expect(screen.queryByRole('option', { name: 'value2-2' })).not.toBeInTheDocument(); |
||||
expect(await screen.findAllByRole('option', { name: /value/ })).toHaveLength(3); |
||||
}); |
||||
|
||||
it('facets labels', async () => { |
||||
const props = setupProps(); |
||||
render(<UnthemedPrometheusMetricsBrowser {...props} />); |
||||
// Selecting label2 and label1
|
||||
const label2 = await screen.findByRole('option', { name: /label2/, selected: false }); |
||||
userEvent.click(label2); |
||||
const label1 = await screen.findByRole('option', { name: /label1/, selected: false }); |
||||
userEvent.click(label1); |
||||
await screen.findByLabelText('Values for label1'); |
||||
await screen.findByLabelText('Values for label2'); |
||||
expect(await screen.findAllByRole('option', { name: /value/ })).toHaveLength(4); |
||||
expect(screen.queryByRole('option', { name: /label3/ })).toHaveTextContent('label3'); |
||||
// Click value1-1 which triggers facetting for value3-x, and still show all value1-x
|
||||
const value1 = await screen.findByRole('option', { name: 'value1-1', selected: false }); |
||||
userEvent.click(value1); |
||||
await waitForElementToBeRemoved(screen.queryByRole('option', { name: 'value2-2' })); |
||||
expect(screen.queryByRole('option', { name: 'value1-2' })).toBeInTheDocument(); |
||||
expect(screen.queryByLabelText('selector')).toHaveTextContent('{label1="value1-1"}'); |
||||
expect(screen.queryByRole('option', { name: /label3/ })).toHaveTextContent('label3 (1)'); |
||||
// Click value1-2 for which facetting will allow more values for value3-x
|
||||
const value12 = await screen.findByRole('option', { name: 'value1-2', selected: false }); |
||||
userEvent.click(value12); |
||||
await screen.findByRole('option', { name: 'value1-2', selected: true }); |
||||
userEvent.click(screen.getByRole('option', { name: /label3/ })); |
||||
await screen.findByLabelText('Values for label3'); |
||||
expect(screen.queryByRole('option', { name: 'value1-1', selected: true })).toBeInTheDocument(); |
||||
expect(screen.queryByRole('option', { name: 'value1-2', selected: true })).toBeInTheDocument(); |
||||
expect(screen.queryByLabelText('selector')).toHaveTextContent('{label1=~"value1-1|value1-2"}'); |
||||
expect(screen.queryAllByRole('option', { name: /label3/ })[0]).toHaveTextContent('label3 (2)'); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,633 @@ |
||||
import React, { ChangeEvent } from 'react'; |
||||
import { Button, HorizontalGroup, Input, Label, LoadingPlaceholder, stylesFactory, withTheme } from '@grafana/ui'; |
||||
import PromQlLanguageProvider from '../language_provider'; |
||||
import { css, cx } from '@emotion/css'; |
||||
import store from 'app/core/store'; |
||||
import { FixedSizeList } from 'react-window'; |
||||
|
||||
import { GrafanaTheme } from '@grafana/data'; |
||||
import { Label as PromLabel } from './Label'; |
||||
|
||||
// Hard limit on labels to render
|
||||
const MAX_LABEL_COUNT = 10000; |
||||
const MAX_VALUE_COUNT = 10000; |
||||
const EMPTY_SELECTOR = '{}'; |
||||
const METRIC_LABEL = '__name__'; |
||||
export const LAST_USED_LABELS_KEY = 'grafana.datasources.prometheus.browser.labels'; |
||||
|
||||
export interface BrowserProps { |
||||
languageProvider: PromQlLanguageProvider; |
||||
onChange: (selector: string) => void; |
||||
theme: GrafanaTheme; |
||||
autoSelect?: number; |
||||
hide?: () => void; |
||||
} |
||||
|
||||
interface BrowserState { |
||||
labels: SelectableLabel[]; |
||||
labelSearchTerm: string; |
||||
metricSearchTerm: string; |
||||
status: string; |
||||
error: string; |
||||
validationStatus: string; |
||||
valueSearchTerm: string; |
||||
} |
||||
|
||||
interface FacettableValue { |
||||
name: string; |
||||
selected?: boolean; |
||||
} |
||||
|
||||
export interface SelectableLabel { |
||||
name: string; |
||||
selected?: boolean; |
||||
loading?: boolean; |
||||
values?: FacettableValue[]; |
||||
hidden?: boolean; |
||||
facets?: number; |
||||
} |
||||
|
||||
export function buildSelector(labels: SelectableLabel[]): string { |
||||
let singleMetric = ''; |
||||
const selectedLabels = []; |
||||
for (const label of labels) { |
||||
if ((label.name === METRIC_LABEL || label.selected) && label.values && label.values.length > 0) { |
||||
const selectedValues = label.values.filter((value) => value.selected).map((value) => value.name); |
||||
if (selectedValues.length > 1) { |
||||
selectedLabels.push(`${label.name}=~"${selectedValues.join('|')}"`); |
||||
} else if (selectedValues.length === 1) { |
||||
if (label.name === METRIC_LABEL) { |
||||
singleMetric = selectedValues[0]; |
||||
} else { |
||||
selectedLabels.push(`${label.name}="${selectedValues[0]}"`); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
return [singleMetric, '{', selectedLabels.join(','), '}'].join(''); |
||||
} |
||||
|
||||
export function facetLabels( |
||||
labels: SelectableLabel[], |
||||
possibleLabels: Record<string, string[]>, |
||||
lastFacetted?: string |
||||
): SelectableLabel[] { |
||||
return labels.map((label) => { |
||||
const possibleValues = possibleLabels[label.name]; |
||||
if (possibleValues) { |
||||
let existingValues: FacettableValue[]; |
||||
if (label.name === lastFacetted && label.values) { |
||||
// Facetting this label, show all values
|
||||
existingValues = label.values; |
||||
} else { |
||||
// Keep selection in other facets
|
||||
const selectedValues: Set<string> = new Set( |
||||
label.values?.filter((value) => value.selected).map((value) => value.name) || [] |
||||
); |
||||
// Values for this label have not been requested yet, let's use the facetted ones as the initial values
|
||||
existingValues = possibleValues.map((value) => ({ name: value, selected: selectedValues.has(value) })); |
||||
} |
||||
return { |
||||
...label, |
||||
loading: false, |
||||
values: existingValues, |
||||
hidden: !possibleValues, |
||||
facets: existingValues.length, |
||||
}; |
||||
} |
||||
|
||||
// Label is facetted out, hide all values
|
||||
return { ...label, loading: false, hidden: !possibleValues, values: undefined, facets: 0 }; |
||||
}); |
||||
} |
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme) => ({ |
||||
wrapper: css` |
||||
background-color: ${theme.colors.bg2}; |
||||
padding: ${theme.spacing.md}; |
||||
width: 100%; |
||||
`,
|
||||
list: css` |
||||
margin-top: ${theme.spacing.sm}; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
max-height: 200px; |
||||
overflow: auto; |
||||
`,
|
||||
section: css` |
||||
& + & { |
||||
margin: ${theme.spacing.md} 0; |
||||
} |
||||
position: relative; |
||||
`,
|
||||
selector: css` |
||||
font-family: ${theme.typography.fontFamily.monospace}; |
||||
margin-bottom: ${theme.spacing.sm}; |
||||
`,
|
||||
status: css` |
||||
padding: ${theme.spacing.xs}; |
||||
color: ${theme.colors.textSemiWeak}; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
/* using absolute positioning because flex interferes with ellipsis */ |
||||
position: absolute; |
||||
width: 50%; |
||||
right: 0; |
||||
text-align: right; |
||||
transition: opacity 100ms linear; |
||||
opacity: 0; |
||||
`,
|
||||
statusShowing: css` |
||||
opacity: 1; |
||||
`,
|
||||
error: css` |
||||
color: ${theme.palette.brandDanger}; |
||||
`,
|
||||
valueList: css` |
||||
margin-right: ${theme.spacing.sm}; |
||||
`,
|
||||
valueListWrapper: css` |
||||
border-left: 1px solid ${theme.colors.border2}; |
||||
margin: ${theme.spacing.sm} 0; |
||||
padding: ${theme.spacing.sm} 0 ${theme.spacing.sm} ${theme.spacing.sm}; |
||||
`,
|
||||
valueListArea: css` |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
margin-top: ${theme.spacing.sm}; |
||||
`,
|
||||
valueTitle: css` |
||||
margin-left: -${theme.spacing.xs}; |
||||
margin-bottom: ${theme.spacing.sm}; |
||||
`,
|
||||
validationStatus: css` |
||||
padding: ${theme.spacing.xs}; |
||||
margin-bottom: ${theme.spacing.sm}; |
||||
color: ${theme.colors.textStrong}; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
`,
|
||||
})); |
||||
|
||||
/** |
||||
* TODO #33976: Remove duplicated code. The component is very similar to LokiLabelBrowser.tsx. Check if it's possible |
||||
* to create a single, generic component. |
||||
*/ |
||||
export class UnthemedPrometheusMetricsBrowser extends React.Component<BrowserProps, BrowserState> { |
||||
state = { |
||||
labels: [] as SelectableLabel[], |
||||
labelSearchTerm: '', |
||||
metricSearchTerm: '', |
||||
status: 'Ready', |
||||
error: '', |
||||
validationStatus: '', |
||||
valueSearchTerm: '', |
||||
}; |
||||
|
||||
onChangeLabelSearch = (event: ChangeEvent<HTMLInputElement>) => { |
||||
this.setState({ labelSearchTerm: event.target.value }); |
||||
}; |
||||
|
||||
onChangeMetricSearch = (event: ChangeEvent<HTMLInputElement>) => { |
||||
this.setState({ metricSearchTerm: event.target.value }); |
||||
}; |
||||
|
||||
onChangeValueSearch = (event: ChangeEvent<HTMLInputElement>) => { |
||||
this.setState({ valueSearchTerm: event.target.value }); |
||||
}; |
||||
|
||||
onClickRunQuery = () => { |
||||
const selector = buildSelector(this.state.labels); |
||||
this.props.onChange(selector); |
||||
}; |
||||
|
||||
onClickRunRateQuery = () => { |
||||
const selector = buildSelector(this.state.labels); |
||||
const query = `rate(${selector}[$__interval])`; |
||||
this.props.onChange(query); |
||||
}; |
||||
|
||||
onClickClear = () => { |
||||
this.setState((state) => { |
||||
const labels: SelectableLabel[] = state.labels.map((label) => ({ |
||||
...label, |
||||
values: undefined, |
||||
selected: false, |
||||
loading: false, |
||||
hidden: false, |
||||
facets: undefined, |
||||
})); |
||||
return { |
||||
labels, |
||||
labelSearchTerm: '', |
||||
metricSearchTerm: '', |
||||
status: '', |
||||
error: '', |
||||
validationStatus: '', |
||||
valueSearchTerm: '', |
||||
}; |
||||
}); |
||||
store.delete(LAST_USED_LABELS_KEY); |
||||
// Get metrics
|
||||
this.fetchValues(METRIC_LABEL); |
||||
}; |
||||
|
||||
onClickLabel = (name: string, value: string | undefined, event: React.MouseEvent<HTMLElement>) => { |
||||
const label = this.state.labels.find((l) => l.name === name); |
||||
if (!label) { |
||||
return; |
||||
} |
||||
// Toggle selected state
|
||||
const selected = !label.selected; |
||||
let nextValue: Partial<SelectableLabel> = { selected }; |
||||
if (label.values && !selected) { |
||||
// Deselect all values if label was deselected
|
||||
const values = label.values.map((value) => ({ ...value, selected: false })); |
||||
nextValue = { ...nextValue, facets: 0, values }; |
||||
} |
||||
// Resetting search to prevent empty results
|
||||
this.setState({ labelSearchTerm: '' }); |
||||
this.updateLabelState(name, nextValue, '', () => this.doFacettingForLabel(name)); |
||||
}; |
||||
|
||||
onClickValue = (name: string, value: string | undefined, event: React.MouseEvent<HTMLElement>) => { |
||||
const label = this.state.labels.find((l) => l.name === name); |
||||
if (!label || !label.values) { |
||||
return; |
||||
} |
||||
// Resetting search to prevent empty results
|
||||
this.setState({ labelSearchTerm: '' }); |
||||
// Toggling value for selected label, leaving other values intact
|
||||
const values = label.values.map((v) => ({ ...v, selected: v.name === value ? !v.selected : v.selected })); |
||||
this.updateLabelState(name, { values }, '', () => this.doFacetting(name)); |
||||
}; |
||||
|
||||
onClickMetric = (name: string, value: string | undefined, event: React.MouseEvent<HTMLElement>) => { |
||||
// Finding special metric label
|
||||
const label = this.state.labels.find((l) => l.name === name); |
||||
if (!label || !label.values) { |
||||
return; |
||||
} |
||||
// Resetting search to prevent empty results
|
||||
this.setState({ metricSearchTerm: '' }); |
||||
// Toggling value for selected label, leaving other values intact
|
||||
const values = label.values.map((v) => ({ |
||||
...v, |
||||
selected: v.name === value || v.selected ? !v.selected : v.selected, |
||||
})); |
||||
// Toggle selected state of special metrics label
|
||||
const selected = values.some((v) => v.selected); |
||||
this.updateLabelState(name, { selected, values }, '', () => this.doFacetting(name)); |
||||
}; |
||||
|
||||
onClickValidate = () => { |
||||
const selector = buildSelector(this.state.labels); |
||||
this.validateSelector(selector); |
||||
}; |
||||
|
||||
updateLabelState(name: string, updatedFields: Partial<SelectableLabel>, status = '', cb?: () => void) { |
||||
this.setState((state) => { |
||||
const labels: SelectableLabel[] = state.labels.map((label) => { |
||||
if (label.name === name) { |
||||
return { ...label, ...updatedFields }; |
||||
} |
||||
return label; |
||||
}); |
||||
// New status overrides errors
|
||||
const error = status ? '' : state.error; |
||||
return { labels, status, error, validationStatus: '' }; |
||||
}, cb); |
||||
} |
||||
|
||||
componentDidMount() { |
||||
const { languageProvider } = this.props; |
||||
if (languageProvider) { |
||||
const selectedLabels: string[] = store.getObject(LAST_USED_LABELS_KEY, []); |
||||
languageProvider.start().then(() => { |
||||
let rawLabels: string[] = languageProvider.getLabelKeys(); |
||||
// TODO too-many-metrics
|
||||
if (rawLabels.length > MAX_LABEL_COUNT) { |
||||
const error = `Too many labels found (showing only ${MAX_LABEL_COUNT} of ${rawLabels.length})`; |
||||
rawLabels = rawLabels.slice(0, MAX_LABEL_COUNT); |
||||
this.setState({ error }); |
||||
} |
||||
// Get metrics
|
||||
this.fetchValues(METRIC_LABEL); |
||||
// Auto-select previously selected labels
|
||||
const labels: SelectableLabel[] = rawLabels.map((label, i, arr) => ({ |
||||
name: label, |
||||
selected: selectedLabels.includes(label), |
||||
loading: false, |
||||
})); |
||||
// Pre-fetch values for selected labels
|
||||
this.setState({ labels }, () => { |
||||
this.state.labels.forEach((label) => { |
||||
if (label.selected) { |
||||
this.fetchValues(label.name); |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
} |
||||
} |
||||
|
||||
doFacettingForLabel(name: string) { |
||||
const label = this.state.labels.find((l) => l.name === name); |
||||
if (!label) { |
||||
return; |
||||
} |
||||
const selectedLabels = this.state.labels.filter((label) => label.selected).map((label) => label.name); |
||||
store.setObject(LAST_USED_LABELS_KEY, selectedLabels); |
||||
if (label.selected) { |
||||
// Refetch values for newly selected label...
|
||||
if (!label.values) { |
||||
this.fetchValues(name); |
||||
} |
||||
} else { |
||||
// Only need to facet when deselecting labels
|
||||
this.doFacetting(); |
||||
} |
||||
} |
||||
|
||||
doFacetting = (lastFacetted?: string) => { |
||||
const selector = buildSelector(this.state.labels); |
||||
if (selector === EMPTY_SELECTOR) { |
||||
// Clear up facetting
|
||||
const labels: SelectableLabel[] = this.state.labels.map((label) => { |
||||
return { ...label, facets: 0, values: undefined, hidden: false }; |
||||
}); |
||||
this.setState({ labels }, () => { |
||||
// Get fresh set of values
|
||||
this.state.labels.forEach( |
||||
(label) => (label.selected || label.name === METRIC_LABEL) && this.fetchValues(label.name) |
||||
); |
||||
}); |
||||
} else { |
||||
// Do facetting
|
||||
this.fetchSeries(selector, lastFacetted); |
||||
} |
||||
}; |
||||
|
||||
async fetchValues(name: string) { |
||||
const { languageProvider } = this.props; |
||||
this.updateLabelState(name, { loading: true }, `Fetching values for ${name}`); |
||||
try { |
||||
let rawValues = await languageProvider.getLabelValues(name); |
||||
if (rawValues.length > MAX_VALUE_COUNT) { |
||||
const error = `Too many values for ${name} (showing only ${MAX_VALUE_COUNT} of ${rawValues.length})`; |
||||
rawValues = rawValues.slice(0, MAX_VALUE_COUNT); |
||||
this.setState({ error }); |
||||
} |
||||
const values: FacettableValue[] = rawValues.map((value) => ({ name: value })); |
||||
this.updateLabelState(name, { values, loading: false }, ''); |
||||
} catch (error) { |
||||
console.error(error); |
||||
} |
||||
} |
||||
|
||||
async fetchSeries(selector: string, lastFacetted?: string) { |
||||
const { languageProvider } = this.props; |
||||
if (lastFacetted) { |
||||
this.updateLabelState(lastFacetted, { loading: true }, `Facetting labels for ${selector}`); |
||||
} |
||||
try { |
||||
const possibleLabels = await languageProvider.fetchSeriesLabels(selector, true); |
||||
if (Object.keys(possibleLabels).length === 0) { |
||||
// Sometimes the backend does not return a valid set
|
||||
console.error('No results for label combination, but should not occur.'); |
||||
this.setState({ error: `Facetting failed for ${selector}` }); |
||||
return; |
||||
} |
||||
const labels: SelectableLabel[] = facetLabels(this.state.labels, possibleLabels, lastFacetted); |
||||
this.setState({ labels, error: '' }); |
||||
if (lastFacetted) { |
||||
this.updateLabelState(lastFacetted, { loading: false }); |
||||
} |
||||
} catch (error) { |
||||
console.error(error); |
||||
} |
||||
} |
||||
|
||||
async validateSelector(selector: string) { |
||||
const { languageProvider } = this.props; |
||||
this.setState({ validationStatus: `Validating selector ${selector}`, error: '' }); |
||||
const streams = await languageProvider.fetchSeries(selector); |
||||
this.setState({ validationStatus: `Selector is valid (${streams.length} streams found)` }); |
||||
} |
||||
|
||||
render() { |
||||
const { theme } = this.props; |
||||
const { labels, labelSearchTerm, metricSearchTerm, status, error, validationStatus, valueSearchTerm } = this.state; |
||||
const styles = getStyles(theme); |
||||
if (labels.length === 0) { |
||||
return ( |
||||
<div className={styles.wrapper}> |
||||
<LoadingPlaceholder text="Loading labels..." /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
// Filter metrics
|
||||
let metrics = labels.find((label) => label.name === METRIC_LABEL); |
||||
if (metrics && metricSearchTerm) { |
||||
// TODO extract from render() and debounce
|
||||
metrics = { |
||||
...metrics, |
||||
values: metrics.values?.filter((value) => value.selected || value.name.includes(metricSearchTerm)), |
||||
}; |
||||
} |
||||
|
||||
// Filter labels
|
||||
let nonMetricLabels = labels.filter((label) => !label.hidden && label.name !== METRIC_LABEL); |
||||
if (labelSearchTerm) { |
||||
// TODO extract from render() and debounce
|
||||
nonMetricLabels = nonMetricLabels.filter((label) => label.selected || label.name.includes(labelSearchTerm)); |
||||
} |
||||
|
||||
// Filter non-metric label values
|
||||
let selectedLabels = nonMetricLabels.filter((label) => label.selected && label.values); |
||||
if (valueSearchTerm) { |
||||
// TODO extract from render() and debounce
|
||||
selectedLabels = selectedLabels.map((label) => ({ |
||||
...label, |
||||
values: label.values?.filter((value) => value.selected || value.name.includes(valueSearchTerm)), |
||||
})); |
||||
} |
||||
const selector = buildSelector(this.state.labels); |
||||
const empty = selector === EMPTY_SELECTOR; |
||||
return ( |
||||
<div className={styles.wrapper}> |
||||
<HorizontalGroup align="flex-start" spacing="lg"> |
||||
<div> |
||||
<div className={styles.section}> |
||||
<Label description="Which metric do you want to use?">1. Select metric to search in</Label> |
||||
<div> |
||||
<Input |
||||
onChange={this.onChangeMetricSearch} |
||||
aria-label="Filter expression for metric" |
||||
value={metricSearchTerm} |
||||
/> |
||||
</div> |
||||
<div role="list" className={styles.valueListWrapper}> |
||||
<FixedSizeList |
||||
height={550} |
||||
itemCount={metrics?.values?.length || 0} |
||||
itemSize={25} |
||||
itemKey={(i) => (metrics!.values as FacettableValue[])[i].name} |
||||
width={300} |
||||
className={styles.valueList} |
||||
> |
||||
{({ index, style }) => { |
||||
const value = metrics?.values?.[index]; |
||||
if (!value) { |
||||
return null; |
||||
} |
||||
return ( |
||||
<div style={style}> |
||||
<PromLabel |
||||
name={metrics!.name} |
||||
value={value?.name} |
||||
active={value?.selected} |
||||
onClick={this.onClickMetric} |
||||
searchTerm={metricSearchTerm} |
||||
/> |
||||
</div> |
||||
); |
||||
}} |
||||
</FixedSizeList> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div> |
||||
<div className={styles.section}> |
||||
<Label description="Which labels would you like to consider for your search?"> |
||||
2. Select labels to search in |
||||
</Label> |
||||
<div> |
||||
<Input |
||||
onChange={this.onChangeLabelSearch} |
||||
aria-label="Filter expression for label" |
||||
value={labelSearchTerm} |
||||
/> |
||||
</div> |
||||
<div className={styles.list}> |
||||
{nonMetricLabels.map((label) => ( |
||||
<PromLabel |
||||
key={label.name} |
||||
name={label.name} |
||||
loading={label.loading} |
||||
active={label.selected} |
||||
hidden={label.hidden} |
||||
facets={label.facets} |
||||
onClick={this.onClickLabel} |
||||
searchTerm={labelSearchTerm} |
||||
/> |
||||
))} |
||||
</div> |
||||
</div> |
||||
<div className={styles.section}> |
||||
<Label description="Choose the label values that you would like to use for the query. Use the search field to find values across selected labels."> |
||||
3. Find values for the selected labels |
||||
</Label> |
||||
<div> |
||||
<Input |
||||
onChange={this.onChangeValueSearch} |
||||
aria-label="Filter expression for label values" |
||||
value={valueSearchTerm} |
||||
/> |
||||
</div> |
||||
<div className={styles.valueListArea}> |
||||
{selectedLabels.map((label) => ( |
||||
<div |
||||
role="list" |
||||
key={label.name} |
||||
aria-label={`Values for ${label.name}`} |
||||
className={styles.valueListWrapper} |
||||
> |
||||
<div className={styles.valueTitle}> |
||||
<PromLabel |
||||
name={label.name} |
||||
loading={label.loading} |
||||
active={label.selected} |
||||
hidden={label.hidden} |
||||
//If no facets, we want to show number of all label values
|
||||
facets={label.facets || label.values?.length} |
||||
onClick={this.onClickLabel} |
||||
/> |
||||
</div> |
||||
<FixedSizeList |
||||
height={200} |
||||
itemCount={label.values?.length || 0} |
||||
itemSize={25} |
||||
itemKey={(i) => (label.values as FacettableValue[])[i].name} |
||||
width={200} |
||||
className={styles.valueList} |
||||
> |
||||
{({ index, style }) => { |
||||
const value = label.values?.[index]; |
||||
if (!value) { |
||||
return null; |
||||
} |
||||
return ( |
||||
<div style={style}> |
||||
<PromLabel |
||||
name={label.name} |
||||
value={value?.name} |
||||
active={value?.selected} |
||||
onClick={this.onClickValue} |
||||
searchTerm={valueSearchTerm} |
||||
/> |
||||
</div> |
||||
); |
||||
}} |
||||
</FixedSizeList> |
||||
</div> |
||||
))} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</HorizontalGroup> |
||||
|
||||
<div className={styles.section}> |
||||
<Label>4. Resulting selector</Label> |
||||
<div aria-label="selector" className={styles.selector}> |
||||
{selector} |
||||
</div> |
||||
{validationStatus && <div className={styles.validationStatus}>{validationStatus}</div>} |
||||
<HorizontalGroup> |
||||
<Button aria-label="Use selector for query button" disabled={empty} onClick={this.onClickRunQuery}> |
||||
Run query |
||||
</Button> |
||||
<Button |
||||
aria-label="Use selector as metrics button" |
||||
variant="secondary" |
||||
disabled={empty} |
||||
onClick={this.onClickRunRateQuery} |
||||
> |
||||
Run rate query |
||||
</Button> |
||||
<Button |
||||
aria-label="Validate submit button" |
||||
variant="secondary" |
||||
disabled={empty} |
||||
onClick={this.onClickValidate} |
||||
> |
||||
Validate selector |
||||
</Button> |
||||
<Button aria-label="Selector clear button" variant="secondary" onClick={this.onClickClear}> |
||||
Clear |
||||
</Button> |
||||
<div className={cx(styles.status, (status || error) && styles.statusShowing)}> |
||||
<span className={error ? styles.error : ''}>{error || status}</span> |
||||
</div> |
||||
</HorizontalGroup> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export const PrometheusMetricsBrowser = withTheme(UnthemedPrometheusMetricsBrowser); |
||||
Loading…
Reference in new issue