[Unified search] Support fields custom label on filter editor (#130533)

* [Unified search] Support fields custom label * Use the custom label in filter badges and popover * Unit tests Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · May 3, 2022 · 82f440b · 82f440b
1 parent 4d99fff
commit 82f440b
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 12 deletions.
diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts
@@ -21,6 +21,7 @@ export * from './deprecated';
 export { getEsQueryConfig, FilterStateStore } from '../common';
 export {
   getDisplayValueFromFilter,
+  getFieldDisplayValueFromFilter,
   generateFilters,
   extractTimeRange,
   getIndexPatternFromFilter,

diff --git a/src/plugins/data/public/query/filter_manager/index.ts b/src/plugins/data/public/query/filter_manager/index.ts
@@ -10,5 +10,5 @@ export { FilterManager } from './filter_manager';
 
 export { mapAndFlattenFilters } from './lib/map_and_flatten_filters';
 export { generateFilters } from './lib/generate_filters';
-export { getDisplayValueFromFilter } from './lib/get_display_value';
+export { getDisplayValueFromFilter, getFieldDisplayValueFromFilter } from './lib/get_display_value';
 export { getIndexPatternFromFilter } from './lib/get_index_pattern_from_filter';
diff --git a/src/plugins/data/public/query/filter_manager/lib/get_display_value.test.ts b/src/plugins/data/public/query/filter_manager/lib/get_display_value.test.ts
@@ -5,9 +5,10 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
+import type { DataView } from '@kbn/data-views-plugin/public';
+import { FilterStateStore, PhraseFilter } from '@kbn/es-query';
 import { stubIndexPattern, phraseFilter } from '../../../../common/stubs';
-import { getDisplayValueFromFilter } from './get_display_value';
+import { getDisplayValueFromFilter, getFieldDisplayValueFromFilter } from './get_display_value';
 import { FieldFormat } from '@kbn/field-formats-plugin/common';
 
 describe('getDisplayValueFromFilter', () => {
@@ -50,3 +51,43 @@ describe('getDisplayValueFromFilter', () => {
     expect(displayValue).toBe('bananaabc');
   });
 });
+
+describe('getFieldDisplayValueFromFilter', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('returns empty string if the index pattern is not found', () => {
+    const wrongIndexPattern = {
+      title: 'wrong index pattern',
+      id: 'wrong index pattern',
+    } as DataView;
+    const fieldLabel = getFieldDisplayValueFromFilter(phraseFilter, [wrongIndexPattern]);
+    expect(fieldLabel).toBe('');
+  });
+
+  it('returns empty string if custom label is not set', () => {
+    const filter: PhraseFilter = {
+      meta: {
+        negate: false,
+        index: 'logstash-*',
+        type: 'phrase',
+        key: 'bytes',
+        value: '1024',
+        disabled: false,
+        alias: null,
+      },
+      $state: {
+        store: FilterStateStore.APP_STATE,
+      },
+      query: {},
+    };
+    const fieldLabel = getFieldDisplayValueFromFilter(filter, [stubIndexPattern]);
+    expect(fieldLabel).toBe('');
+  });
+
+  it('returns the field custom label if it set', () => {
+    const fieldLabel = getFieldDisplayValueFromFilter(phraseFilter, [stubIndexPattern]);
+    expect(fieldLabel).toBe('OS');
+  });
+});
diff --git a/src/plugins/data/public/query/filter_manager/lib/get_display_value.ts b/src/plugins/data/public/query/filter_manager/lib/get_display_value.ts
@@ -28,6 +28,14 @@ function getValueFormatter(indexPattern?: DataView, key?: string) {
   return indexPattern.getFormatterForField(field);
 }
 
+export function getFieldDisplayValueFromFilter(filter: Filter, indexPatterns: DataView[]): string {
+  const { key } = filter.meta;
+  const indexPattern = getIndexPatternFromFilter(filter, indexPatterns);
+  if (!indexPattern) return '';
+  const field = indexPattern.fields.find((f: DataViewField) => f.name === key);
+  return field?.customLabel ?? '';
+}
+
 export function getDisplayValueFromFilter(filter: Filter, indexPatterns: DataView[]): string {
   const { key, value } = filter.meta;
   if (typeof value === 'function') {

diff --git a/src/plugins/data_views/common/field.stub.ts b/src/plugins/data_views/common/field.stub.ts
@@ -15,6 +15,7 @@ export const createIndexPatternFieldStub = ({ spec }: { spec: FieldSpec }): Data
 export const stubFieldSpecMap: Record<string, FieldSpec> = {
   'machine.os': {
     name: 'machine.os',
+    customLabel: 'OS',
     esTypes: ['text'],
     type: 'string',
     aggregatable: false,

diff --git a/src/plugins/unified_search/public/apply_filters/apply_filter_popover_content.tsx b/src/plugins/unified_search/public/apply_filters/apply_filter_popover_content.tsx
@@ -19,7 +19,11 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import React, { Component } from 'react';
-import { getDisplayValueFromFilter, mapAndFlattenFilters } from '@kbn/data-plugin/public';
+import {
+  getDisplayValueFromFilter,
+  mapAndFlattenFilters,
+  getFieldDisplayValueFromFilter,
+} from '@kbn/data-plugin/public';
 import { Filter } from '@kbn/data-plugin/common';
 import { DataView } from '@kbn/data-views-plugin/public';
 import { FilterLabel } from '../filter_bar';
@@ -33,6 +37,7 @@ interface Props {
 
 interface State {
   isFilterSelected: boolean[];
+  fieldLabel?: string;
 }
 
 // Needed for React.lazy
@@ -46,12 +51,15 @@ export default class ApplyFiltersPopoverContent extends Component<Props, State>
     super(props);
     this.state = {
       isFilterSelected: props.filters.map(() => true),
+      fieldLabel: undefined,
     };
   }
-  private getLabel(filter: Filter) {
+
+  private getLabel = (filter: Filter) => {
     const valueLabel = getDisplayValueFromFilter(filter, this.props.indexPatterns);
-    return <FilterLabel filter={filter} valueLabel={valueLabel} />;
-  }
+    const fieldLabel = getFieldDisplayValueFromFilter(filter, this.props.indexPatterns);
+    return <FilterLabel filter={filter} valueLabel={valueLabel} fieldLabel={fieldLabel} />;
+  };
 
   public render() {
     if (this.props.filters.length === 0) {

diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/index.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/index.tsx
@@ -273,7 +273,7 @@ class FilterEditorUI extends Component<Props, State> {
           })}
           options={fields}
           selectedOptions={selectedField ? [selectedField] : []}
-          getLabel={(field) => field.name}
+          getLabel={(field) => field.customLabel || field.name}
           onChange={this.onFieldChange}
           singleSelection={{ asPlainText: true }}
           isClearable={false}

diff --git a/...ified_search/public/filter_bar/filter_editor/lib/__snapshots__/filter_label.test.tsx.snap b/...ified_search/public/filter_bar/filter_editor/lib/__snapshots__/filter_label.test.tsx.snap
diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/lib/filter_label.test.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/lib/filter_label.test.tsx
@@ -23,6 +23,18 @@ test('alias', () => {
   expect(container).toMatchSnapshot();
 });
 
+test('field custom label', () => {
+  const filter = {
+    ...phraseFilter,
+    meta: {
+      ...phraseFilter.meta,
+      alias: 'geo.coordinates in US',
+    },
+  };
+  const { container } = render(<FilterLabel filter={filter} fieldLabel="test label" />);
+  expect(container).toMatchSnapshot();
+});
+
 test('alias with warning status', () => {
   const filter = {
     ...phraseFilter,

diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/lib/filter_label.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/lib/filter_label.tsx
@@ -16,6 +16,7 @@ import type { FilterLabelStatus } from '../../filter_item';
 export interface FilterLabelProps {
   filter: Filter;
   valueLabel?: string;
+  fieldLabel?: string;
   filterLabelStatus?: FilterLabelStatus;
   hideAlias?: boolean;
 }
@@ -25,6 +26,7 @@ export interface FilterLabelProps {
 export default function FilterLabel({
   filter,
   valueLabel,
+  fieldLabel,
   filterLabelStatus,
   hideAlias,
 }: FilterLabelProps) {
@@ -59,14 +61,14 @@ export default function FilterLabel({
       return (
         <Fragment>
           {prefix}
-          {filter.meta.key}: {getValue(`${existsOperator.message}`)}
+          {fieldLabel || filter.meta.key}: {getValue(`${existsOperator.message}`)}
         </Fragment>
       );
     case FILTERS.PHRASES:
       return (
         <Fragment>
           {prefix}
-          {filter.meta.key}: {getValue(`${isOneOfOperator.message} ${valueLabel}`)}
+          {fieldLabel || filter.meta.key}: {getValue(`${isOneOfOperator.message} ${valueLabel}`)}
         </Fragment>
       );
     case FILTERS.QUERY_STRING:
@@ -81,7 +83,7 @@ export default function FilterLabel({
       return (
         <Fragment>
           {prefix}
-          {filter.meta.key}: {getValue(valueLabel)}
+          {fieldLabel || filter.meta.key}: {getValue(valueLabel)}
         </Fragment>
       );
     default:

diff --git a/src/plugins/unified_search/public/filter_bar/filter_item.tsx b/src/plugins/unified_search/public/filter_bar/filter_item.tsx
@@ -19,7 +19,11 @@ import classNames from 'classnames';
 import React, { MouseEvent, useState, useEffect, HTMLAttributes } from 'react';
 import { IUiSettingsClient } from '@kbn/core/public';
 import { DataView } from '@kbn/data-views-plugin/public';
-import { getIndexPatternFromFilter, getDisplayValueFromFilter } from '@kbn/data-plugin/public';
+import {
+  getIndexPatternFromFilter,
+  getDisplayValueFromFilter,
+  getFieldDisplayValueFromFilter,
+} from '@kbn/data-plugin/public';
 import { FilterEditor } from './filter_editor';
 import { FilterView } from './filter_view';
 import { getIndexPatterns } from '../services';
@@ -355,6 +359,7 @@ export function FilterItem(props: FilterItemProps) {
   const filterViewProps = {
     filter,
     valueLabel: valueLabelConfig.title,
+    fieldLabel: getFieldDisplayValueFromFilter(filter, indexPatterns),
     filterLabelStatus: valueLabelConfig.status,
     errorMessage: valueLabelConfig.message,
     className: getClasses(!!filter.meta.negate, valueLabelConfig),

diff --git a/src/plugins/unified_search/public/filter_bar/filter_view/index.tsx b/src/plugins/unified_search/public/filter_bar/filter_view/index.tsx
@@ -16,6 +16,7 @@ import type { FilterLabelStatus } from '../filter_item';
 interface Props {
   filter: Filter;
   valueLabel: string;
+  fieldLabel?: string;
   filterLabelStatus: FilterLabelStatus;
   errorMessage?: string;
   readonly?: boolean;
@@ -28,6 +29,7 @@ export const FilterView: FC<Props> = ({
   iconOnClick,
   onClick,
   valueLabel,
+  fieldLabel,
   errorMessage,
   filterLabelStatus,
   readonly,
@@ -100,6 +102,7 @@ export const FilterView: FC<Props> = ({
         <FilterLabel
           filter={filter}
           valueLabel={valueLabel}
+          fieldLabel={fieldLabel}
           filterLabelStatus={filterLabelStatus}
           hideAlias={hideAlias}
         />