Add error if filter index pattern is missing

src/plugins/data/common/es_query/filters/get_display_value.ts

@@ -25,6 +25,7 @@ import { Filter } from '../filters';
 
 function getValueFormatter(indexPattern?: IIndexPattern, key?: string) {
   if (!indexPattern || !key) return;
+
   let format = get(indexPattern, ['fields', 'byName', key, 'format']);
   if (!format && (indexPattern.fields as any).getByName) {
     // TODO: Why is indexPatterns sometimes a map and sometimes an array?
@@ -43,9 +44,8 @@ function getValueFormatter(indexPattern?: IIndexPattern, key?: string) {
 }
 
 export function getDisplayValueFromFilter(filter: Filter, indexPatterns: IIndexPattern[]): string {
-  const indexPattern = getIndexPatternFromFilter(filter, indexPatterns);
-
   if (typeof filter.meta.value === 'function') {
+    const indexPattern = getIndexPatternFromFilter(filter, indexPatterns);
     const valueFormatter: any = getValueFormatter(indexPattern, filter.meta.key);
     return filter.meta.value(valueFormatter);
   } else {

src/plugins/data/common/query/filter_manager/compare_filters.ts

@@ -21,6 +21,7 @@ import { defaults, isEqual, omit, map } from 'lodash';
 import { FilterMeta, Filter } from '../../es_query';
 
 export interface FilterCompareOptions {
+  index?: boolean;
   disabled?: boolean;
   negate?: boolean;
   state?: boolean;
@@ -31,6 +32,7 @@ export interface FilterCompareOptions {
  * Include disabled, negate and store when comparing filters
  */
 export const COMPARE_ALL_OPTIONS: FilterCompareOptions = {
+  index: true,
   disabled: true,
   negate: true,
   state: true,
@@ -44,6 +46,7 @@ const mapFilter = (
 ) => {
   const cleaned: FilterMeta = omit(filter, excludedAttributes);
 
+  if (comparators.index) cleaned.index = filter.meta?.index;
   if (comparators.negate) cleaned.negate = filter.meta && Boolean(filter.meta.negate);
   if (comparators.disabled) cleaned.disabled = filter.meta && Boolean(filter.meta.disabled);
   if (comparators.alias) cleaned.alias = filter.meta?.alias;
@@ -81,6 +84,7 @@ export const compareFilters = (
   const excludedAttributes: string[] = ['$$hashKey', 'meta'];
 
   comparators = defaults(comparatorOptions || {}, {
+    index: false,
     state: false,
     negate: false,
     disabled: false,

src/plugins/data/public/ui/filter_bar/_global_filter_item.scss

@@ -32,15 +32,26 @@
   font-style: italic;
 }
 
-.globalFilterItem-isInvalid {
+.globalFilterItem-isError, .globalFilterItem-isWarning {
   text-decoration: none;
 
   .globalFilterLabel__value {
-    color: $euiColorDanger;
     font-weight: $euiFontWeightBold;
   }
 }
 
+.globalFilterItem-isError {
+  .globalFilterLabel__value {
+    color: makeHighContrastColor($euiColorDangerText, $euiColorLightShade);
+  }
+}
+
+.globalFilterItem-isWarning {
+  .globalFilterLabel__value {
+    color: makeHighContrastColor($euiColorWarningText, $euiColorLightShade);
+  }
+}
+
 .globalFilterItem-isPinned {
   position: relative;
 

src/plugins/data/public/ui/filter_bar/filter_bar.tsx

@@ -64,6 +64,7 @@ function FilterBarUI(props: Props) {
       <EuiFlexItem key={i} grow={false} className="globalFilterBar__flexItem">
         <FilterItem
           id={`${i}`}
+          intl={props.intl}
           filter={filter}
           onUpdate={(newFilter) => onUpdate(i, newFilter)}
           onRemove={() => onRemove(i)}

src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx

@@ -198,9 +198,14 @@ class FilterEditorUI extends Component<Props, State> {
     if (
       this.props.indexPatterns.length <= 1 &&
       this.props.indexPatterns.find(
-        (indexPattern) => indexPattern === this.state.selectedIndexPattern
+        (indexPattern) => indexPattern === this.getIndexPatternFromFilter()
       )
     ) {
+      /**
+       * Don't render the index pattern index pattern selector if thre's just one \ zero index patterns
+       * and if the index pattern the filter was LOADED with is in the indexPatterns list.
+       **/
+
       return '';
     }
     const { selectedIndexPattern } = this.state;