[Management] Source filters table in React

package.json

@@ -81,9 +81,10 @@
     "@elastic/numeral": "2.3.1",
     "@elastic/ui-ace": "0.2.3",
     "@kbn/babel-preset": "link:packages/kbn-babel-preset",
-    "@kbn/pm": "link:packages/kbn-pm",
     "@kbn/datemath": "link:packages/kbn-datemath",
+    "@kbn/pm": "link:packages/kbn-pm",
     "@kbn/test-subj-selector": "link:packages/kbn-test-subj-selector",
+    "JSONStream": "1.1.1",
     "accept-language-parser": "1.2.0",
     "angular": "1.6.5",
     "angular-aria": "1.6.6",
@@ -143,7 +144,6 @@
     "js-yaml": "3.4.1",
     "json-stringify-pretty-compact": "1.0.4",
     "json-stringify-safe": "5.0.1",
-    "JSONStream": "1.1.1",
     "jstimezonedetect": "1.0.5",
     "leaflet": "1.0.3",
     "leaflet-draw": "0.4.10",

src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html

@@ -141,11 +141,7 @@
 
         <div id="reactScriptedFieldsTable"></div>
 
-        <source-filters-table
-          ng-show="state.tab == 'sourceFilters'"
-          index-pattern="indexPattern"
-          class="fields source-filters"
-        ></source-filters-table>
+        <div id="reactSourceFiltersTable"></div>
       </div>
     </div>
   </kbn-management-indices>

src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.js

@@ -1,23 +1,56 @@
 import _ from 'lodash';
 import './index_header';
 import './scripted_field_editor';
-import './source_filters_table';
 import { KbnUrlProvider } from 'ui/url';
 import { IndicesEditSectionsProvider } from './edit_sections';
 import { fatalError } from 'ui/notify';
 import uiRoutes from 'ui/routes';
 import { uiModules } from 'ui/modules';
 import template from './edit_index_pattern.html';
 import { FieldWildcardProvider } from 'ui/field_wildcard';
-
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
+import { SourceFiltersTable } from './source_filters_table';
 import { IndexedFieldsTable } from './indexed_fields_table';
 import { ScriptedFieldsTable } from './scripted_fields_table';
 
+const REACT_SOURCE_FILTERS_DOM_ELEMENT_ID = 'reactSourceFiltersTable';
 const REACT_INDEXED_FIELDS_DOM_ELEMENT_ID = 'reactIndexedFieldsTable';
 const REACT_SCRIPTED_FIELDS_DOM_ELEMENT_ID = 'reactScriptedFieldsTable';
 
+function updateSourceFiltersTable($scope, $state) {
+  if ($state.tab === 'sourceFilters') {
+    $scope.$$postDigest(() => {
+      const node = document.getElementById(REACT_SOURCE_FILTERS_DOM_ELEMENT_ID);
+      if (!node) {
+        return;
+      }
+
+      render(
+        <SourceFiltersTable
+          indexPattern={$scope.indexPattern}
+          filterFilter={$scope.fieldFilter}
+          fieldWildcardMatcher={$scope.fieldWildcardMatcher}
+          onAddOrRemoveFilter={() => {
+            $scope.editSections = $scope.editSectionsProvider($scope.indexPattern);
+            $scope.refreshFilters();
+            $scope.$apply();
+          }}
+        />,
+        node,
+      );
+    });
+  } else {
+    destroySourceFiltersTable();
+  }
+}
+
+function destroySourceFiltersTable() {
+  const node = document.getElementById(REACT_SOURCE_FILTERS_DOM_ELEMENT_ID);
+  node && unmountComponentAtNode(node);
+}
+
+
 function updateScriptedFieldsTable($scope, $state) {
   if ($state.tab === 'scriptedFields') {
     $scope.$$postDigest(() => {
@@ -167,6 +200,7 @@ uiModules.get('apps/management')
       $state.tab = obj.index;
       updateIndexedFieldsTable($scope, $state);
       updateScriptedFieldsTable($scope, $state);
+      updateSourceFiltersTable($scope, $state);
       $state.save();
     };
 
@@ -249,6 +283,9 @@ uiModules.get('apps/management')
       if ($scope.indexedFieldTypeFilter !== undefined && $state.tab === 'indexedFields') {
         updateIndexedFieldsTable($scope, $state);
       }
+      if ($scope.fieldFilter !== undefined && $state.tab === 'sourceFilters') {
+        updateSourceFiltersTable($scope, $state);
+      }
     });
 
     $scope.$watch('scriptedFieldLanguageFilter', () => {
@@ -261,4 +298,7 @@ uiModules.get('apps/management')
       destroyIndexedFieldsTable();
       destroyScriptedFieldsTable();
     });
+
+    updateScriptedFieldsTable($scope, $state);
+    updateSourceFiltersTable($scope, $state);
   });

src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_sections.js

@@ -10,7 +10,7 @@ export function IndicesEditSectionsProvider() {
     _.defaults(fieldCount, {
       indexed: 0,
       scripted: 0,
-      sourceFilters: 0
+      sourceFilters: indexPattern.sourceFilters ? indexPattern.sourceFilters.length : 0,
     });
 
     return [