De-angularize DocViewer

src/legacy/core_plugins/kbn_doc_views/public/views/json.ts → src/legacy/core_plugins/kbn_doc_views/public/views/json.tsx

@@ -24,20 +24,13 @@ import { JsonCodeEditor } from './json_code_editor';
 /*
  * Registration of the the doc view: json
  * - used to display an ES hit as pretty printed JSON at Discover
- * - registered as angular directive to stay compatible with community plugins
  */
-DocViewsRegistryProvider.register(function(reactDirective: any) {
-  const reactDir = reactDirective(JsonCodeEditor, ['hit']);
-  // setting of reactDir.scope is required to assign $scope props
-  // to the react component via render-directive in doc_viewer.js
-  reactDir.scope = {
-    hit: '=',
-  };
+DocViewsRegistryProvider.register(function() {
   return {
     title: i18n.translate('kbnDocViews.json.jsonTitle', {
       defaultMessage: 'JSON',
     }),
     order: 20,
-    directive: reactDir,
+    component: JsonCodeEditor,
   };
 });

src/legacy/core_plugins/kbn_doc_views/public/views/table.js

@@ -19,57 +19,50 @@
 
 import _ from 'lodash';
 import { DocViewsRegistryProvider } from 'ui/registry/doc_views';
-
 import '../filters/trust_as_html';
 import tableHtml from './table.html';
 import { i18n } from '@kbn/i18n';
+import { injectAngularElement } from './table_helper';
+
+function controller($scope) {
+  $scope.mapping = $scope.indexPattern.fields.byName;
+  $scope.flattened = $scope.indexPattern.flattenHit($scope.hit);
+  $scope.formatted = $scope.indexPattern.formatHit($scope.hit);
+  $scope.fields = _.keys($scope.flattened).sort();
+
+  $scope.canToggleColumns = function canToggleColumn() {
+    return _.isFunction($scope.onAddColumn) && _.isFunction($scope.onRemoveColumn);
+  };
+
+  $scope.toggleColumn = function toggleColumn(columnName) {
+    if ($scope.columns.includes(columnName)) {
+      $scope.onRemoveColumn(columnName);
+    } else {
+      $scope.onAddColumn(columnName);
+    }
+  };
+
+  $scope.isColumnActive = function isColumnActive(columnName) {
+    return $scope.columns.includes(columnName);
+  };
+
+  $scope.showArrayInObjectsWarning = function (row, field) {
+    const value = $scope.flattened[field];
+    return Array.isArray(value) && typeof value[0] === 'object';
+  };
+}
 
 DocViewsRegistryProvider.register(function () {
   return {
     title: i18n.translate('kbnDocViews.table.tableTitle', {
-      defaultMessage: 'Table'
+      defaultMessage: 'Table',
     }),
     order: 10,
-    directive: {
-      template: tableHtml,
-      scope: {
-        hit: '=',
-        indexPattern: '=',
-        filter: '=',
-        columns: '=',
-        onAddColumn: '=',
-        onRemoveColumn: '=',
-      },
-      controller: function ($scope) {
-        $scope.mapping = $scope.indexPattern.fields.byName;
-        $scope.flattened = $scope.indexPattern.flattenHit($scope.hit);
-        $scope.formatted = $scope.indexPattern.formatHit($scope.hit);
-        $scope.fields = _.keys($scope.flattened).sort();
-
-        $scope.canToggleColumns = function canToggleColumn() {
-          return (
-            _.isFunction($scope.onAddColumn)
-            && _.isFunction($scope.onRemoveColumn)
-          );
-        };
-
-        $scope.toggleColumn = function toggleColumn(columnName) {
-          if ($scope.columns.includes(columnName)) {
-            $scope.onRemoveColumn(columnName);
-          } else {
-            $scope.onAddColumn(columnName);
-          }
-        };
-
-        $scope.isColumnActive = function isColumnActive(columnName) {
-          return $scope.columns.includes(columnName);
-        };
-
-        $scope.showArrayInObjectsWarning = function (row, field) {
-          const value = $scope.flattened[field];
-          return Array.isArray(value) && typeof value[0] === 'object';
-        };
-      }
-    }
+    render: (domNode, props) => {
+      const cleanupFnPromise = injectAngularElement(domNode, tableHtml, props, controller);
+      return () => {
+        cleanupFnPromise.then(cleanup => cleanup());
+      };
+    },
   };
 });

src/legacy/core_plugins/kbn_doc_views/public/views/table_helper.js

@@ -0,0 +1,44 @@
+/*
+ * 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 angular from 'angular';
+import chrome from 'ui/chrome';
+
+/**
+ * compiling and injecting the give angular template into the given dom node
+ * returning a function to cleanup the injected angular element
+ */
+export async function injectAngularElement(domNode, template, scopeProps, controller) {
+  const $injector = await chrome.dangerouslyGetActiveInjector();
+  const rootScope = $injector.get('$rootScope');
+  const newScope = Object.assign(rootScope.$new(), scopeProps);
+  if(typeof controller === 'function') {
+    controller(newScope);
+  }
+
+  const linkFn = $injector.get('$compile')(template)(newScope);
+  newScope.$digest();
+  angular
+    .element(domNode)
+    .empty()
+    .append(linkFn);
+
+  return () => {
+    newScope.$destroy();
+  };
+}