Move filter bar and apply filters to data plugin (#36778)

* Setup filter plugin With filter_bar and ApplyFiltersPopover Update imports * Updated i18n keys * Typo fix * update JP translation names
2025-04-24 09:48:58 -04:00 · 2019-05-29 10:17:35 +03:00 · 2019-05-29 10:17:35 +03:00 · 963152f3c9
commit 963152f3c9
parent 16ab6dda03
43 changed files with 298 additions and 223 deletions
--- a/src/legacy/core_plugins/data/public/filter/apply_filters/apply_filters_popover.tsx
+++ b/src/legacy/core_plugins/data/public/filter/apply_filters/apply_filters_popover.tsx
@ -82,7 +82,7 @@ export class ApplyFiltersPopover extends Component<Props, State> {
          <EuiModalHeader>
            <EuiModalHeaderTitle>
              <FormattedMessage
-                id="common.ui.applyFilters.popupHeader"
+                id="data.filter.applyFilters.popupHeader"
                defaultMessage="Select filters to apply"
              />
            </EuiModalHeaderTitle>
@ -93,13 +93,13 @@ export class ApplyFiltersPopover extends Component<Props, State> {
          <EuiModalFooter>
            <EuiButtonEmpty onClick={this.props.onCancel}>
              <FormattedMessage
-                id="common.ui.applyFiltersPopup.cancelButtonLabel"
+                id="data.filter.applyFiltersPopup.cancelButtonLabel"
                defaultMessage="Cancel"
              />
            </EuiButtonEmpty>
            <EuiButton onClick={this.onSubmit} fill>
              <FormattedMessage
-                id="common.ui.applyFiltersPopup.saveButtonLabel"
+                id="data.filter.applyFiltersPopup.saveButtonLabel"
                defaultMessage="Apply"
              />
            </EuiButton>
--- a/src/legacy/core_plugins/data/public/filter/apply_filters/directive.html
+++ b/src/legacy/core_plugins/data/public/filter/apply_filters/directive.html
--- a/src/legacy/core_plugins/data/public/filter/apply_filters/directive.js
+++ b/src/legacy/core_plugins/data/public/filter/apply_filters/directive.js
@ -0,0 +1,60 @@
+/*
+ * 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 'ngreact';
+import { uiModules } from 'ui/modules';
+import template from './directive.html';
+import { ApplyFiltersPopover } from './apply_filters_popover';
+import { mapAndFlattenFilters } from 'ui/filter_manager/lib/map_and_flatten_filters';
+import { wrapInI18nContext } from 'ui/i18n';
+
+const app = uiModules.get('app/data', ['react']);
+
+export function setupDirective() {
+  app.directive('applyFiltersPopoverComponent', (reactDirective) => {
+    return reactDirective(wrapInI18nContext(ApplyFiltersPopover));
+  });
+
+  app.directive('applyFiltersPopover', (indexPatterns) => {
+    return {
+      template,
+      restrict: 'E',
+      scope: {
+        filters: '=',
+        onCancel: '=',
+        onSubmit: '=',
+      },
+      link: function ($scope) {
+        $scope.state = {};
+
+        // Each time the new filters change we want to rebuild (not just re-render) the "apply filters"
+        // popover, because it has to reset its state whenever the new filters change. Setting a `key`
+        // property on the component accomplishes this due to how React handles the `key` property.
+        $scope.$watch('filters', filters => {
+          mapAndFlattenFilters(indexPatterns, filters).then(mappedFilters => {
+            $scope.state = {
+              filters: mappedFilters,
+              key: Date.now(),
+            };
+          });
+        });
+      }
+    };
+  });
+}
--- a/src/legacy/core_plugins/data/public/filter/apply_filters/index.ts
+++ b/src/legacy/core_plugins/data/public/filter/apply_filters/index.ts
@ -17,6 +17,7 @@
 * under the License.
 */

-import './directive';
-
 export { ApplyFiltersPopover } from './apply_filters_popover';
+
+// @ts-ignore
+export { setupDirective } from './directive';
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/_global_filter_group.scss
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/_global_filter_group.scss
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/_global_filter_item.scss
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/_global_filter_item.scss
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/_index.scss
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/_index.scss
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/directive.js
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/directive.js
@ -19,11 +19,13 @@

 import 'ngreact';
 import { wrapInI18nContext } from 'ui/i18n';
-import { uiModules } from '../modules';
+import { uiModules } from 'ui/modules';
 import { FilterBar } from './filter_bar';

 const app = uiModules.get('app/kibana', ['react']);

-app.directive('filterBar', reactDirective => {
-  return reactDirective(wrapInI18nContext(FilterBar));
-});
+export function setupDirective() {
+  app.directive('filterBar', reactDirective => {
+    return reactDirective(wrapInI18nContext(FilterBar));
+  });
+}
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_bar.less
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_bar.less
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_bar.tsx
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_bar.tsx
@ -118,7 +118,7 @@ class FilterBarUI extends Component<Props, State> {
      <EuiButtonEmpty size="xs" onClick={this.onOpenAddFilterPopover} data-test-subj="addFilter">
        +{' '}
        <FormattedMessage
-          id="common.ui.filterBar.addFilterButtonLabel"
+          id="data.filter.filterBar.addFilterButtonLabel"
          defaultMessage="Add filter"
        />
      </EuiButtonEmpty>
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/generic_combo_box.tsx
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/generic_combo_box.tsx
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/index.tsx
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/index.tsx
@ -95,7 +95,7 @@ class FilterEditorUI extends Component<Props, State> {
          <EuiFlexGroup alignItems="baseline">
            <EuiFlexItem>
              <FormattedMessage
-                id="common.ui.filterEditor.editFilterPopupTitle"
+                id="data.filter.filterEditor.editFilterPopupTitle"
                defaultMessage="Edit filter"
              />
            </EuiFlexItem>
@ -103,12 +103,12 @@ class FilterEditorUI extends Component<Props, State> {
              <EuiButtonEmpty size="xs" onClick={this.toggleCustomEditor}>
                {this.state.isCustomEditorOpen ? (
                  <FormattedMessage
-                    id="common.ui.filterEditor.editFilterValuesButtonLabel"
+                    id="data.filter.filterEditor.editFilterValuesButtonLabel"
                    defaultMessage="Edit filter values"
                  />
                ) : (
                  <FormattedMessage
-                    id="common.ui.filterEditor.editQueryDslButtonLabel"
+                    id="data.filter.filterEditor.editQueryDslButtonLabel"
                    defaultMessage="Edit as Query DSL"
                  />
                )}
@ -128,7 +128,7 @@ class FilterEditorUI extends Component<Props, State> {
            <EuiSwitch
              id="filterEditorCustomLabelSwitch"
              label={this.props.intl.formatMessage({
-                id: 'common.ui.filterEditor.createCustomLabelSwitchLabel',
+                id: 'data.filter.filterEditor.createCustomLabelSwitchLabel',
                defaultMessage: 'Create custom label?',
              })}
              checked={this.state.useCustomLabel}
@ -140,7 +140,7 @@ class FilterEditorUI extends Component<Props, State> {
                <EuiSpacer size="m" />
                <EuiFormRow
                  label={this.props.intl.formatMessage({
-                    id: 'common.ui.filterEditor.createCustomLabelInputLabel',
+                    id: 'data.filter.filterEditor.createCustomLabelInputLabel',
                    defaultMessage: 'Custom label',
                  })}
                >
@ -163,7 +163,7 @@ class FilterEditorUI extends Component<Props, State> {
                  data-test-subj="saveFilter"
                >
                  <FormattedMessage
-                    id="common.ui.filterEditor.saveButtonLabel"
+                    id="data.filter.filterEditor.saveButtonLabel"
                    defaultMessage="Save"
                  />
                </EuiButton>
@ -175,7 +175,7 @@ class FilterEditorUI extends Component<Props, State> {
                  data-test-subj="cancelSaveFilter"
                >
                  <FormattedMessage
-                    id="common.ui.filterEditor.cancelButtonLabel"
+                    id="data.filter.filterEditor.cancelButtonLabel"
                    defaultMessage="Cancel"
                  />
                </EuiButtonEmpty>
@ -198,13 +198,13 @@ class FilterEditorUI extends Component<Props, State> {
        <EuiFlexItem>
          <EuiFormRow
            label={this.props.intl.formatMessage({
-              id: 'common.ui.filterEditor.indexPatternSelectLabel',
+              id: 'data.filter.filterEditor.indexPatternSelectLabel',
              defaultMessage: 'Index Pattern',
            })}
          >
            <IndexPatternComboBox
              placeholder={this.props.intl.formatMessage({
-                id: 'common.ui.filterBar.indexPatternSelectPlaceholder',
+                id: 'data.filter.filterBar.indexPatternSelectPlaceholder',
                defaultMessage: 'Select an index pattern',
              })}
              options={this.props.indexPatterns}
@ -240,7 +240,7 @@ class FilterEditorUI extends Component<Props, State> {
    return (
      <EuiFormRow
        label={this.props.intl.formatMessage({
-          id: 'common.ui.filterEditor.fieldSelectLabel',
+          id: 'data.filter.filterEditor.fieldSelectLabel',
          defaultMessage: 'Field',
        })}
      >
@ -248,7 +248,7 @@ class FilterEditorUI extends Component<Props, State> {
          id="fieldInput"
          isDisabled={!selectedIndexPattern}
          placeholder={this.props.intl.formatMessage({
-            id: 'common.ui.filterEditor.fieldSelectPlaceholder',
+            id: 'data.filter.filterEditor.fieldSelectPlaceholder',
            defaultMessage: 'Select a field',
          })}
          options={fields}
@ -269,14 +269,14 @@ class FilterEditorUI extends Component<Props, State> {
    return (
      <EuiFormRow
        label={this.props.intl.formatMessage({
-          id: 'common.ui.filterEditor.operatorSelectLabel',
+          id: 'data.filter.filterEditor.operatorSelectLabel',
          defaultMessage: 'Operator',
        })}
      >
        <OperatorComboBox
          isDisabled={!selectedField}
          placeholder={this.props.intl.formatMessage({
-            id: 'common.ui.filterEditor.operatorSelectPlaceholder',
+            id: 'data.filter.filterEditor.operatorSelectPlaceholder',
            defaultMessage: 'Select an operator',
          })}
          options={operators}
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/filter_editor_utils.test.ts
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/filter_editor_utils.test.ts
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/filter_editor_utils.ts
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/filter_editor_utils.ts
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/filter_operators.ts
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/filter_operators.ts
@ -27,7 +27,7 @@ export interface Operator {
 }

 export const isOperator = {
-  message: i18n.translate('common.ui.filterEditor.isOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.isOperatorOptionLabel', {
    defaultMessage: 'is',
  }),
  type: 'phrase',
@ -35,7 +35,7 @@ export const isOperator = {
 };

 export const isNotOperator = {
-  message: i18n.translate('common.ui.filterEditor.isNotOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.isNotOperatorOptionLabel', {
    defaultMessage: 'is not',
  }),
  type: 'phrase',
@ -43,7 +43,7 @@ export const isNotOperator = {
 };

 export const isOneOfOperator = {
-  message: i18n.translate('common.ui.filterEditor.isOneOfOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.isOneOfOperatorOptionLabel', {
    defaultMessage: 'is one of',
  }),
  type: 'phrases',
@ -52,7 +52,7 @@ export const isOneOfOperator = {
 };

 export const isNotOneOfOperator = {
-  message: i18n.translate('common.ui.filterEditor.isNotOneOfOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.isNotOneOfOperatorOptionLabel', {
    defaultMessage: 'is not one of',
  }),
  type: 'phrases',
@ -61,7 +61,7 @@ export const isNotOneOfOperator = {
 };

 export const isBetweenOperator = {
-  message: i18n.translate('common.ui.filterEditor.isBetweenOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.isBetweenOperatorOptionLabel', {
    defaultMessage: 'is between',
  }),
  type: 'range',
@ -70,7 +70,7 @@ export const isBetweenOperator = {
 };

 export const isNotBetweenOperator = {
-  message: i18n.translate('common.ui.filterEditor.isNotBetweenOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.isNotBetweenOperatorOptionLabel', {
    defaultMessage: 'is not between',
  }),
  type: 'range',
@ -79,7 +79,7 @@ export const isNotBetweenOperator = {
 };

 export const existsOperator = {
-  message: i18n.translate('common.ui.filterEditor.existsOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.existsOperatorOptionLabel', {
    defaultMessage: 'exists',
  }),
  type: 'exists',
@ -87,7 +87,7 @@ export const existsOperator = {
 };

 export const doesNotExistOperator = {
-  message: i18n.translate('common.ui.filterEditor.doesNotExistOperatorOptionLabel', {
+  message: i18n.translate('data.filter.filterEditor.doesNotExistOperatorOptionLabel', {
    defaultMessage: 'does not exist',
  }),
  type: 'exists',
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/fixtures/exists_filter.ts
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/fixtures/exists_filter.ts
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/fixtures/phrase_filter.ts
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/fixtures/phrase_filter.ts
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/fixtures/phrases_filter.ts
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/fixtures/phrases_filter.ts
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/fixtures/range_filter.ts
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/lib/fixtures/range_filter.ts
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/phrase_suggestor.tsx
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/phrase_suggestor.tsx
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/phrase_value_input.tsx
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/phrase_value_input.tsx
@ -36,7 +36,7 @@ class PhraseValueInputUI extends PhraseSuggestor<Props> {
    return (
      <EuiFormRow
        label={this.props.intl.formatMessage({
-          id: 'common.ui.filterEditor.valueInputLabel',
+          id: 'data.filter.filterEditor.valueInputLabel',
          defaultMessage: 'Value',
        })}
      >
@ -45,7 +45,7 @@ class PhraseValueInputUI extends PhraseSuggestor<Props> {
        ) : (
          <ValueInputType
            placeholder={this.props.intl.formatMessage({
-              id: 'common.ui.filterEditor.valueInputPlaceholder',
+              id: 'data.filter.filterEditor.valueInputPlaceholder',
              defaultMessage: 'Enter a value',
            })}
            value={this.props.value}
@ -64,7 +64,7 @@ class PhraseValueInputUI extends PhraseSuggestor<Props> {
    return (
      <StringComboBox
        placeholder={intl.formatMessage({
-          id: 'common.ui.filterEditor.valueSelectPlaceholder',
+          id: 'data.filter.filterEditor.valueSelectPlaceholder',
          defaultMessage: 'Select a value',
        })}
        options={options}
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/phrases_values_input.tsx
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/phrases_values_input.tsx
@ -38,13 +38,13 @@ class PhrasesValuesInputUI extends PhraseSuggestor<Props> {
    return (
      <EuiFormRow
        label={intl.formatMessage({
-          id: 'common.ui.filterEditor.valuesSelectLabel',
+          id: 'data.filter.filterEditor.valuesSelectLabel',
          defaultMessage: 'Values',
        })}
      >
        <StringComboBox
          placeholder={intl.formatMessage({
-            id: 'common.ui.filterEditor.valuesSelectPlaceholder',
+            id: 'data.filter.filterEditor.valuesSelectPlaceholder',
            defaultMessage: 'Select values',
          })}
          options={options}
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/range_value_input.tsx
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/range_value_input.tsx
@ -54,7 +54,7 @@ class RangeValueInputUI extends Component<Props> {
          <EuiFlexItem>
            <EuiFormRow
              label={this.props.intl.formatMessage({
-                id: 'common.ui.filterEditor.rangeStartInputLabel',
+                id: 'data.filter.filterEditor.rangeStartInputLabel',
                defaultMessage: 'From',
              })}
            >
@ -63,7 +63,7 @@ class RangeValueInputUI extends Component<Props> {
                value={this.props.value ? this.props.value.from : undefined}
                onChange={this.onFromChange}
                placeholder={this.props.intl.formatMessage({
-                  id: 'common.ui.filterEditor.rangeStartInputPlaceholder',
+                  id: 'data.filter.filterEditor.rangeStartInputPlaceholder',
                  defaultMessage: 'Start of the range',
                })}
              />
@ -72,7 +72,7 @@ class RangeValueInputUI extends Component<Props> {
          <EuiFlexItem>
            <EuiFormRow
              label={this.props.intl.formatMessage({
-                id: 'common.ui.filterEditor.rangeEndInputLabel',
+                id: 'data.filter.filterEditor.rangeEndInputLabel',
                defaultMessage: 'To',
              })}
            >
@ -81,7 +81,7 @@ class RangeValueInputUI extends Component<Props> {
                value={this.props.value ? this.props.value.to : undefined}
                onChange={this.onToChange}
                placeholder={this.props.intl.formatMessage({
-                  id: 'common.ui.filterEditor.rangeEndInputPlaceholder',
+                  id: 'data.filter.filterEditor.rangeEndInputPlaceholder',
                  defaultMessage: 'End of the range',
                })}
              />
@ -91,7 +91,7 @@ class RangeValueInputUI extends Component<Props> {
        {type === 'date' ? (
          <EuiLink target="_blank" href={getDocLink('date.dateMath')}>
            <FormattedMessage
-              id="common.ui.filterEditor.dateFormatHelpLinkLabel"
+              id="data.filter.filterEditor.dateFormatHelpLinkLabel"
              defaultMessage="Accepted date formats"
            />{' '}
            <EuiIcon type="link" />
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/value_input_type.tsx
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/value_input_type.tsx
@ -82,14 +82,14 @@ class ValueInputTypeUI extends Component<Props> {
              {
                value: 'true',
                text: this.props.intl.formatMessage({
-                  id: 'common.ui.filterEditor.trueOptionLabel',
+                  id: 'data.filter.filterEditor.trueOptionLabel',
                  defaultMessage: 'true',
                }),
              },
              {
                value: 'false',
                text: this.props.intl.formatMessage({
-                  id: 'common.ui.filterEditor.falseOptionLabel',
+                  id: 'data.filter.filterEditor.falseOptionLabel',
                  defaultMessage: 'false',
                }),
              },
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_item.tsx
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_item.tsx
@ -88,11 +88,11 @@ class FilterItemUI extends Component<Props, State> {
          {
            name: isFilterPinned(filter)
              ? this.props.intl.formatMessage({
-                  id: 'common.ui.filterBar.unpinFilterButtonLabel',
+                  id: 'data.filter.filterBar.unpinFilterButtonLabel',
                  defaultMessage: 'Unpin',
                })
              : this.props.intl.formatMessage({
-                  id: 'common.ui.filterBar.pinFilterButtonLabel',
+                  id: 'data.filter.filterBar.pinFilterButtonLabel',
                  defaultMessage: 'Pin across all apps',
                }),
            icon: 'pin',
@ -104,7 +104,7 @@ class FilterItemUI extends Component<Props, State> {
          },
          {
            name: this.props.intl.formatMessage({
-              id: 'common.ui.filterBar.editFilterButtonLabel',
+              id: 'data.filter.filterBar.editFilterButtonLabel',
              defaultMessage: 'Edit filter',
            }),
            icon: 'pencil',
@ -114,11 +114,11 @@ class FilterItemUI extends Component<Props, State> {
          {
            name: negate
              ? this.props.intl.formatMessage({
-                  id: 'common.ui.filterBar.includeFilterButtonLabel',
+                  id: 'data.filter.filterBar.includeFilterButtonLabel',
                  defaultMessage: 'Include results',
                })
              : this.props.intl.formatMessage({
-                  id: 'common.ui.filterBar.excludeFilterButtonLabel',
+                  id: 'data.filter.filterBar.excludeFilterButtonLabel',
                  defaultMessage: 'Exclude results',
                }),
            icon: negate ? 'plusInCircle' : 'minusInCircle',
@ -131,11 +131,11 @@ class FilterItemUI extends Component<Props, State> {
          {
            name: disabled
              ? this.props.intl.formatMessage({
-                  id: 'common.ui.filterBar.enableFilterButtonLabel',
+                  id: 'data.filter.filterBar.enableFilterButtonLabel',
                  defaultMessage: 'Re-enable',
                })
              : this.props.intl.formatMessage({
-                  id: 'common.ui.filterBar.disableFilterButtonLabel',
+                  id: 'data.filter.filterBar.disableFilterButtonLabel',
                  defaultMessage: 'Temporarily disable',
                }),
            icon: `${disabled ? 'eye' : 'eyeClosed'}`,
@ -147,7 +147,7 @@ class FilterItemUI extends Component<Props, State> {
          },
          {
            name: this.props.intl.formatMessage({
-              id: 'common.ui.filterBar.deleteFilterButtonLabel',
+              id: 'data.filter.filterBar.deleteFilterButtonLabel',
              defaultMessage: 'Delete',
            }),
            icon: 'trash',
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_options.tsx
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_options.tsx
@ -58,7 +58,7 @@ class FilterOptionsUI extends Component<Props, State> {
      items: [
        {
          name: this.props.intl.formatMessage({
-            id: 'common.ui.searchBar.enableAllFiltersButtonLabel',
+            id: 'data.filter.options.enableAllFiltersButtonLabel',
            defaultMessage: 'Enable all',
          }),
          icon: 'eye',
@ -70,7 +70,7 @@ class FilterOptionsUI extends Component<Props, State> {
        },
        {
          name: this.props.intl.formatMessage({
-            id: 'common.ui.searchBar.disableAllFiltersButtonLabel',
+            id: 'data.filter.options.disableAllFiltersButtonLabel',
            defaultMessage: 'Disable all',
          }),
          icon: 'eyeClosed',
@ -82,7 +82,7 @@ class FilterOptionsUI extends Component<Props, State> {
        },
        {
          name: this.props.intl.formatMessage({
-            id: 'common.ui.searchBar.pinAllFiltersButtonLabel',
+            id: 'data.filter.options.pinAllFiltersButtonLabel',
            defaultMessage: 'Pin all',
          }),
          icon: 'pin',
@ -94,7 +94,7 @@ class FilterOptionsUI extends Component<Props, State> {
        },
        {
          name: this.props.intl.formatMessage({
-            id: 'common.ui.searchBar.unpinAllFiltersButtonLabel',
+            id: 'data.filter.options.unpinAllFiltersButtonLabel',
            defaultMessage: 'Unpin all',
          }),
          icon: 'pin',
@ -106,7 +106,7 @@ class FilterOptionsUI extends Component<Props, State> {
        },
        {
          name: this.props.intl.formatMessage({
-            id: 'common.ui.searchBar.invertNegatedFiltersButtonLabel',
+            id: 'data.filter.options.invertNegatedFiltersButtonLabel',
            defaultMessage: 'Invert inclusion',
          }),
          icon: 'invert',
@ -118,7 +118,7 @@ class FilterOptionsUI extends Component<Props, State> {
        },
        {
          name: this.props.intl.formatMessage({
-            id: 'common.ui.searchBar.invertDisabledFiltersButtonLabel',
+            id: 'data.filter.options.invertDisabledFiltersButtonLabel',
            defaultMessage: 'Invert enabled/disabled',
          }),
          icon: 'eye',
@ -130,7 +130,7 @@ class FilterOptionsUI extends Component<Props, State> {
        },
        {
          name: this.props.intl.formatMessage({
-            id: 'common.ui.searchBar.deleteAllFiltersButtonLabel',
+            id: 'data.filter.options.deleteAllFiltersButtonLabel',
            defaultMessage: 'Remove all',
          }),
          icon: 'trash',
@ -155,11 +155,11 @@ class FilterOptionsUI extends Component<Props, State> {
            color="text"
            iconType="gear"
            aria-label={this.props.intl.formatMessage({
-              id: 'common.ui.searchBar.changeAllFiltersButtonLabel',
+              id: 'data.filter.options.changeAllFiltersButtonLabel',
              defaultMessage: 'Change all filters',
            })}
            title={this.props.intl.formatMessage({
-              id: 'common.ui.searchBar.changeAllFiltersButtonLabel',
+              id: 'data.filter.options.changeAllFiltersButtonLabel',
              defaultMessage: 'Change all filters',
            })}
            data-test-subj="showFilterActions"
@ -171,7 +171,7 @@ class FilterOptionsUI extends Component<Props, State> {
      >
        <EuiPopoverTitle>
          <FormattedMessage
-            id="common.ui.searchBar.changeAllFiltersTitle"
+            id="data.filter.searchBar.changeAllFiltersTitle"
            defaultMessage="Change all filters"
          />
        </EuiPopoverTitle>
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_view/index.tsx
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_view/index.tsx
@ -21,7 +21,7 @@ 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 'ui/filter_bar/filter_editor/lib/filter_operators';
+import { existsOperator, isOneOfOperator } from '../filter_editor/lib/filter_operators';

 interface Props {
  filter: Filter;
@ -30,19 +30,19 @@ interface Props {

 export const FilterView: SFC<Props> = ({ filter, ...rest }: Props) => {
  let title = `Filter: ${getFilterDisplayText(filter)}. ${i18n.translate(
-    'common.ui.filterBar.moreFilterActionsMessage',
+    'data.filter.filterBar.moreFilterActionsMessage',
    {
      defaultMessage: 'Select for more filter actions.',
    }
  )}`;

  if (isFilterPinned(filter)) {
-    title = `${i18n.translate('common.ui.filterBar.pinnedFilterPrefix', {
+    title = `${i18n.translate('data.filter.filterBar.pinnedFilterPrefix', {
      defaultMessage: 'Pinned',
    })} ${title}`;
  }
  if (filter.meta.disabled) {
-    title = `${i18n.translate('common.ui.filterBar.disabledFilterPrefix', {
+    title = `${i18n.translate('data.filter.filterBar.disabledFilterPrefix', {
      defaultMessage: 'Disabled',
    })} ${title}`;
  }
@ -58,10 +58,10 @@ export const FilterView: SFC<Props> = ({ filter, ...rest }: Props) => {
        // Also, we may want to add a `DEL` keyboard press functionality
        tabIndex: '-1',
      }}
-      iconOnClickAriaLabel={i18n.translate('common.ui.filterBar.filterItemBadgeIconAriaLabel', {
+      iconOnClickAriaLabel={i18n.translate('data.filter.filterBar.filterItemBadgeIconAriaLabel', {
        defaultMessage: 'Delete',
      })}
-      onClickAriaLabel={i18n.translate('common.ui.filterBar.filterItemBadgeAriaLabel', {
+      onClickAriaLabel={i18n.translate('data.filter.filterBar.filterItemBadgeAriaLabel', {
        defaultMessage: 'Filter actions',
      })}
      {...rest}
@ -73,7 +73,7 @@ export const FilterView: SFC<Props> = ({ filter, ...rest }: Props) => {

 export function getFilterDisplayText(filter: Filter) {
  const prefix = filter.meta.negate
-    ? ` ${i18n.translate('common.ui.filterBar.negatedFilterPrefix', {
+    ? ` ${i18n.translate('data.filter.filterBar.negatedFilterPrefix', {
        defaultMessage: 'NOT ',
      })}`
    : '';
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/index.ts
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/index.ts
@ -20,3 +20,6 @@
 import './directive';

 export { FilterBar } from './filter_bar';
+
+// @ts-ignore
+export { setupDirective } from './directive';
--- a/src/legacy/core_plugins/data/public/filter/filter_service.ts
+++ b/src/legacy/core_plugins/data/public/filter/filter_service.ts
@ -0,0 +1,48 @@
+/*
+ * 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 { once } from 'lodash';
+import { FilterBar, setupDirective as setupFilterBarDirective } from './filter_bar';
+import { ApplyFiltersPopover, setupDirective as setupApplyFiltersDirective } from './apply_filters';
+
+/**
+ * FilterSearch Service
+ * @internal
+ */
+export class FilterService {
+  public setup() {
+    return {
+      ui: {
+        ApplyFiltersPopover,
+        FilterBar,
+      },
+      loadLegacyDirectives: once(() => {
+        setupFilterBarDirective();
+        setupApplyFiltersDirective();
+      }),
+    };
+  }
+
+  public stop() {
+    // nothing to do here yet
+  }
+}
+
+/** @public */
+export type FilterSetup = ReturnType<FilterService['setup']>;
--- a/src/legacy/core_plugins/data/public/filter/index.tsx
+++ b/src/legacy/core_plugins/data/public/filter/index.tsx
@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export { FilterService, FilterSetup } from './filter_service';
--- a/src/legacy/core_plugins/data/public/index.scss
+++ b/src/legacy/core_plugins/data/public/index.scss
@ -2,3 +2,5 @@

@import './query/query_bar/index';

+@import './filter/filter_bar/index';
+
--- a/src/legacy/core_plugins/data/public/index.ts
+++ b/src/legacy/core_plugins/data/public/index.ts
@ -28,16 +28,20 @@ import { renderersRegistry } from 'plugins/interpreter/registries';
 import { ExpressionsService, ExpressionsSetup } from './expressions';
 import { SearchService, SearchSetup } from './search';
 import { QueryService, QuerySetup } from './query';
+import { FilterService, FilterSetup } from './filter';
 import { IndexPatternsService, IndexPatternsSetup } from './index_patterns';

 class DataPlugin {
+  // Exposed services, sorted alphabetically
+  private readonly expressions: ExpressionsService;
+  private readonly filter: FilterService;
  private readonly indexPatterns: IndexPatternsService;
  private readonly search: SearchService;
  private readonly query: QueryService;
-  private readonly expressions: ExpressionsService;

  constructor() {
    this.indexPatterns = new IndexPatternsService();
+    this.filter = new FilterService();
    this.query = new QueryService();
    this.search = new SearchService();
    this.expressions = new ExpressionsService();
@ -45,23 +49,25 @@ class DataPlugin {

  public setup(): DataSetup {
    return {
-      indexPatterns: this.indexPatterns.setup(),
-      search: this.search.setup(),
-      query: this.query.setup(),
      expressions: this.expressions.setup({
        interpreter: {
          getInterpreter,
          renderersRegistry,
        },
      }),
+      indexPatterns: this.indexPatterns.setup(),
+      filter: this.filter.setup(),
+      search: this.search.setup(),
+      query: this.query.setup(),
    };
  }

  public stop() {
+    this.expressions.stop();
    this.indexPatterns.stop();
+    this.filter.stop();
    this.search.stop();
    this.query.stop();
-    this.expressions.stop();
  }
 }

@ -74,8 +80,9 @@ export const data = new DataPlugin().setup();

 /** @public */
 export interface DataSetup {
-  indexPatterns: IndexPatternsSetup;
  expressions: ExpressionsSetup;
+  indexPatterns: IndexPatternsSetup;
+  filter: FilterSetup;
  search: SearchSetup;
  query: QuerySetup;
 }
--- a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx
+++ b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx
@ -24,11 +24,11 @@ import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import classNames from 'classnames';
 import React, { Component } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
-import { FilterBar } from 'ui/filter_bar';
 import { IndexPattern } from 'ui/index_patterns';
 import { Storage } from 'ui/storage';

 import { QueryBar } from '../../../query/query_bar';
+import { FilterBar } from '../../../filter/filter_bar';

 interface Query {
  query: string;
--- a/src/legacy/core_plugins/kibana/public/context/app.js
+++ b/src/legacy/core_plugins/kibana/public/context/app.js
@ -22,7 +22,6 @@ import _ from 'lodash';
 import { callAfterBindingsWorkaround } from 'ui/compat';
 import { uiModules } from 'ui/modules';
 import contextAppTemplate from './app.html';
-import 'ui/filter_bar';
 import './components/loading_button';
 import './components/size_picker/size_picker';
 import { getFirstSortableField } from './api/utils/sorting';
@ -39,6 +38,9 @@ import {
 } from './query';
 import { timefilter } from 'ui/timefilter';

+import { data } from 'plugins/data';
+data.filter.loadLegacyDirectives();
+
 const module = uiModules.get('apps/context', [
  'elasticsearch',
  'kibana',
--- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.js
+++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.js
@ -26,8 +26,6 @@ import chrome from 'ui/chrome';
 import { wrapInI18nContext } from 'ui/i18n';
 import { toastNotifications } from 'ui/notify';

-import 'ui/apply_filters';
-
 import { panelActionsStore } from './store/panel_actions_store';

 import { getDashboardTitle } from './dashboard_strings';
@ -58,8 +56,6 @@ import { getUnhashableStatesProvider } from 'ui/state_management/state_hashing';

 import { DashboardViewportProvider } from './viewport/dashboard_viewport_provider';

-import { data } from 'plugins/data';
-data.search.loadLegacyDirectives();

 const app = uiModules.get('app/dashboard', [
  'elasticsearch',
--- a/src/legacy/core_plugins/kibana/public/dashboard/index.js
+++ b/src/legacy/core_plugins/kibana/public/dashboard/index.js
@ -23,7 +23,6 @@ import './saved_dashboard/saved_dashboards';
 import './dashboard_config';
 import uiRoutes from 'ui/routes';
 import chrome from 'ui/chrome';
-import 'ui/filter_bar';
 import { wrapInI18nContext } from 'ui/i18n';
 import { toastNotifications } from 'ui/notify';

@ -40,6 +39,10 @@ import { DashboardListing, EMPTY_FILTER } from './listing/dashboard_listing';
 import { uiModules } from 'ui/modules';
 import 'ui/capabilities/route_setup';

+import { data } from 'plugins/data';
+data.search.loadLegacyDirectives();
+data.filter.loadLegacyDirectives();
+
 const app = uiModules.get('app/dashboard', [
  'ngRoute',
  'react',
--- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js
@ -26,7 +26,6 @@ import 'ui/visualize';
 import 'ui/collapsible_sidebar';

 import { capabilities } from 'ui/capabilities';
-import 'ui/apply_filters';
 import chrome from 'ui/chrome';
 import React from 'react';
 import angular from 'angular';
@ -55,8 +54,6 @@ import { SavedObjectSaveModal } from 'ui/saved_objects/components/saved_object_s
 import { getEditBreadcrumbs, getCreateBreadcrumbs } from '../breadcrumbs';
 import { getNewPlatform } from 'ui/new_platform';

-import { data } from 'plugins/data';
-data.search.loadLegacyDirectives();

 uiRoutes
  .when(VisualizeConstants.CREATE_PATH, {
--- a/src/legacy/core_plugins/kibana/public/visualize/index.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/index.js
@ -21,7 +21,6 @@ import './editor/editor';
 import { i18n } from '@kbn/i18n';
 import './saved_visualizations/_saved_vis';
 import './saved_visualizations/saved_visualizations';
-import 'ui/filter_bar';
 import uiRoutes from 'ui/routes';
 import 'ui/capabilities/route_setup';
 import visualizeListingTemplate from './listing/visualize_listing.html';
@ -30,6 +29,10 @@ import { VisualizeConstants } from './visualize_constants';
 import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
 import { getLandingBreadcrumbs, getWizardStep1Breadcrumbs } from './breadcrumbs';

+import { data } from 'plugins/data';
+data.search.loadLegacyDirectives();
+data.filter.loadLegacyDirectives();
+
 uiRoutes
  .defaults(/visualize/, {
    requireDefaultIndex: true,
--- a/src/legacy/ui/public/_index.scss
+++ b/src/legacy/ui/public/_index.scss
@ -21,8 +21,7 @@
@import './kbn_top_nav/index';
@import './markdown/index';
@import './notify/index';
-@import './share/index'; 
-@import './filter_bar/index';
+@import './share/index';
@import './style_compile/index';

 // The following are prefixed with "vis"
--- a/src/legacy/ui/public/apply_filters/directive.js
+++ b/src/legacy/ui/public/apply_filters/directive.js
@ -1,58 +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 'ngreact';
-import { uiModules } from '../modules';
-import template from './directive.html';
-import { ApplyFiltersPopover } from './apply_filters_popover';
-import { mapAndFlattenFilters } from '../filter_manager/lib/map_and_flatten_filters';
-import { wrapInI18nContext } from 'ui/i18n';
-
-const app = uiModules.get('app/kibana', ['react']);
-
-app.directive('applyFiltersPopoverComponent', (reactDirective) => {
-  return reactDirective(wrapInI18nContext(ApplyFiltersPopover));
-});
-
-app.directive('applyFiltersPopover', (indexPatterns) => {
-  return {
-    template,
-    restrict: 'E',
-    scope: {
-      filters: '=',
-      onCancel: '=',
-      onSubmit: '=',
-    },
-    link: function ($scope) {
-      $scope.state = {};
-
-      // Each time the new filters change we want to rebuild (not just re-render) the "apply filters"
-      // popover, because it has to reset its state whenever the new filters change. Setting a `key`
-      // property on the component accomplishes this due to how React handles the `key` property.
-      $scope.$watch('filters', filters => {
-        mapAndFlattenFilters(indexPatterns, filters).then(mappedFilters => {
-          $scope.state = {
-            filters: mappedFilters,
-            key: Date.now(),
-          };
-        });
-      });
-    }
-  };
-});
--- a/src/legacy/ui/public/styles/bootstrap_light.less
+++ b/src/legacy/ui/public/styles/bootstrap_light.less
@ -3,5 +3,3 @@

@import "~ui/styles/bootstrap/bootstrap_light";

-// Components -- waiting on EUI conversion
-@import "~ui/filter_bar/filter_bar";
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -268,9 +268,6 @@
    "common.ui.aggTypes.timeInterval.selectIntervalPlaceholder": "Select an interval",
    "common.ui.aggTypes.timeInterval.selectOptionHelpText": "Select an option or create a custom value.例30s、20m、24h、2d、1w、1M",
    "common.ui.aggTypes.valuesLabel": "値",
-    "common.ui.applyFilters.popupHeader": "適用するフィルターの選択",
-    "common.ui.applyFiltersPopup.cancelButtonLabel": "キャンセル",
-    "common.ui.applyFiltersPopup.saveButtonLabel": "適用",
    "common.ui.chrome.bigUrlWarningNotificationMessage": "{advancedSettingsLink} の {storeInSessionStorageParam} オプションを有効にするか、画面上のビジュアルをシンプルにしてください。",
    "common.ui.chrome.bigUrlWarningNotificationMessage.advancedSettingsLinkText": "高度な設定",
    "common.ui.chrome.bigUrlWarningNotificationTitle": "URL が大きく、Kibana の動作が停止する可能性があります",
@ -478,54 +475,6 @@
    "common.ui.fieldEditor.warningHeader": "廃止警告:",
    "common.ui.fieldEditor.warningLabel.painlessLinkLabel": "Painless",
    "common.ui.fieldEditor.warningLabel.warningDetail": "{language} は廃止され、Kibana と Elasticsearch の次のメジャーなバージョンではサポートされなくなります。新規スクリプトフィールドには {painlessLink} を使うことをお勧めします。",
-    "common.ui.filterBar.addFilterButtonLabel": "フィルターを追加します",
-    "common.ui.filterBar.deleteFilterButtonLabel": "削除",
-    "common.ui.filterBar.disabledFilterPrefix": "無効",
-    "common.ui.filterBar.disableFilterButtonLabel": "一時的に無効にする",
-    "common.ui.filterBar.editFilterButtonLabel": "フィルターを編集",
-    "common.ui.filterBar.enableFilterButtonLabel": "再度有効にする",
-    "common.ui.filterBar.excludeFilterButtonLabel": "結果を除外",
-    "common.ui.filterBar.filterItemBadgeAriaLabel": "フィルターアクション",
-    "common.ui.filterBar.filterItemBadgeIconAriaLabel": "削除",
-    "common.ui.filterBar.includeFilterButtonLabel": "結果を含める",
-    "common.ui.filterBar.indexPatternSelectPlaceholder": "インデックスパターンの選択",
-    "common.ui.filterBar.moreFilterActionsMessage": "他のフィルターアクションを使用するには選択してください。",
-    "common.ui.filterBar.negatedFilterPrefix": "NOT ",
-    "common.ui.filterBar.pinFilterButtonLabel": "すべてのアプリにピン付け",
-    "common.ui.filterBar.pinnedFilterPrefix": "ピン付け済み",
-    "common.ui.filterBar.unpinFilterButtonLabel": "ピンを外す",
-    "common.ui.filterEditor.cancelButtonLabel": "キャンセル",
-    "common.ui.filterEditor.createCustomLabelInputLabel": "カスタムラベル",
-    "common.ui.filterEditor.createCustomLabelSwitchLabel": "カスタムラベルを作成しますか？",
-    "common.ui.filterEditor.dateFormatHelpLinkLabel": "対応データフォーマット",
-    "common.ui.filterEditor.doesNotExistOperatorOptionLabel": "存在しません",
-    "common.ui.filterEditor.editFilterPopupTitle": "フィルターを編集",
-    "common.ui.filterEditor.editFilterValuesButtonLabel": "フィルター値を編集",
-    "common.ui.filterEditor.editQueryDslButtonLabel": "クエリ DSL として編集",
-    "common.ui.filterEditor.existsOperatorOptionLabel": "存在する",
-    "common.ui.filterEditor.falseOptionLabel": "false",
-    "common.ui.filterEditor.fieldSelectLabel": "フィールド",
-    "common.ui.filterEditor.fieldSelectPlaceholder": "フィールドを選択",
-    "common.ui.filterEditor.indexPatternSelectLabel": "インデックスパターン",
-    "common.ui.filterEditor.isBetweenOperatorOptionLabel": "is between",
-    "common.ui.filterEditor.isNotBetweenOperatorOptionLabel": "is not between",
-    "common.ui.filterEditor.isNotOneOfOperatorOptionLabel": "is not one of",
-    "common.ui.filterEditor.isNotOperatorOptionLabel": "is not",
-    "common.ui.filterEditor.isOneOfOperatorOptionLabel": "is one of",
-    "common.ui.filterEditor.isOperatorOptionLabel": "が",
-    "common.ui.filterEditor.operatorSelectLabel": "演算子",
-    "common.ui.filterEditor.operatorSelectPlaceholder": "演算子を選択",
-    "common.ui.filterEditor.rangeEndInputLabel": "To",
-    "common.ui.filterEditor.rangeEndInputPlaceholder": "範囲の終了値",
-    "common.ui.filterEditor.rangeStartInputLabel": "From",
-    "common.ui.filterEditor.rangeStartInputPlaceholder": "範囲の開始値",
-    "common.ui.filterEditor.saveButtonLabel": "保存",
-    "common.ui.filterEditor.trueOptionLabel": "true",
-    "common.ui.filterEditor.valueInputLabel": "値",
-    "common.ui.filterEditor.valueInputPlaceholder": "値を入力",
-    "common.ui.filterEditor.valueSelectPlaceholder": "値を選択",
-    "common.ui.filterEditor.valuesSelectLabel": "値",
-    "common.ui.filterEditor.valuesSelectPlaceholder": "値を選択",
    "common.ui.flotCharts.aprLabel": "4 月",
    "common.ui.flotCharts.augLabel": "8 月",
    "common.ui.flotCharts.decLabel": "12 月",
@ -628,15 +577,6 @@
    "common.ui.savedObjects.saveModal.saveTitle": "{objectType} を保存",
    "common.ui.savedObjects.saveModal.titleLabel": "タイトル",
    "common.ui.scriptingLanguages.errorFetchingToastDescription": "Elasticsearch から利用可能なスクリプト言語の取得中にエラーが発生しました",
-    "common.ui.searchBar.changeAllFiltersButtonLabel": "すべてのフィルターの変更",
-    "common.ui.searchBar.changeAllFiltersTitle": "すべてのフィルターの変更",
-    "common.ui.searchBar.deleteAllFiltersButtonLabel": "すべて削除",
-    "common.ui.searchBar.disableAllFiltersButtonLabel": "すべて無効にする",
-    "common.ui.searchBar.enableAllFiltersButtonLabel": "すべて有効にする",
-    "common.ui.searchBar.invertDisabledFiltersButtonLabel": "有効・無効を反転",
-    "common.ui.searchBar.invertNegatedFiltersButtonLabel": "含める・除外を反転",
-    "common.ui.searchBar.pinAllFiltersButtonLabel": "すべてピン付け",
-    "common.ui.searchBar.unpinAllFiltersButtonLabel": "すべてのピンを外す",
    "common.ui.share.contextMenu.embedCodeLabel": "埋め込みコード",
    "common.ui.share.contextMenu.embedCodePanelTitle": "埋め込みコード",
    "common.ui.share.contextMenu.permalinkPanelTitle": "パーマリンク",
@ -730,6 +670,73 @@
    "common.ui.visualize.queryGeohashBounds.unableToGetBoundErrorTitle": "バウンドを取得できませんでした",
    "common.ui.welcomeErrorMessage": "Kibana が正常に読み込まれませんでした。詳細はサーバーアウトプットを確認してください。",
    "common.ui.welcomeMessage": "Kibana を読み込み中",
+    "data.filter.applyFilters.popupHeader": "適用するフィルターの選択",
+    "data.filter.applyFiltersPopup.cancelButtonLabel": "キャンセル",
+    "data.filter.applyFiltersPopup.saveButtonLabel": "適用",
+    "data.filter.filterBar.addFilterButtonLabel": "フィルターを追加します",
+    "data.filter.filterBar.deleteFilterButtonLabel": "削除",
+    "data.filter.filterBar.disabledFilterPrefix": "無効",
+    "data.filter.filterBar.disableFilterButtonLabel": "一時的に無効にする",
+    "data.filter.filterBar.editFilterButtonLabel": "フィルターを編集",
+    "data.filter.filterBar.enableFilterButtonLabel": "再度有効にする",
+    "data.filter.filterBar.excludeFilterButtonLabel": "結果を除外",
+    "data.filter.filterBar.filterItemBadgeAriaLabel": "フィルターアクション",
+    "data.filter.filterBar.filterItemBadgeIconAriaLabel": "削除",
+    "data.filter.filterBar.includeFilterButtonLabel": "結果を含める",
+    "data.filter.filterBar.indexPatternSelectPlaceholder": "インデックスパターンの選択",
+    "data.filter.filterBar.moreFilterActionsMessage": "他のフィルターアクションを使用するには選択してください。",
+    "data.filter.filterBar.negatedFilterPrefix": "NOT ",
+    "data.filter.filterBar.pinFilterButtonLabel": "すべてのアプリにピン付け",
+    "data.filter.filterBar.pinnedFilterPrefix": "ピン付け済み",
+    "data.filter.filterBar.unpinFilterButtonLabel": "ピンを外す",
+    "data.filter.filterEditor.cancelButtonLabel": "キャンセル",
+    "data.filter.filterEditor.createCustomLabelInputLabel": "カスタムラベル",
+    "data.filter.filterEditor.createCustomLabelSwitchLabel": "カスタムラベルを作成しますか？",
+    "data.filter.filterEditor.dateFormatHelpLinkLabel": "対応データフォーマット",
+    "data.filter.filterEditor.doesNotExistOperatorOptionLabel": "存在しません",
+    "data.filter.filterEditor.editFilterPopupTitle": "フィルターを編集",
+    "data.filter.filterEditor.editFilterValuesButtonLabel": "フィルター値を編集",
+    "data.filter.filterEditor.editQueryDslButtonLabel": "クエリ DSL として編集",
+    "data.filter.filterEditor.existsOperatorOptionLabel": "存在する",
+    "data.filter.filterEditor.falseOptionLabel": "false",
+    "data.filter.filterEditor.fieldSelectLabel": "フィールド",
+    "data.filter.filterEditor.fieldSelectPlaceholder": "フィールドを選択",
+    "data.filter.filterEditor.indexPatternSelectLabel": "インデックスパターン",
+    "data.filter.filterEditor.isBetweenOperatorOptionLabel": "is between",
+    "data.filter.filterEditor.isNotBetweenOperatorOptionLabel": "is not between",
+    "data.filter.filterEditor.isNotOneOfOperatorOptionLabel": "is not one of",
+    "data.filter.filterEditor.isNotOperatorOptionLabel": "is not",
+    "data.filter.filterEditor.isOneOfOperatorOptionLabel": "is one of",
+    "data.filter.filterEditor.isOperatorOptionLabel": "が",
+    "data.filter.filterEditor.operatorSelectLabel": "演算子",
+    "data.filter.filterEditor.operatorSelectPlaceholder": "演算子を選択",
+    "data.filter.filterEditor.rangeEndInputLabel": "To",
+    "data.filter.filterEditor.rangeEndInputPlaceholder": "範囲の終了値",
+    "data.filter.filterEditor.rangeStartInputLabel": "From",
+    "data.filter.filterEditor.rangeStartInputPlaceholder": "範囲の開始値",
+    "data.filter.filterEditor.saveButtonLabel": "保存",
+    "data.filter.filterEditor.trueOptionLabel": "true",
+    "data.filter.filterEditor.valueInputLabel": "値",
+    "data.filter.filterEditor.valueInputPlaceholder": "値を入力",
+    "data.filter.filterEditor.valueSelectPlaceholder": "値を選択",
+    "data.filter.filterEditor.valuesSelectLabel": "値",
+    "data.filter.filterEditor.valuesSelectPlaceholder": "値を選択",
+    "data.filter.searchBar.changeAllFiltersTitle": "すべてのフィルターの変更",
+    "data.query.queryBar.kqlFullLanguageName": "Kibana クエリ言語",
+    "data.query.queryBar.kqlLanguageName": "KQL",
+    "data.query.queryBar.kqlOffLabel": "オフ",
+    "data.query.queryBar.kqlOnLabel": "オン",
+    "data.query.queryBar.luceneLanguageName": "Lucene",
+    "data.query.queryBar.luceneSyntaxWarningMessage": "Lucene クエリ構文を使用しているようですが、Kibana クエリ言語 (KQL) が選択されています。KQL ドキュメント {link} を確認してください。",
+    "data.query.queryBar.luceneSyntaxWarningTitle": "Lucene 構文警告",
+    "data.query.queryBar.searchInputAriaLabel": "{previouslyTranslatedPageTitle} ページの検索ボックスです。{pageType} の検索とフィルタリングを行うには入力を開始してください",
+    "data.query.queryBar.searchInputPlaceholder": "検索",
+    "data.query.queryBar.syntaxOptionsDescription": "{docsLink} (KQL) は、シンプルなクエリ構文とスクリプトフィールドのサポートを提供します。また、KQL はベーシックライセンス以上をご利用の場合、自動入力も提供します。KQL をオフにすると、Kibana は Lucene を使用します。",
+    "data.query.queryBar.syntaxOptionsDescription.docsLinkText": "こちら",
+    "data.query.queryBar.syntaxOptionsTitle": "構文オプション",
+    "data.search.searchBar.filtersButtonClickToHideTitle": "選択して表示",
+    "data.search.searchBar.filtersButtonClickToShowTitle": "選択して非表示",
+    "data.search.searchBar.filtersButtonFiltersAppliedTitle": "フィルターが適用されました。",
    "console.autocomplete.addMethodMetaText": "メソド",
    "console.consoleDisplayName": "コンソール",
    "console.helpPage.keyboardCommands.autoIndentDescription": "現在のリクエストを自動インデントします",
@ -839,21 +846,6 @@
    "core.fatalErrors.somethingWentWrongTitle": "何か問題が発生",
    "core.fatalErrors.tryRefreshingPageDescription": "ページを更新してみてください。うまくいかない場合は、前のページに戻るか、セッションデータを消去してください。",
    "core.notifications.unableUpdateUISettingNotificationMessageTitle": "UI 設定を更新できません",
-    "data.query.queryBar.kqlFullLanguageName": "Kibana クエリ言語",
-    "data.query.queryBar.kqlLanguageName": "KQL",
-    "data.query.queryBar.kqlOffLabel": "オフ",
-    "data.query.queryBar.kqlOnLabel": "オン",
-    "data.query.queryBar.luceneLanguageName": "Lucene",
-    "data.query.queryBar.luceneSyntaxWarningMessage": "Lucene クエリ構文を使用しているようですが、Kibana クエリ言語 (KQL) が選択されています。KQL ドキュメント {link} を確認してください。",
-    "data.query.queryBar.luceneSyntaxWarningTitle": "Lucene 構文警告",
-    "data.query.queryBar.searchInputAriaLabel": "{previouslyTranslatedPageTitle} ページの検索ボックスです。{pageType} の検索とフィルタリングを行うには入力を開始してください",
-    "data.query.queryBar.searchInputPlaceholder": "検索",
-    "data.query.queryBar.syntaxOptionsDescription": "{docsLink} (KQL) は、シンプルなクエリ構文とスクリプトフィールドのサポートを提供します。また、KQL はベーシックライセンス以上をご利用の場合、自動入力も提供します。KQL をオフにすると、Kibana は Lucene を使用します。",
-    "data.query.queryBar.syntaxOptionsDescription.docsLinkText": "こちら",
-    "data.query.queryBar.syntaxOptionsTitle": "構文オプション",
-    "data.search.searchBar.filtersButtonClickToHideTitle": "選択して表示",
-    "data.search.searchBar.filtersButtonClickToShowTitle": "選択して非表示",
-    "data.search.searchBar.filtersButtonFiltersAppliedTitle": "フィルターが適用されました。",
    "inputControl.control.noIndexPatternTooltip": "index-pattern id が見つかりませんでした: {indexPatternId}.",
    "inputControl.control.notInitializedTooltip": "コントロールが初期化されていません",
    "inputControl.control.noValuesDisableTooltip": "「{indexPatternName}」インデックスパターンでいずれのドキュメントにも存在しない「{fieldName}」フィールドがフィルターの対象になっています。異なるフィールドを選択するか、このフィールドに値が入力されているドキュメントをインデックスしてください。",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -7926,4 +7926,4 @@
    "xpack.watcher.watchActionsTitle": "满足后将执行 {watchActionsCount, plural, one{# 个操作} other {# 个操作}}",
    "xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。"
  }
-}
+}