Merge branch 'master' of github.com:elastic/kibana into implement/typ…

…escript

docs/visualize/time-series-visual-builder.asciidoc

@@ -12,7 +12,7 @@ image:images/tsvb-screenshot.png["Time Series Visual Builder Interface"]
 
 === Featured Visualizations
 
-Time Series Visual Build comes with 5 different visualization types. You can
+Time Series Visual Build comes with 6 different visualization types. You can
 switch between each visualization type using the tabbed picker at the top of the
 interface.
 
@@ -65,6 +65,14 @@ template syntax to customize the Markdown with data based on a set of series.
 image:images/tsvb-markdown.png["Markdown Visualization"]
 
 
+==== Table
+
+A table visualization allows you to display data from multiple time series.
+You define which field group to show in the rows and what columns of data to display.
+
+image:images/tsvb-table.png["Table Visualization"]
+
+
 === Interface Overview
 
 The user interface for each visualization is compose of a "Data" tab and "Panel

packages/kbn-eslint-import-resolver-kibana/import_resolver_kibana.js

@@ -34,11 +34,17 @@ function initContext(file, config) {
 }
 
 function tryNodeResolver(importRequest, file, config) {
-  return nodeResolver.resolve(importRequest, file, {
-    ...config,
-    extensions: ['.js', '.json', '.ts', '.tsx'],
-    isFile,
-  });
+  return nodeResolver.resolve(
+    importRequest,
+    file,
+    // we use Object.assign so that this file is compatible with slightly older
+    // versions of node.js used by IDEs (eg. resolvers are run in the Electron
+    // process in Atom)
+    Object.assign({}, config, {
+      extensions: ['.js', '.json', '.ts', '.tsx'],
+      isFile,
+    })
+  );
 }
 
 exports.resolve = function resolveKibanaPath(importRequest, file, config) {

src/core_plugins/kibana/public/visualize/saved_visualizations/_saved_vis.js

@@ -78,17 +78,6 @@ uiModules
           self.searchSource.size(0);
 
           return self.vis ? self._updateVis() : self._createVis();
-        })
-        .then(function () {
-          self.searchSource.onRequestStart((searchSource, searchRequest) => {
-            return self.vis.onSearchRequestStart(searchSource, searchRequest);
-          });
-
-          self.searchSource.aggs(function () {
-            return self.vis.aggs.toDsl();
-          });
-
-          return self;
         });
     };
 

src/ui/public/vis/editors/default/agg.html

@@ -37,6 +37,7 @@
       aria-label="Disable aggregation"
       tooltip="Disable aggregation"
       tooltip-append-to-body="true"
+      data-test-subj="disableAggregationBtn"
       type="button"
       class="kuiButton kuiButton--basic kuiButton--small">
       <i aria-hidden="true" class="fa fa-toggle-on"></i>

src/ui/public/vis/editors/default/agg_group.html

@@ -5,7 +5,7 @@
 
   <div ng-class="groupName" draggable-container="group" class="vis-editor-agg-group">
     <!-- wrapper needed for nesting-indicator -->
-    <div ng-repeat="agg in group track by agg.id" draggable-item="agg" class="vis-editor-agg-wrapper">
+    <div ng-repeat="agg in group track by agg.id" data-test-subj="aggregationEditor{{agg.id}}" draggable-item="agg" class="vis-editor-agg-wrapper">
       <!-- agg.html - controls for aggregation -->
       <ng-form vis-editor-agg name="aggForm" class="vis-editor-agg"></ng-form>
     </div>

src/ui/public/vis/request_handlers/courier.js

@@ -61,6 +61,14 @@ const CourierRequestHandlerProvider = function (Private, courier, timefilter) {
         }
       });
 
+      requestSearchSource.aggs(function () {
+        return vis.getAggConfig().toDsl();
+      });
+
+      requestSearchSource.onRequestStart((searchSource, searchRequest) => {
+        return vis.onSearchRequestStart(searchSource, searchRequest);
+      });
+
       // Add the explicit passed timeRange as a filter to the requestSearchSource.
       requestSearchSource.filter(() => {
         return timefilter.get(searchSource.index(), timeRange);
@@ -77,7 +85,7 @@ const CourierRequestHandlerProvider = function (Private, courier, timefilter) {
         if (!searchSource.lastQuery || vis.reload) return true;
         if (!_.isEqual(_.cloneDeep(searchSource.get('filter')), searchSource.lastQuery.filter)) return true;
         if (!_.isEqual(_.cloneDeep(searchSource.get('query')), searchSource.lastQuery.query)) return true;
-        if (!_.isEqual(calculateObjectHash(vis.aggs.getRequestAggs()), searchSource.lastQuery.aggs)) return true;
+        if (!_.isEqual(calculateObjectHash(vis.getAggConfig()), searchSource.lastQuery.aggs)) return true;
         if (!_.isEqual(_.cloneDeep(timeRange), searchSource.lastQuery.timeRange)) return true;
 
         return false;
@@ -90,7 +98,7 @@ const CourierRequestHandlerProvider = function (Private, courier, timefilter) {
             searchSource.lastQuery = {
               filter: _.cloneDeep(searchSource.get('filter')),
               query: _.cloneDeep(searchSource.get('query')),
-              aggs: calculateObjectHash(vis.aggs.getRequestAggs()),
+              aggs: calculateObjectHash(vis.getAggConfig()),
               timeRange: _.cloneDeep(timeRange)
             };
 

test/functional/apps/visualize/_vertical_bar_chart.js

@@ -9,7 +9,7 @@ export default function ({ getService, getPageObjects }) {
     const fromTime = '2015-09-19 06:31:44.000';
     const toTime = '2015-09-23 18:31:44.000';
 
-    beforeEach(function () {
+    const initBarChart = () => {
       log.debug('navigateToApp visualize');
       return PageObjects.common.navigateToUrl('visualize', 'new')
         .then(function () {
@@ -45,11 +45,13 @@ export default function ({ getService, getPageObjects }) {
         .then(function waitForVisualization() {
           return PageObjects.visualize.waitForVisualization();
         });
-    });
+    };
 
     describe('vertical bar chart', function indexPatternCreation() {
       const vizName1 = 'Visualization VerticalBarChart';
 
+      before(initBarChart);
+
       it('should save and load', function () {
         return PageObjects.visualize.saveVisualization(vizName1)
           .then(() => {
@@ -120,6 +122,8 @@ export default function ({ getService, getPageObjects }) {
     });
 
     describe('vertical bar with split series', function () {
+      before(initBarChart);
+
       it('should show correct series', async function () {
         await PageObjects.visualize.toggleOpenEditor(2, 'false');
         await PageObjects.visualize.clickAddBucket();
@@ -139,6 +143,8 @@ export default function ({ getService, getPageObjects }) {
     });
 
     describe('vertical bar with multiple splits', function () {
+      before(initBarChart);
+
       it('should show correct series', async function () {
         await PageObjects.visualize.toggleOpenEditor(2, 'false');
         await PageObjects.visualize.clickAddBucket();
@@ -166,9 +172,21 @@ export default function ({ getService, getPageObjects }) {
         const legendEntries = await PageObjects.visualize.getLegendEntries();
         expect(legendEntries).to.eql(expectedEntries);
       });
+
+      it('should show correct series when disabling first agg', async function () {
+        await PageObjects.visualize.toggleDisabledAgg(3);
+        await PageObjects.visualize.clickGo();
+        await PageObjects.header.waitUntilLoadingHasFinished();
+
+        const expectedEntries = [ 'win 8', 'win xp', 'ios', 'osx', 'win 7' ];
+        const legendEntries = await PageObjects.visualize.getLegendEntries();
+        expect(legendEntries).to.eql(expectedEntries);
+      });
     });
 
     describe('vertical bar with derivative', function () {
+      before(initBarChart);
+
       it('should show correct series', async function () {
         await PageObjects.visualize.toggleOpenEditor(2, 'false');
         await PageObjects.visualize.toggleOpenEditor(1);
@@ -186,6 +204,7 @@ export default function ({ getService, getPageObjects }) {
         const legendEntries = await PageObjects.visualize.getLegendEntries();
         expect(legendEntries).to.eql(expectedEntries);
       });
+
     });
   });
 }

test/functional/page_objects/visualize_page.js

@@ -520,6 +520,10 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
       await input.type(newValue);
     }
 
+    async toggleDisabledAgg(agg) {
+      await testSubjects.click(`aggregationEditor${agg} disableAggregationBtn`);
+    }
+
     async toggleOtherBucket() {
       return await find.clickByCssSelector('input[name="showOther"]');
     }

x-pack/plugins/ml/public/app.js

@@ -27,6 +27,7 @@ import 'plugins/ml/explorer';
 import 'plugins/ml/timeseriesexplorer';
 import 'plugins/ml/components/form_label';
 import 'plugins/ml/components/json_tooltip';
+import 'plugins/ml/components/tooltip';
 import 'plugins/ml/components/confirm_modal';
 import 'plugins/ml/components/nav_menu';
 import 'plugins/ml/components/loading_indicator';

x-pack/plugins/ml/public/components/field_data_card/field_data_card.html

@@ -1,11 +1,9 @@
 <div class="ml-field-data-card">
   <div class="euiText title-bar" ng-class="card.fieldName===undefined ? 'document_count': card.isUnsupportedType===true ? 'type-other' : card.type">
     <ml-field-type-icon
-        type="card.type"
-        tooltip="{{ card.type }}"
-        tooltip-placement="left"
-        tooltip-append-to-body="true">
-    </ml-field-type-icon>
+      type="card.type"
+      tooltip-enabled="true"
+    />
     <div
       class="field-name"
       tooltip="{{ mlEscape(card.fieldName) || 'document count' }}"

x-pack/plugins/ml/public/components/field_type_icon/__snapshots__/field_type_icon_view.test.js.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FieldTypeIcon render component inside tooltip wrapper 1`] = `
+<EuiToolTip
+  content="keyword"
+  position="left"
+>
+  <span>
+    <FieldTypeIconContainer
+      ariaLabel="Aggregatable string field"
+      className="field-type-icon"
+      iconChar="t"
+    />
+  </span>
+</EuiToolTip>
+`;
+
+exports[`FieldTypeIcon render component when type matches a field type 1`] = `
+<FieldTypeIconContainer
+  ariaLabel="Aggregatable string field"
+  className="field-type-icon"
+  iconChar="t"
+/>
+`;
+
+exports[`FieldTypeIcon update component 1`] = `
+<FieldTypeIconContainer
+  ariaLabel="Aggregatable string field"
+  className="field-type-icon"
+  iconChar="t"
+/>
+`;

x-pack/plugins/ml/public/components/field_type_icon/field_type_icon_directive.js

@@ -6,22 +6,38 @@
 
 
 
-import template from './field_type_icon.html';
-import { ML_JOB_FIELD_TYPES } from 'plugins/ml/../common/constants/field_types';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { FieldTypeIcon } from './field_type_icon_view.js';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
 
 module.directive('mlFieldTypeIcon', function () {
   return {
     restrict: 'E',
-    replace: true,
+    replace: false,
     scope: {
+      tooltipEnabled: '=',
       type: '='
     },
-    template,
-    controller: function ($scope) {
-      $scope.ML_JOB_FIELD_TYPES = ML_JOB_FIELD_TYPES;
+    link: function (scope, element) {
+      scope.$watch('type', updateComponent);
+
+      updateComponent();
+
+      function updateComponent() {
+        const props = {
+          tooltipEnabled: scope.tooltipEnabled,
+          type: scope.type
+        };
+
+        ReactDOM.render(
+          React.createElement(FieldTypeIcon, props),
+          element[0]
+        );
+      }
     }
   };
 });