Add registry for doc table details

src/plugins/kibana/index.js

@@ -22,7 +22,8 @@ module.exports = function (kibana) {
           'spyModes',
           'fieldFormats',
           'navbarExtensions',
-          'settingsSections'
+          'settingsSections',
+          'docTableDetailViews'
         ],
 
         injectVars: function (server, options) {

src/ui/public/doc_viewer/doc_viewer.js

@@ -1,47 +1,52 @@
 import _ from 'lodash';
-import angular from 'angular';
-import 'ace';
-import html from 'ui/doc_viewer/doc_viewer.html';
+import $ from 'jquery';
 import 'ui/doc_viewer/doc_viewer.less';
-define(function (require) {
 
+import 'ui/doc_viewer/viewers/table.js';
+import 'ui/doc_viewer/viewers/json.js';
+
+define(function (require) {
 
   require('ui/modules').get('kibana')
   .directive('docViewer', function (config, Private) {
+    const docTableDetailViews = Private(require('ui/registry/doc_table_detail_views'));
     return {
       restrict: 'E',
-      template: html,
       scope: {
         hit: '=',
         indexPattern: '=',
         filter: '=?',
         columns: '=?'
       },
-      link: {
-        pre($scope) {
-          $scope.aceLoaded = (editor) => {
-            editor.$blockScrolling = Infinity;
-          };
-        },
-
-        post($scope, $el, attr) {
-          // If a field isn't in the mapping, use this
-          $scope.mode = 'table';
-          $scope.mapping = $scope.indexPattern.fields.byName;
-          $scope.flattened = $scope.indexPattern.flattenHit($scope.hit);
-          $scope.hitJson = angular.toJson($scope.hit, true);
-          $scope.formatted = $scope.indexPattern.formatHit($scope.hit);
-          $scope.fields = _.keys($scope.flattened).sort();
-
-          $scope.toggleColumn = function (fieldName) {
-            _.toggleInOut($scope.columns, fieldName);
-          };
+      template: function ($el, $attr) {
+        const $viewer = $('<div class="doc-viewer">');
+        $el.append($viewer);
+        const $tabs = $('<ul class="nav nav-tabs">');
+        const $content = $('<div class="doc-viewer-content">');
+        $viewer.append($tabs);
+        $viewer.append($content);
+        docTableDetailViews.inOrder.forEach(view => {
+          const $tab = $(`<li ng-show="docViews['${view.title}'].shouldShow(hit)" ng-class="{active: mode == '${view.title}'}">
+              <a ng-click="mode='${view.title}'">${view.title}</a>
+            </li>`);
+          $tabs.append($tab);
+          const $ext = $(`<render-directive ng-show="mode == '${view.title}'" definition="docViews['${view.title}']" scope="innerScope">
+            </render-directive>`);
+          $ext.html(view.template);
+          $content.append($ext);
+        });
+        return $el.html();
+      },
+      controller: function ($scope) {
+        $scope.mode = docTableDetailViews.inOrder[0].title;
+        $scope.docViews = docTableDetailViews.byTitle;
 
-          $scope.showArrayInObjectsWarning = function (row, field) {
-            var value = $scope.flattened[field];
-            return _.isArray(value) && typeof value[0] === 'object';
-          };
-        }
+        $scope.innerScope = {
+          hit: $scope.hit,
+          indexPattern: $scope.indexPattern,
+          filter: $scope.filter,
+          columns: $scope.columns
+        };
       }
     };
   });

src/ui/public/doc_viewer/viewers/json.html

@@ -0,0 +1,16 @@
+<div
+  id="json-ace"
+  ng-model="hitJson"
+  readonly
+  ui-ace="{
+    useWrapMode: true,
+    onLoad: aceLoaded,
+    advanced: {
+      highlightActiveLine: false
+    },
+    rendererOptions: {
+      showPrintMargin: false,
+      maxLines: 4294967296
+    },
+    mode: 'json'
+  }"></div>

src/ui/public/doc_viewer/viewers/json.js

@@ -0,0 +1,27 @@
+import _ from 'lodash';
+import angular from 'angular';
+import 'ace';
+import docTableDetailViewsRegistry from 'ui/registry/doc_table_detail_views';
+
+import jsonHtml from './json.html';
+
+docTableDetailViewsRegistry.register(function () {
+  return {
+    title: 'JSON',
+    order: 20,
+    template: jsonHtml,
+    shouldShow: () => true,
+    controller: function ($scope) {
+      $scope.indexPattern = $scope.scope.indexPattern;
+      $scope.hit = $scope.scope.hit;
+      $scope.columns = $scope.scope.columns;
+      $scope.filter = $scope.scope.filter;
+
+      $scope.hitJson = angular.toJson($scope.hit, true);
+
+      $scope.aceLoaded = (editor) => {
+        editor.$blockScrolling = Infinity;
+      };
+    }
+  };
+});

src/ui/public/doc_viewer/viewers/table.html

@@ -0,0 +1,49 @@
+<table class="table table-condensed">
+  <tbody>
+    <tr ng-repeat="field in fields">
+      <td field-name="field"
+          field-type="mapping[field].type"
+          width="1%"
+          class="doc-viewer-field">
+      </td>
+      <td width="1%" class="doc-viewer-buttons" ng-if="filter">
+        <span ng-if="mapping[field].filterable">
+          <i ng-click="filter(mapping[field], flattened[field], '+')"
+            tooltip="Filter for value"
+            tooltip-append-to-body="1"
+            class="fa fa-search-plus"></i>
+          <i ng-click="filter(mapping[field], flattened[field],'-')"
+            tooltip="Filter out value"
+            tooltip-append-to-body="1"
+            class="fa fa-search-minus"></i>
+        </span>
+        <span ng-if="!mapping[field].filterable" tooltip="Unindexed fields can not be searched">
+          <i class="fa fa-search-plus text-muted"></i>
+          <i class="fa fa-search-minus text-muted"></i>
+        </span>
+        <span ng-if="columns">
+          <i ng-click="toggleColumn(field)"
+            tooltip="Toggle column in table"
+            tooltip-append-to-body="1"
+            class="fa fa-columns"></i>
+        </span>
+      </td>
+
+      <td>
+        <i ng-if="!mapping[field] && field[0] === '_'"
+          tooltip-placement="top"
+          tooltip="Field names beginning with _ are not supported"
+          class="fa fa-warning text-color-warning ng-scope doc-viewer-underscore"></i>
+        <i ng-if="!mapping[field] && field[0] !== '_' && !showArrayInObjectsWarning(doc, field)"
+          tooltip-placement="top"
+          tooltip="No cached mapping for this field. Refresh field list from the Settings > Indices page"
+          class="fa fa-warning text-color-warning ng-scope doc-viewer-no-mapping"></i>
+        <i ng-if="showArrayInObjectsWarning(doc, field)"
+          tooltip-placement="top"
+          tooltip="Objects in arrays are not well supported."
+          class="fa fa-warning text-color-warning ng-scope doc-viewer-object-array"></i>
+        <div class="doc-viewer-value" ng-bind-html="typeof(formatted[field]) === 'undefined' ? hit[field] : formatted[field] | trustAsHtml"></div>
+      </td>
+    </tr>
+  </tbody>
+</table>

src/ui/public/doc_viewer/viewers/table.js

@@ -0,0 +1,33 @@
+import _ from 'lodash';
+import docTableDetailViewsRegistry from 'ui/registry/doc_table_detail_views';
+
+import tableHtml from './table.html';
+
+docTableDetailViewsRegistry.register(function () {
+  return {
+    title: 'Table',
+    order: 10,
+    template: tableHtml,
+    shouldShow: () => true,
+    controller: function ($scope) {
+      $scope.indexPattern = $scope.scope.indexPattern;
+      $scope.hit = $scope.scope.hit;
+      $scope.columns = $scope.scope.columns;
+      $scope.filter = $scope.scope.filter;
+
+      $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.toggleColumn = function (fieldName) {
+        _.toggleInOut($scope.columns, fieldName);
+      };
+
+      $scope.showArrayInObjectsWarning = function (row, field) {
+        var value = $scope.flattened[field];
+        return _.isArray(value) && typeof value[0] === 'object';
+      };
+    }
+  };
+});

src/ui/public/registry/doc_table_detail_views.js

@@ -0,0 +1,7 @@
+define(function (require) {
+  return require('ui/registry/_registry')({
+    name: 'docTableDetailViews',
+    index: ['title'],
+    order: ['order']
+  });
+});

src/ui/public/render_directive/render_directive.js

@@ -6,7 +6,8 @@ module.directive('renderDirective', function () {
   return {
     restrict: 'E',
     scope: {
-      'definition': '='
+      'definition': '=',
+      'scope': '=?'
     },
     template: function ($el, $attrs) {
       return $el.html();
@@ -27,4 +28,4 @@ module.directive('renderDirective', function () {
       }
     }
   };
-});
+});

src/ui/ui_exports.js

@@ -63,6 +63,7 @@ class UiExports {
       case 'chromeNavControls':
       case 'navbarExtensions':
       case 'settingsSections':
+      case 'docTableDetailViews':
         return (plugin, spec) => {
           this.aliases[type] = _.union(this.aliases[type] || [], spec);
         };