mirror of https://github.com/grafana/grafana
Tempo: Add filtering for service graph query (#41162)
* Add filter based on AdHocFilter element * Add tests * Cancel layout in case we have have new data or we unmount node graph * Fix typing * Fix testpull/41605/head
Andrej Ocenas
4 years ago
committed by
GitHub
parent
f6ad3e420a
commit
5cc9ff8b28
@ -0,0 +1,109 @@ |
||||
import React from 'react'; |
||||
import { render, screen } from '@testing-library/react'; |
||||
import userEvent from '@testing-library/user-event'; |
||||
import selectEvent from 'react-select-event'; |
||||
import { AdHocFilter } from './AdHocFilter'; |
||||
import { AdHocVariableFilter } from '../../types'; |
||||
import { setDataSourceSrv } from '../../../../../../packages/grafana-runtime'; |
||||
|
||||
describe('AdHocFilter', () => { |
||||
it('renders filters', async () => { |
||||
setup(); |
||||
expect(screen.getByText('key1')).toBeInTheDocument(); |
||||
expect(screen.getByText('val1')).toBeInTheDocument(); |
||||
expect(screen.getByText('key2')).toBeInTheDocument(); |
||||
expect(screen.getByText('val2')).toBeInTheDocument(); |
||||
expect(screen.getByLabelText('Add Filter')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('adds filter', async () => { |
||||
const { addFilter } = setup(); |
||||
|
||||
// Select key
|
||||
userEvent.click(screen.getByLabelText('Add Filter')); |
||||
const selectEl = screen.getByTestId('AdHocFilterKey-add-key-wrapper'); |
||||
expect(selectEl).toBeInTheDocument(); |
||||
await selectEvent.select(selectEl, 'key3', { container: document.body }); |
||||
|
||||
// Select value
|
||||
userEvent.click(screen.getByText('select value')); |
||||
screen.debug(screen.getAllByTestId('AdHocFilterValue-value-wrapper')); |
||||
// There are already some filters rendered
|
||||
const selectEl2 = screen.getAllByTestId('AdHocFilterValue-value-wrapper')[2]; |
||||
await selectEvent.select(selectEl2, 'val3', { container: document.body }); |
||||
|
||||
// Only after value is selected the addFilter is called
|
||||
expect(addFilter).toBeCalled(); |
||||
}); |
||||
|
||||
it('removes filter', async () => { |
||||
const { removeFilter } = setup(); |
||||
|
||||
// Select key
|
||||
userEvent.click(screen.getByText('key1')); |
||||
const selectEl = screen.getAllByTestId('AdHocFilterKey-key-wrapper')[0]; |
||||
expect(selectEl).toBeInTheDocument(); |
||||
await selectEvent.select(selectEl, '-- remove filter --', { container: document.body }); |
||||
|
||||
// Only after value is selected the addFilter is called
|
||||
expect(removeFilter).toBeCalled(); |
||||
}); |
||||
|
||||
it('changes filter', async () => { |
||||
const { changeFilter } = setup(); |
||||
|
||||
// Select key
|
||||
userEvent.click(screen.getByText('val1')); |
||||
const selectEl = screen.getAllByTestId('AdHocFilterValue-value-wrapper')[0]; |
||||
expect(selectEl).toBeInTheDocument(); |
||||
await selectEvent.select(selectEl, 'val4', { container: document.body }); |
||||
|
||||
// Only after value is selected the addFilter is called
|
||||
expect(changeFilter).toBeCalled(); |
||||
}); |
||||
}); |
||||
|
||||
function setup() { |
||||
setDataSourceSrv({ |
||||
get() { |
||||
return { |
||||
getTagKeys() { |
||||
return [{ text: 'key3' }]; |
||||
}, |
||||
getTagValues() { |
||||
return [{ text: 'val3' }, { text: 'val4' }]; |
||||
}, |
||||
}; |
||||
}, |
||||
} as any); |
||||
|
||||
const filters: AdHocVariableFilter[] = [ |
||||
{ |
||||
key: 'key1', |
||||
operator: '=', |
||||
value: 'val1', |
||||
condition: '', |
||||
}, |
||||
{ |
||||
key: 'key2', |
||||
operator: '=', |
||||
value: 'val2', |
||||
condition: '', |
||||
}, |
||||
]; |
||||
const addFilter = jest.fn(); |
||||
const removeFilter = jest.fn(); |
||||
const changeFilter = jest.fn(); |
||||
|
||||
render( |
||||
<AdHocFilter |
||||
datasource={{ uid: 'test' }} |
||||
filters={filters} |
||||
addFilter={addFilter} |
||||
removeFilter={removeFilter} |
||||
changeFilter={changeFilter} |
||||
/> |
||||
); |
||||
|
||||
return { addFilter, removeFilter, changeFilter }; |
||||
} |
||||
@ -0,0 +1,82 @@ |
||||
import React, { PureComponent, ReactNode } from 'react'; |
||||
import { AdHocVariableFilter } from 'app/features/variables/types'; |
||||
import { DataSourceRef, SelectableValue } from '@grafana/data'; |
||||
import { AdHocFilterBuilder } from './AdHocFilterBuilder'; |
||||
import { ConditionSegment } from './ConditionSegment'; |
||||
import { REMOVE_FILTER_KEY } from './AdHocFilterKey'; |
||||
import { AdHocFilterRenderer } from './AdHocFilterRenderer'; |
||||
|
||||
interface Props { |
||||
datasource: DataSourceRef | null; |
||||
filters: AdHocVariableFilter[]; |
||||
addFilter: (filter: AdHocVariableFilter) => void; |
||||
removeFilter: (index: number) => void; |
||||
changeFilter: (index: number, newFilter: AdHocVariableFilter) => void; |
||||
} |
||||
|
||||
/** |
||||
* Simple filtering component that automatically uses datasource APIs to get available labels and it's values, for |
||||
* dynamic visual filtering without need for much setup. Instead of having single onChange prop this reports all the |
||||
* change events with separate props so it is usable with AdHocPicker. |
||||
* |
||||
* Note: There isn't API on datasource to suggest the operators here so that is hardcoded to use prometheus style |
||||
* operators. Also filters are assumed to be joined with `AND` operator, which is also hardcoded. |
||||
*/ |
||||
export class AdHocFilter extends PureComponent<Props> { |
||||
onChange = (index: number, prop: string) => (key: SelectableValue<string | null>) => { |
||||
const { filters } = this.props; |
||||
const { value } = key; |
||||
|
||||
if (key.value === REMOVE_FILTER_KEY) { |
||||
return this.props.removeFilter(index); |
||||
} |
||||
|
||||
return this.props.changeFilter(index, { |
||||
...filters[index], |
||||
[prop]: value, |
||||
}); |
||||
}; |
||||
|
||||
appendFilterToVariable = (filter: AdHocVariableFilter) => { |
||||
this.props.addFilter(filter); |
||||
}; |
||||
|
||||
render() { |
||||
const { filters } = this.props; |
||||
|
||||
return ( |
||||
<div className="gf-form-inline"> |
||||
{this.renderFilters(filters)} |
||||
<AdHocFilterBuilder |
||||
datasource={this.props.datasource!} |
||||
appendBefore={filters.length > 0 ? <ConditionSegment label="AND" /> : null} |
||||
onCompleted={this.appendFilterToVariable} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
renderFilters(filters: AdHocVariableFilter[]) { |
||||
return filters.reduce((segments: ReactNode[], filter, index) => { |
||||
if (segments.length > 0) { |
||||
segments.push(<ConditionSegment label="AND" key={`condition-${index}`} />); |
||||
} |
||||
segments.push(this.renderFilterSegments(filter, index)); |
||||
return segments; |
||||
}, []); |
||||
} |
||||
|
||||
renderFilterSegments(filter: AdHocVariableFilter, index: number) { |
||||
return ( |
||||
<React.Fragment key={`filter-${index}`}> |
||||
<AdHocFilterRenderer |
||||
datasource={this.props.datasource!} |
||||
filter={filter} |
||||
onKeyChange={this.onChange(index, 'key')} |
||||
onOperatorChange={this.onChange(index, 'operator')} |
||||
onValueChange={this.onChange(index, 'value')} |
||||
/> |
||||
</React.Fragment> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,87 @@ |
||||
import React from 'react'; |
||||
import useAsync from 'react-use/lib/useAsync'; |
||||
import { getDS } from './utils'; |
||||
import { InlineField, InlineFieldRow } from '@grafana/ui'; |
||||
import { AdHocVariableFilter } from '../../../../features/variables/types'; |
||||
import { TempoQuery } from '../datasource'; |
||||
import { AdHocFilter } from '../../../../features/variables/adhoc/picker/AdHocFilter'; |
||||
import { PrometheusDatasource } from '../../prometheus/datasource'; |
||||
|
||||
export function ServiceGraphSection({ |
||||
graphDatasourceUid, |
||||
query, |
||||
onChange, |
||||
}: { |
||||
graphDatasourceUid?: string; |
||||
query: TempoQuery; |
||||
onChange: (value: TempoQuery) => void; |
||||
}) { |
||||
const dsState = useAsync(() => getDS(graphDatasourceUid), [graphDatasourceUid]); |
||||
if (dsState.loading) { |
||||
return null; |
||||
} |
||||
|
||||
const ds = dsState.value as PrometheusDatasource; |
||||
|
||||
if (!graphDatasourceUid) { |
||||
return <div className="text-warning">Please set up a service graph datasource in the datasource settings.</div>; |
||||
} |
||||
|
||||
if (graphDatasourceUid && !ds) { |
||||
return ( |
||||
<div className="text-warning"> |
||||
Service graph datasource is configured but the data source no longer exists. Please configure existing data |
||||
source to use the service graph functionality. |
||||
</div> |
||||
); |
||||
} |
||||
const filters = queryToFilter(query.serviceMapQuery || ''); |
||||
|
||||
return ( |
||||
<div> |
||||
<InlineFieldRow> |
||||
<InlineField label="Filter" labelWidth={14} grow> |
||||
<AdHocFilter |
||||
datasource={{ uid: graphDatasourceUid }} |
||||
filters={filters} |
||||
addFilter={(filter: AdHocVariableFilter) => { |
||||
onChange({ |
||||
...query, |
||||
serviceMapQuery: filtersToQuery([...filters, filter]), |
||||
}); |
||||
}} |
||||
removeFilter={(index: number) => { |
||||
const newFilters = [...filters]; |
||||
newFilters.splice(index, 1); |
||||
onChange({ ...query, serviceMapQuery: filtersToQuery(newFilters) }); |
||||
}} |
||||
changeFilter={(index: number, filter: AdHocVariableFilter) => { |
||||
const newFilters = [...filters]; |
||||
newFilters.splice(index, 1, filter); |
||||
onChange({ ...query, serviceMapQuery: filtersToQuery(newFilters) }); |
||||
}} |
||||
/> |
||||
</InlineField> |
||||
</InlineFieldRow> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
function queryToFilter(query: string): AdHocVariableFilter[] { |
||||
let match; |
||||
let filters: AdHocVariableFilter[] = []; |
||||
const re = /([\w_]+)(=|!=|<|>|=~|!~)"(.*?)"/g; |
||||
while ((match = re.exec(query)) !== null) { |
||||
filters.push({ |
||||
key: match[1], |
||||
operator: match[2], |
||||
value: match[3], |
||||
condition: '', |
||||
}); |
||||
} |
||||
return filters; |
||||
} |
||||
|
||||
function filtersToQuery(filters: AdHocVariableFilter[]): string { |
||||
return `{${filters.map((f) => `${f.key}${f.operator}"${f.value}"`).join(',')}}`; |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
import { DataSourceApi } from '@grafana/data'; |
||||
import { getDataSourceSrv } from '@grafana/runtime'; |
||||
|
||||
export async function getDS(uid?: string): Promise<DataSourceApi | undefined> { |
||||
if (!uid) { |
||||
return undefined; |
||||
} |
||||
|
||||
const dsSrv = getDataSourceSrv(); |
||||
try { |
||||
return await dsSrv.get(uid); |
||||
} catch (error) { |
||||
console.error('Failed to load data source', error); |
||||
return undefined; |
||||
} |
||||
} |
||||
@ -0,0 +1,88 @@ |
||||
import { renderHook } from '@testing-library/react-hooks'; |
||||
import { useLayout } from './layout'; |
||||
import { EdgeDatum, NodeDatum } from './types'; |
||||
|
||||
let onmessage: jest.MockedFunction<any>; |
||||
let postMessage: jest.MockedFunction<any>; |
||||
let terminate: jest.MockedFunction<any>; |
||||
|
||||
jest.mock('./createLayoutWorker', () => { |
||||
return { |
||||
__esModule: true, |
||||
createWorker: () => { |
||||
onmessage = jest.fn(); |
||||
postMessage = jest.fn(); |
||||
terminate = jest.fn(); |
||||
return { |
||||
onmessage: onmessage, |
||||
postMessage: postMessage, |
||||
terminate: terminate, |
||||
}; |
||||
}, |
||||
}; |
||||
}); |
||||
|
||||
describe('layout', () => { |
||||
it('doesnt fail without any data', async () => { |
||||
const nodes: NodeDatum[] = []; |
||||
const edges: EdgeDatum[] = []; |
||||
|
||||
const { result } = renderHook(() => { |
||||
return useLayout(nodes, edges, undefined, 100, 1000); |
||||
}); |
||||
expect(result.current.nodes).toEqual([]); |
||||
expect(result.current.edges).toEqual([]); |
||||
expect(postMessage).toBeUndefined(); |
||||
}); |
||||
|
||||
it('cancels worker', async () => { |
||||
const { result, rerender } = renderHook( |
||||
({ nodes, edges }) => { |
||||
return useLayout(nodes, edges, undefined, 100, 1000); |
||||
}, |
||||
{ |
||||
initialProps: { |
||||
nodes: [makeNode(0, 0), makeNode(1, 1)], |
||||
edges: [makeEdge(0, 1)], |
||||
}, |
||||
} |
||||
); |
||||
expect(postMessage).toBeCalledTimes(1); |
||||
// Bit convoluted but we cannot easily access the worker instance as we only export constructor so the default
|
||||
// export is class and we only store latest instance of the methods as jest.fn here as module local variables.
|
||||
// So we capture the terminate function from current worker so that when we call rerender and new worker is created
|
||||
// we can still access and check the method from the old one that we assume should be canceled.
|
||||
const localTerminate = terminate; |
||||
|
||||
rerender({ |
||||
nodes: [], |
||||
edges: [], |
||||
}); |
||||
|
||||
expect(result.current.nodes).toEqual([]); |
||||
expect(result.current.edges).toEqual([]); |
||||
expect(localTerminate).toBeCalledTimes(1); |
||||
}); |
||||
}); |
||||
|
||||
function makeNode(index: number, incoming: number): NodeDatum { |
||||
return { |
||||
id: `n${index}`, |
||||
title: `n${index}`, |
||||
subTitle: '', |
||||
dataFrameRowIndex: 0, |
||||
incoming, |
||||
arcSections: [], |
||||
}; |
||||
} |
||||
|
||||
function makeEdge(source: number, target: number): EdgeDatum { |
||||
return { |
||||
id: `${source}-${target}`, |
||||
source: 'n' + source, |
||||
target: 'n' + target, |
||||
mainStat: '', |
||||
secondaryStat: '', |
||||
dataFrameRowIndex: 0, |
||||
}; |
||||
} |
||||
Loading…
Reference in new issue