diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/lib/__snapshots__/filter_label.test.js.snap b/src/plugins/data/public/ui/filter_bar/filter_editor/lib/__snapshots__/filter_label.test.js.snap
deleted file mode 100644
index b0bcec12ca3b7..0000000000000
--- a/src/plugins/data/public/ui/filter_bar/filter_editor/lib/__snapshots__/filter_label.test.js.snap
+++ /dev/null
@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`alias 1`] = `
-
- geo.coordinates in US
-
-`;
-
-exports[`negated alias 1`] = `
-
-
- NOT
-
- geo.coordinates in US
-
-`;
diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.test.js b/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.test.js
deleted file mode 100644
index 55df544ad010b..0000000000000
--- a/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.test.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React from 'react';
-import { FilterLabel } from './filter_label';
-import { shallow } from 'enzyme';
-import { phraseFilter } from '../../../../stubs';
-
-test('alias', () => {
- const filter = {
- ...phraseFilter,
- meta: {
- ...phraseFilter.meta,
- alias: 'geo.coordinates in US',
- },
- };
- const component = shallow();
- expect(component).toMatchSnapshot();
-});
-
-test('negated alias', () => {
- const filter = {
- ...phraseFilter,
- meta: {
- ...phraseFilter.meta,
- alias: 'geo.coordinates in US',
- negate: true,
- },
- };
- const component = shallow();
- expect(component).toMatchSnapshot();
-});
diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.test.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.test.tsx
new file mode 100644
index 0000000000000..59afc1606adf9
--- /dev/null
+++ b/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.test.tsx
@@ -0,0 +1,156 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { FilterLabel } from './filter_label';
+import { render, cleanup } from '@testing-library/react/pure';
+import { phraseFilter } from '../../../../stubs';
+
+afterEach(cleanup);
+
+test('alias', () => {
+ const filter = {
+ ...phraseFilter,
+ meta: {
+ ...phraseFilter.meta,
+ alias: 'geo.coordinates in US',
+ },
+ };
+ const { container } = render();
+ expect(container).toMatchInlineSnapshot(`
+
+
+ geo.coordinates in US
+
+ `);
+});
+
+test('negated alias', () => {
+ const filter = {
+ ...phraseFilter,
+ meta: {
+ ...phraseFilter.meta,
+ alias: 'geo.coordinates in US',
+ negate: true,
+ },
+ };
+ const { container } = render();
+ expect(container).toMatchInlineSnapshot(`
+
+
+ NOT
+
+ geo.coordinates in US
+
+ `);
+});
+
+test('alias with warning status', () => {
+ const filter = {
+ ...phraseFilter,
+ meta: {
+ ...phraseFilter.meta,
+ alias: 'geo.coordinates in US',
+ negate: true,
+ },
+ };
+ const { container } = render(
+
+ );
+ expect(container).toMatchInlineSnapshot(`
+
+
+ NOT
+
+ geo.coordinates in US
+ :
+
+ Warning
+
+
+ `);
+});
+
+test('alias with error status', () => {
+ const filter = {
+ ...phraseFilter,
+ meta: {
+ ...phraseFilter.meta,
+ alias: 'geo.coordinates in US',
+ negate: true,
+ },
+ };
+ const { container } = render(
+
+ );
+ expect(container).toMatchInlineSnapshot(`
+
+
+ NOT
+
+ geo.coordinates in US
+ :
+
+ Error
+
+
+ `);
+});
+
+test('warning', () => {
+ const { container } = render();
+ expect(container).toMatchInlineSnapshot(`
+
+
+ machine.os
+ :
+
+ Warning
+
+
+ `);
+});
+
+test('error', () => {
+ const { container } = render();
+ expect(container).toMatchInlineSnapshot(`
+
+
+ machine.os
+ :
+
+ Error
+
+
+ `);
+});
diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.tsx
index 070631354d8b8..3b85d0753b8c5 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_editor/lib/filter_label.tsx
@@ -22,13 +22,15 @@ import { EuiTextColor } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { existsOperator, isOneOfOperator } from './filter_operators';
import { Filter, FILTERS } from '../../../../../common';
+import type { FilterLabelStatus } from '../../filter_item';
interface Props {
filter: Filter;
valueLabel?: string;
+ filterLabelStatus?: FilterLabelStatus;
}
-export function FilterLabel({ filter, valueLabel }: Props) {
+export function FilterLabel({ filter, valueLabel, filterLabelStatus }: Props) {
const prefixText = filter.meta.negate
? ` ${i18n.translate('data.filter.filterBar.negatedFilterPrefix', {
defaultMessage: 'NOT ',
@@ -50,6 +52,7 @@ export function FilterLabel({ filter, valueLabel }: Props) {
{prefix}
{filter.meta.alias}
+ {filterLabelStatus && <>: {getValue(valueLabel)}>}
);
}
diff --git a/src/plugins/data/public/ui/filter_bar/filter_item.tsx b/src/plugins/data/public/ui/filter_bar/filter_item.tsx
index 078fc8c9e1a8f..cbff20115f8ea 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_item.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_item.tsx
@@ -49,7 +49,7 @@ interface Props {
interface LabelOptions {
title: string;
- status: string;
+ status: FilterLabelStatus;
message?: string;
}
@@ -57,6 +57,11 @@ const FILTER_ITEM_OK = '';
const FILTER_ITEM_WARNING = 'warn';
const FILTER_ITEM_ERROR = 'error';
+export type FilterLabelStatus =
+ | typeof FILTER_ITEM_OK
+ | typeof FILTER_ITEM_WARNING
+ | typeof FILTER_ITEM_ERROR;
+
export function FilterItem(props: Props) {
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const [indexPatternExists, setIndexPatternExists] = useState(undefined);
@@ -260,7 +265,7 @@ export function FilterItem(props: Props) {
}
function getValueLabel(): LabelOptions {
- const label = {
+ const label: LabelOptions = {
title: '',
message: '',
status: FILTER_ITEM_OK,
@@ -326,6 +331,7 @@ export function FilterItem(props: Props) {
props.onRemove()}
diff --git a/src/plugins/data/public/ui/filter_bar/filter_view/index.tsx b/src/plugins/data/public/ui/filter_bar/filter_view/index.tsx
index f9328875cc910..3f9cbce06b315 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_view/index.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_view/index.tsx
@@ -22,10 +22,12 @@ import { i18n } from '@kbn/i18n';
import React, { FC } from 'react';
import { FilterLabel } from '../filter_editor/lib/filter_label';
import { Filter, isFilterPinned } from '../../../../common';
+import type { FilterLabelStatus } from '../filter_item';
interface Props {
filter: Filter;
valueLabel: string;
+ filterLabelStatus: FilterLabelStatus;
errorMessage?: string;
[propName: string]: any;
}
@@ -36,6 +38,7 @@ export const FilterView: FC = ({
onClick,
valueLabel,
errorMessage,
+ filterLabelStatus,
...rest
}: Props) => {
const [ref, innerText] = useInnerText();
@@ -65,7 +68,7 @@ export const FilterView: FC = ({
iconType="cross"
iconSide="right"
closeButtonProps={{
- // Removing tab focus on close button because the same option can be optained through the context menu
+ // Removing tab focus on close button because the same option can be obtained through the context menu
// Also, we may want to add a `DEL` keyboard press functionality
tabIndex: -1,
}}
@@ -80,7 +83,11 @@ export const FilterView: FC = ({
{...rest}
>
-
+
);