[Lens] Fix empty values filtering (#67594)

This commit is contained in:
Marta Bondyra 2020-05-29 09:38:07 +02:00 committed by GitHub
parent 9c28661449
commit 84ed5096f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 156 additions and 4 deletions

View file

@ -22,7 +22,7 @@ import {
} from '../../../../../src/plugins/expressions/public';
import { VisualizationContainer } from '../visualization_container';
import { EmptyPlaceholder } from '../shared_components';
import { desanitizeFilterContext } from '../utils';
export interface DatatableColumns {
columnIds: string[];
}
@ -180,7 +180,7 @@ export function DatatableComponent(props: DatatableRenderProps) {
],
timeFieldName,
};
props.onClickValue(data);
props.onClickValue(desanitizeFilterContext(data));
},
[firstTable]
);

View file

@ -31,6 +31,7 @@ import { ColumnGroups, PieExpressionProps } from './types';
import { getSliceValueWithFallback, getFilterContext } from './render_helpers';
import { EmptyPlaceholder } from '../shared_components';
import './visualization.scss';
import { desanitizeFilterContext } from '../utils';
const EMPTY_SLICE = Symbol('empty_slice');
@ -242,7 +243,7 @@ export function PieComponent(
firstTable
);
onClickValue(context);
onClickValue(desanitizeFilterContext(context));
}}
/>
<Partition

View file

@ -0,0 +1,111 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { LensFilterEvent } from './types';
import { desanitizeFilterContext } from './utils';
describe('desanitizeFilterContext', () => {
it(`When filtered value equals '(empty)' replaces it with '' in table and in value.`, () => {
const table = {
rows: [
{
'f903668f-1175-4705-a5bd-713259d10326': 1589414640000,
'5d5446b2-72e8-4f86-91e0-88380f0fa14c': '(empty)',
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 1,
},
{
'f903668f-1175-4705-a5bd-713259d10326': 1589414670000,
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 0,
},
{
'f903668f-1175-4705-a5bd-713259d10326': 1589414880000,
'5d5446b2-72e8-4f86-91e0-88380f0fa14c': '123123123',
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 1,
},
{
'f903668f-1175-4705-a5bd-713259d10326': 1589414910000,
'5d5446b2-72e8-4f86-91e0-88380f0fa14c': '(empty)',
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 1,
},
],
columns: [
{
id: 'f903668f-1175-4705-a5bd-713259d10326',
name: 'order_date per 30 seconds',
},
{
id: '5d5446b2-72e8-4f86-91e0-88380f0fa14c',
name: 'Top values of customer_phone',
},
{
id: '9f0b6f88-c399-43a0-a993-0ad943c9af25',
name: 'Count of records',
},
],
};
const contextWithEmptyValue: LensFilterEvent['data'] = {
data: [
{
row: 3,
column: 0,
value: 1589414910000,
table,
},
{
row: 0,
column: 1,
value: '(empty)',
table,
},
],
timeFieldName: 'order_date',
};
const desanitizedFilterContext = desanitizeFilterContext(contextWithEmptyValue);
expect(desanitizedFilterContext).toEqual({
data: [
{
row: 3,
column: 0,
value: 1589414910000,
table,
},
{
value: '',
row: 0,
column: 1,
table: {
rows: [
{
'f903668f-1175-4705-a5bd-713259d10326': 1589414640000,
'5d5446b2-72e8-4f86-91e0-88380f0fa14c': '',
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 1,
},
{
'f903668f-1175-4705-a5bd-713259d10326': 1589414670000,
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 0,
},
{
'f903668f-1175-4705-a5bd-713259d10326': 1589414880000,
'5d5446b2-72e8-4f86-91e0-88380f0fa14c': '123123123',
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 1,
},
{
'f903668f-1175-4705-a5bd-713259d10326': 1589414910000,
'5d5446b2-72e8-4f86-91e0-88380f0fa14c': '(empty)',
'col-1-9f0b6f88-c399-43a0-a993-0ad943c9af25': 1,
},
],
columns: table.columns,
},
},
],
timeFieldName: 'order_date',
});
});
});

View file

@ -0,0 +1,39 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { i18n } from '@kbn/i18n';
import { LensFilterEvent } from './types';
/** replaces the value `(empty) to empty string for proper filtering` */
export const desanitizeFilterContext = (
context: LensFilterEvent['data']
): LensFilterEvent['data'] => {
const emptyTextValue = i18n.translate('xpack.lens.indexpattern.emptyTextColumnValue', {
defaultMessage: '(empty)',
});
return {
...context,
data: context.data.map((point) =>
point.value === emptyTextValue
? {
...point,
value: '',
table: {
...point.table,
rows: point.table.rows.map((row, index) =>
index === point.row
? {
...row,
[point.table.columns[point.column].id]: '',
}
: row
),
},
}
: point
),
};
};

View file

@ -39,6 +39,7 @@ import { VisualizationContainer } from '../visualization_container';
import { isHorizontalChart } from './state_helpers';
import { parseInterval } from '../../../../../src/plugins/data/common';
import { EmptyPlaceholder } from '../shared_components';
import { desanitizeFilterContext } from '../utils';
type InferPropType<T> = T extends React.FunctionComponent<infer P> ? P : T;
type SeriesSpec = InferPropType<typeof LineSeries> &
@ -354,7 +355,7 @@ export function XYChart({
})),
timeFieldName,
};
onClickValue(context);
onClickValue(desanitizeFilterContext(context));
}}
/>