Remove indexPatterns dependency from filter service

packages/kbn-es-query/src/filters/lib/meta_filter.ts

@@ -26,6 +26,10 @@ export interface FilterState {
   store: FilterStateStore;
 }
 
+export interface FilterValueFormatter {
+  convert: (value: any) => string;
+}
+
 export interface FilterMeta {
   // index and type are optional only because when you create a new filter, there are no defaults
   index?: string;
@@ -34,7 +38,7 @@ export interface FilterMeta {
   negate: boolean;
   alias: string | null;
   key?: string;
-  value?: string;
+  value?: string | ((formatter?: FilterValueFormatter) => string);
   params?: any;
 }
 

src/legacy/core_plugins/data/public/filter/apply_filters/apply_filters_popover.tsx

@@ -33,10 +33,13 @@ import {
 import { Filter } from '@kbn/es-query';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { Component } from 'react';
-import { getFilterDisplayText } from '../filter_bar/filter_view';
+import { IndexPattern } from '../../index_patterns';
+import { getDisplayValueFromFilter } from '../filter_bar/filter_editor/lib/filter_editor_utils';
+import { getFilterDisplayText } from '../filter_bar/filter_editor/lib/get_filter_display_text';
 
 interface Props {
   filters: Filter[];
+  indexPatterns: IndexPattern[];
   onCancel: () => void;
   onSubmit: (filters: Filter[]) => void;
 }
@@ -57,6 +60,11 @@ export class ApplyFiltersPopover extends Component<Props, State> {
     };
   }
 
+  private getLabel(filter: Filter) {
+    const filterDisplayValue = getDisplayValueFromFilter(filter, this.props.indexPatterns);
+    return getFilterDisplayText(filter, filterDisplayValue);
+  }
+
   public render() {
     if (this.props.filters.length === 0) {
       return '';
@@ -67,7 +75,7 @@ export class ApplyFiltersPopover extends Component<Props, State> {
         {this.props.filters.map((filter, i) => (
           <EuiFormRow key={i}>
             <EuiSwitch
-              label={getFilterDisplayText(filter)}
+              label={this.getLabel(filter)}
               checked={this.isFilterSelected(i)}
               onChange={() => this.toggleFilterSelected(i)}
             />

src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/filter_editor_utils.ts

@@ -31,7 +31,7 @@ import {
   PhrasesFilter,
   RangeFilter,
 } from '@kbn/es-query';
-import { omit } from 'lodash';
+import { omit, get } from 'lodash';
 import { Ipv4Address } from '../../../../../../../../plugins/kibana_utils/public';
 import { Field, IndexPattern, isFilterable } from '../../../../index_patterns';
 import { FILTER_OPERATORS, Operator } from './filter_operators';
@@ -43,6 +43,16 @@ export function getIndexPatternFromFilter(
   return indexPatterns.find(indexPattern => indexPattern.id === filter.meta.index);
 }
 
+export function getDisplayValueFromFilter(filter: Filter, indexPatterns: IndexPattern[]): string {
+  const indexPattern = getIndexPatternFromFilter(filter, indexPatterns);
+  const valueFormatter: any = get(indexPattern, ['fields', 'byName', filter.meta.key, 'format']);
+  if (typeof filter.meta.value === 'function') {
+    return filter.meta.value(valueFormatter);
+  } else {
+    return filter.meta.value || '';
+  }
+}
+
 export function getFieldFromFilter(filter: FieldFilter, indexPattern: IndexPattern) {
   return indexPattern.fields.find(field => field.name === filter.meta.key);
 }

src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/get_filter_display_text.ts

@@ -0,0 +1,53 @@
+/*
+ * 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 { Filter } from '@kbn/es-query';
+import { i18n } from '@kbn/i18n';
+import { existsOperator, isOneOfOperator } from './filter_operators';
+
+export function getFilterDisplayText(filter: Filter, filterDisplayName: string) {
+  const prefix = filter.meta.negate
+    ? ` ${i18n.translate('data.filter.filterBar.negatedFilterPrefix', {
+        defaultMessage: 'NOT ',
+      })}`
+    : '';
+
+  if (filter.meta.alias !== null) {
+    return `${prefix}${filter.meta.alias}`;
+  }
+
+  switch (filter.meta.type) {
+    case 'exists':
+      return `${prefix}${filter.meta.key} ${existsOperator.message}`;
+    case 'geo_bounding_box':
+      return `${prefix}${filter.meta.key}: ${filterDisplayName}`;
+    case 'geo_polygon':
+      return `${prefix}${filter.meta.key}: ${filterDisplayName}`;
+    case 'phrase':
+      return `${prefix}${filter.meta.key}: ${filterDisplayName}`;
+    case 'phrases':
+      return `${prefix}${filter.meta.key} ${isOneOfOperator.message} ${filterDisplayName}`;
+    case 'query_string':
+      return `${prefix}${filterDisplayName}`;
+    case 'range':
+      return `${prefix}${filter.meta.key}: ${filterDisplayName}`;
+    default:
+      return `${prefix}${JSON.stringify(filter.query)}`;
+  }
+}

src/legacy/core_plugins/data/public/filter/filter_bar/filter_item.tsx

@@ -32,6 +32,7 @@ import { UiSettingsClientContract } from 'src/core/public';
 import { IndexPattern } from '../../index_patterns';
 import { FilterEditor } from './filter_editor';
 import { FilterView } from './filter_view';
+import { getDisplayValueFromFilter } from './filter_editor/lib/filter_editor_utils';
 
 interface Props {
   id: string;
@@ -67,15 +68,17 @@ class FilterItemUI extends Component<Props, State> {
       this.props.className
     );
 
+    const displayName = getDisplayValueFromFilter(filter, this.props.indexPatterns);
     const dataTestSubjKey = filter.meta.key ? `filter-key-${filter.meta.key}` : '';
-    const dataTestSubjValue = filter.meta.value ? `filter-value-${filter.meta.value}` : '';
+    const dataTestSubjValue = filter.meta.value ? `filter-value-${displayName}` : '';
     const dataTestSubjDisabled = `filter-${
       this.props.filter.meta.disabled ? 'disabled' : 'enabled'
     }`;
 
     const badge = (
       <FilterView
         filter={filter}
+        displayName={displayName}
         className={classes}
         iconOnClick={() => this.props.onRemove()}
         onClick={this.togglePopover}

src/legacy/core_plugins/data/public/filter/filter_bar/filter_view/index.tsx

@@ -21,20 +21,25 @@ import { EuiBadge } from '@elastic/eui';
 import { Filter, isFilterPinned } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
 import React, { SFC } from 'react';
-import { existsOperator, isOneOfOperator } from '../filter_editor/lib/filter_operators';
+import { getFilterDisplayText } from '../filter_editor/lib/get_filter_display_text';
 
 interface Props {
   filter: Filter;
+  displayName: string;
   [propName: string]: any;
 }
 
-export const FilterView: SFC<Props> = ({ filter, iconOnClick, onClick, ...rest }: Props) => {
-  let title = `Filter: ${getFilterDisplayText(filter)}. ${i18n.translate(
-    'data.filter.filterBar.moreFilterActionsMessage',
-    {
-      defaultMessage: 'Select for more filter actions.',
-    }
-  )}`;
+export const FilterView: SFC<Props> = ({
+  filter,
+  iconOnClick,
+  onClick,
+  displayName,
+  ...rest
+}: Props) => {
+  let title = i18n.translate('data.filter.filterBar.moreFilterActionsMessage', {
+    defaultMessage: 'Filter: {displayText}. Select for more filter actions.',
+    values: { displayText: getFilterDisplayText(filter, displayName) },
+  });
 
   if (isFilterPinned(filter)) {
     title = `${i18n.translate('data.filter.filterBar.pinnedFilterPrefix', {
@@ -67,38 +72,7 @@ export const FilterView: SFC<Props> = ({ filter, iconOnClick, onClick, ...rest }
       })}
       {...rest}
     >
-      <span>{getFilterDisplayText(filter)}</span>
+      <span>{getFilterDisplayText(filter, displayName)}</span>
     </EuiBadge>
   );
 };
-
-export function getFilterDisplayText(filter: Filter) {
-  const prefix = filter.meta.negate
-    ? ` ${i18n.translate('data.filter.filterBar.negatedFilterPrefix', {
-        defaultMessage: 'NOT ',
-      })}`
-    : '';
-
-  if (filter.meta.alias !== null) {
-    return `${prefix}${filter.meta.alias}`;
-  }
-
-  switch (filter.meta.type) {
-    case 'exists':
-      return `${prefix}${filter.meta.key} ${existsOperator.message}`;
-    case 'geo_bounding_box':
-      return `${prefix}${filter.meta.key}: ${filter.meta.value}`;
-    case 'geo_polygon':
-      return `${prefix}${filter.meta.key}: ${filter.meta.value}`;
-    case 'phrase':
-      return `${prefix}${filter.meta.key}: ${filter.meta.value}`;
-    case 'phrases':
-      return `${prefix}${filter.meta.key} ${isOneOfOperator.message} ${filter.meta.value}`;
-    case 'query_string':
-      return `${prefix}${filter.meta.value}`;
-    case 'range':
-      return `${prefix}${filter.meta.key}: ${filter.meta.value}`;
-    default:
-      return `${prefix}${JSON.stringify(filter.query)}`;
-  }
-}