mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
* Refactor Explore query field - extract typeahead field that only contains logic for the typeahead mechanics - renamed QueryField to PromQueryField, a wrapper around TypeaheadField that deals with Prometheus-specific concepts - PromQueryField creates a promql typeahead by providing the handlers for producing suggestions, and for applying suggestions - The `refresher` promise is needed to trigger a render once an async action in the wrapper returns. This is prep work for a composable query field to be used by Explore, as well as editors in datasource plugins. * Added typeahead handling tests - extracted context-to-suggestion logic to make it testable - kept DOM-dependent parts in main onTypeahead funtion * simplified error handling in explore query field * Refactor query suggestions - use monaco's suggestion types (roughly), see https://github.com/Microsoft/monaco-editor/blob/f6fb545/monaco.d.ts#L4208 - suggest functions and metrics in empty field (ctrl+space) - copy and expand prometheus function docs from prometheus datasource (will be migrated back to the datasource in the future) * Added prop and state types, removed unused cwrp * Split up suggestion processing for code readability
126 lines
5.0 KiB
TypeScript
126 lines
5.0 KiB
TypeScript
import React from 'react';
|
|
import Enzyme, { shallow } from 'enzyme';
|
|
import Adapter from 'enzyme-adapter-react-16';
|
|
|
|
Enzyme.configure({ adapter: new Adapter() });
|
|
|
|
import PromQueryField from './PromQueryField';
|
|
|
|
describe('PromQueryField typeahead handling', () => {
|
|
const defaultProps = {
|
|
request: () => ({ data: { data: [] } }),
|
|
};
|
|
|
|
it('returns default suggestions on emtpty context', () => {
|
|
const instance = shallow(<PromQueryField {...defaultProps} />).instance() as PromQueryField;
|
|
const result = instance.getTypeahead({ text: '', prefix: '', wrapperClasses: [] });
|
|
expect(result.context).toBeUndefined();
|
|
expect(result.refresher).toBeUndefined();
|
|
expect(result.suggestions.length).toEqual(2);
|
|
});
|
|
|
|
describe('range suggestions', () => {
|
|
it('returns range suggestions in range context', () => {
|
|
const instance = shallow(<PromQueryField {...defaultProps} />).instance() as PromQueryField;
|
|
const result = instance.getTypeahead({ text: '1', prefix: '1', wrapperClasses: ['context-range'] });
|
|
expect(result.context).toBe('context-range');
|
|
expect(result.refresher).toBeUndefined();
|
|
expect(result.suggestions).toEqual([
|
|
{
|
|
items: [{ label: '1m' }, { label: '5m' }, { label: '10m' }, { label: '30m' }, { label: '1h' }],
|
|
label: 'Range vector',
|
|
},
|
|
]);
|
|
});
|
|
});
|
|
|
|
describe('metric suggestions', () => {
|
|
it('returns metrics suggestions by default', () => {
|
|
const instance = shallow(
|
|
<PromQueryField {...defaultProps} metrics={['foo', 'bar']} />
|
|
).instance() as PromQueryField;
|
|
const result = instance.getTypeahead({ text: 'a', prefix: 'a', wrapperClasses: [] });
|
|
expect(result.context).toBeUndefined();
|
|
expect(result.refresher).toBeUndefined();
|
|
expect(result.suggestions.length).toEqual(2);
|
|
});
|
|
|
|
it('returns default suggestions after a binary operator', () => {
|
|
const instance = shallow(
|
|
<PromQueryField {...defaultProps} metrics={['foo', 'bar']} />
|
|
).instance() as PromQueryField;
|
|
const result = instance.getTypeahead({ text: '*', prefix: '', wrapperClasses: [] });
|
|
expect(result.context).toBeUndefined();
|
|
expect(result.refresher).toBeUndefined();
|
|
expect(result.suggestions.length).toEqual(2);
|
|
});
|
|
});
|
|
|
|
describe('label suggestions', () => {
|
|
it('returns default label suggestions on label context and no metric', () => {
|
|
const instance = shallow(<PromQueryField {...defaultProps} />).instance() as PromQueryField;
|
|
const result = instance.getTypeahead({ text: 'j', prefix: 'j', wrapperClasses: ['context-labels'] });
|
|
expect(result.context).toBe('context-labels');
|
|
expect(result.suggestions).toEqual([{ items: [{ label: 'job' }, { label: 'instance' }], label: 'Labels' }]);
|
|
});
|
|
|
|
it('returns label suggestions on label context and metric', () => {
|
|
const instance = shallow(
|
|
<PromQueryField {...defaultProps} labelKeys={{ foo: ['bar'] }} />
|
|
).instance() as PromQueryField;
|
|
const result = instance.getTypeahead({
|
|
text: 'job',
|
|
prefix: 'job',
|
|
wrapperClasses: ['context-labels'],
|
|
metric: 'foo',
|
|
});
|
|
expect(result.context).toBe('context-labels');
|
|
expect(result.suggestions).toEqual([{ items: [{ label: 'bar' }], label: 'Labels' }]);
|
|
});
|
|
|
|
it('returns a refresher on label context and unavailable metric', () => {
|
|
const instance = shallow(
|
|
<PromQueryField {...defaultProps} labelKeys={{ foo: ['bar'] }} />
|
|
).instance() as PromQueryField;
|
|
const result = instance.getTypeahead({
|
|
text: 'job',
|
|
prefix: 'job',
|
|
wrapperClasses: ['context-labels'],
|
|
metric: 'xxx',
|
|
});
|
|
expect(result.context).toBeUndefined();
|
|
expect(result.refresher).toBeInstanceOf(Promise);
|
|
expect(result.suggestions).toEqual([]);
|
|
});
|
|
|
|
it('returns label values on label context when given a metric and a label key', () => {
|
|
const instance = shallow(
|
|
<PromQueryField {...defaultProps} labelKeys={{ foo: ['bar'] }} labelValues={{ foo: { bar: ['baz'] } }} />
|
|
).instance() as PromQueryField;
|
|
const result = instance.getTypeahead({
|
|
text: '=ba',
|
|
prefix: 'ba',
|
|
wrapperClasses: ['context-labels'],
|
|
metric: 'foo',
|
|
labelKey: 'bar',
|
|
});
|
|
expect(result.context).toBe('context-label-values');
|
|
expect(result.suggestions).toEqual([{ items: [{ label: 'baz' }], label: 'Label values' }]);
|
|
});
|
|
|
|
it('returns label suggestions on aggregation context and metric', () => {
|
|
const instance = shallow(
|
|
<PromQueryField {...defaultProps} labelKeys={{ foo: ['bar'] }} />
|
|
).instance() as PromQueryField;
|
|
const result = instance.getTypeahead({
|
|
text: 'job',
|
|
prefix: 'job',
|
|
wrapperClasses: ['context-aggregation'],
|
|
metric: 'foo',
|
|
});
|
|
expect(result.context).toBe('context-aggregation');
|
|
expect(result.suggestions).toEqual([{ items: [{ label: 'bar' }], label: 'Labels' }]);
|
|
});
|
|
});
|
|
});
|