opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-25 00:34:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Loki Query Variables: Add support to select from existing labels (#54625)

Browse Source 
* feat(loki-variable-editor): replace input with select with datasource labels

* feat(loki-variable-editor): update test

* feat(loki-variable-editor): allow the editor to receive an existing query instance and edit it

* feat(loki-variable-editor): allow custom values in the label select

* feat(loki-variable-editor): mark stream field as optional

* feat(loki-variable-editor): add placeholder to stream selector and extend tooltip info
This commit is contained in:
Matias Chomicki
2022-09-09 14:59:07 +02:00
committed by GitHub
parent 7104d90b39
commit 4bed59efb3
2 changed files with 135 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
public/app/plugins/datasource/loki/components/VariableQueryEditor.test.tsx
View File

@ -10,43 +10,57 @@ import { LokiVariableQueryType } from '../types';
import { LokiVariableQueryEditor, Props } from './VariableQueryEditor';
const props: Props = {
datasource: createLokiDatasource({} as unknown as TemplateSrv),
query: {
refId: 'test',
type: LokiVariableQueryType.LabelNames,
},
onRunQuery: () => {},
onChange: () => {},
};
const refId = 'LokiVariableQueryEditor-VariableQuery';
describe('LokiVariableQueryEditor', () => {
test('Allows to create a Label names variable', async () => {
const onChange = jest.fn();
let props: Props;
render(<LokiVariableQueryEditor {...props} onChange={onChange} />);
beforeEach(() => {
props = {
datasource: createLokiDatasource({} as unknown as TemplateSrv),
query: {
refId: 'test',
type: LokiVariableQueryType.LabelNames,
},
onRunQuery: () => {},
onChange: () => {},
};
expect(onChange).not.toHaveBeenCalled();
await selectOptionInTest(screen.getByLabelText('Query type'), 'Label names');
expect(onChange).toHaveBeenCalledWith({
type: LokiVariableQueryType.LabelNames,
label: '',
stream: '',
refId: 'LokiVariableQueryEditor-VariableQuery',
});
jest.spyOn(props.datasource, 'labelNamesQuery').mockResolvedValue([]);
});
test('Allows to create a Label values variable', async () => {
test('Allows to create a Label names variable', async () => {
const onChange = jest.fn();
render(<LokiVariableQueryEditor {...props} onChange={onChange} />);
expect(onChange).not.toHaveBeenCalled();
await selectOptionInTest(screen.getByLabelText('Query type'), 'Label values');
await userEvent.type(screen.getByLabelText('Label'), 'label');
expect(onChange).toHaveBeenCalledWith({
type: LokiVariableQueryType.LabelValues,
label: '',
stream: '',
refId,
});
});
test('Allows to create a Label values variable', async () => {
const onChange = jest.fn();
jest.spyOn(props.datasource, 'labelNamesQuery').mockResolvedValue([
{
text: 'moon',
},
{
text: 'luna',
},
]);
render(<LokiVariableQueryEditor {...props} onChange={onChange} />);
expect(onChange).not.toHaveBeenCalled();
await selectOptionInTest(screen.getByLabelText('Query type'), 'Label values');
await selectOptionInTest(screen.getByLabelText('Label'), 'luna');
await userEvent.type(screen.getByLabelText('Stream selector'), 'stream');
await waitFor(() => expect(screen.getByDisplayValue('stream')).toBeInTheDocument());
@ -55,20 +69,68 @@ describe('LokiVariableQueryEditor', () => {
expect(onChange).toHaveBeenCalledWith({
type: LokiVariableQueryType.LabelValues,
label: 'label',
label: 'luna',
stream: 'stream',
refId: 'LokiVariableQueryEditor-VariableQuery',
refId,
});
});
test('Allows to create a Label values variable with custom label', async () => {
const onChange = jest.fn();
jest.spyOn(props.datasource, 'labelNamesQuery').mockResolvedValue([
{
text: 'moon',
},
{
text: 'luna',
},
]);
render(<LokiVariableQueryEditor {...props} onChange={onChange} />);
expect(onChange).not.toHaveBeenCalled();
await selectOptionInTest(screen.getByLabelText('Query type'), 'Label values');
await userEvent.type(screen.getByLabelText('Label'), 'sol{enter}');
await userEvent.type(screen.getByLabelText('Stream selector'), 'stream');
await waitFor(() => expect(screen.getByDisplayValue('stream')).toBeInTheDocument());
await userEvent.click(document.body);
expect(onChange).toHaveBeenCalledWith({
type: LokiVariableQueryType.LabelValues,
label: 'sol',
stream: 'stream',
refId,
});
});
test('Migrates legacy string queries to LokiVariableQuery instances', async () => {
const query = 'label_values(log stream selector, label)';
const query = 'label_values(log stream selector, label_selector)';
// @ts-expect-error
render(<LokiVariableQueryEditor {...props} onChange={() => {}} query={query} />);
await waitFor(() => expect(screen.getByText('Label values')).toBeInTheDocument());
await waitFor(() => expect(screen.getByDisplayValue('label')).toBeInTheDocument());
await waitFor(() => expect(screen.getByText('label_selector')).toBeInTheDocument());
await waitFor(() => expect(screen.getByDisplayValue('log stream selector')).toBeInTheDocument());
});
test('Receives a query instance and assigns its values when editing', async () => {
render(
<LokiVariableQueryEditor
{...props}
onChange={() => {}}
query={{
type: LokiVariableQueryType.LabelValues,
label: 'label_selector',
stream: 'log stream selector',
refId,
}}
/>
);
await waitFor(() => expect(screen.getByText('Label values')).toBeInTheDocument());
await waitFor(() => expect(screen.getByText('label_selector')).toBeInTheDocument());
await waitFor(() => expect(screen.getByDisplayValue('log stream selector')).toBeInTheDocument());
});
});