fixing embedded mode in visualize (#21468)

src/core_plugins/kibana/public/visualize/editor/editor.html

@@ -66,12 +66,7 @@
     </div>
   </div>
 
-  <visualize
-    ng-if="!chrome.getVisible()"
-    saved-obj="savedVis"
-    ui-state="uiState"
-    time-range="timeRange"
-  />
+  <div class="visualize" ng-if="!chrome.getVisible()"/>
 
   <visualization-editor
     ng-if="chrome.getVisible()"

src/core_plugins/kibana/public/visualize/editor/editor.js

@@ -42,6 +42,7 @@ import { absoluteToParsedUrl } from 'ui/url/absolute_to_parsed_url';
 import { migrateLegacyQuery } from 'ui/utils/migrateLegacyQuery';
 import { recentlyAccessed } from 'ui/persisted_log';
 import { timefilter } from 'ui/timefilter';
+import { getVisualizeLoader } from '../../../../../ui/public/visualize/loader';
 
 uiRoutes
   .when(VisualizeConstants.CREATE_PATH, {
@@ -100,6 +101,7 @@ uiModules
 
 function VisEditor(
   $scope,
+  $element,
   $route,
   AppState,
   $window,
@@ -285,9 +287,23 @@ function VisEditor(
     };
 
     $scope.$on('$destroy', function () {
+      if ($scope._handler) {
+        $scope._handler.destroy();
+      }
       savedVis.destroy();
       stateMonitor.destroy();
     });
+
+    if (!$scope.chrome.getVisible()) {
+      getVisualizeLoader().then(loader => {
+        $scope._handler = loader.embedVisualizationWithSavedObject($element.find('.visualize')[0], savedVis, {
+          timeRange: $scope.timeRange,
+          uiState: $scope.uiState,
+          appState: $state,
+          listenOnChange: false
+        });
+      });
+    }
   }
 
   $scope.updateQueryAndFetch = function (query) {

test/functional/apps/visualize/_embedding_chart.js

@@ -0,0 +1,89 @@
+/*
+ * 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 expect from 'expect.js';
+
+export default function ({ getService, getPageObjects }) {
+  const filterBar = getService('filterBar');
+  const log = getService('log');
+  const visualization = getService('visualization');
+  const embedding = getService('embedding');
+  const PageObjects = getPageObjects(['common', 'visualize', 'header']);
+
+  const fromTime = '2015-09-19 06:31:44.000';
+  const toTime = '2015-09-23 18:31:44.000';
+
+  describe('embedding', () => {
+
+    describe('a data table', () => {
+      before(async function () {
+        await PageObjects.visualize.navigateToNewVisualization();
+        await PageObjects.visualize.clickDataTable();
+        await PageObjects.visualize.clickNewSearch();
+        await PageObjects.header.setAbsoluteRange(fromTime, toTime);
+        await PageObjects.visualize.clickBucket('Split Rows');
+        await PageObjects.visualize.selectAggregation('Histogram');
+        await PageObjects.visualize.selectField('bytes');
+        await PageObjects.visualize.setNumericInterval('2000');
+        await PageObjects.visualize.clickGo();
+      });
+
+      it('should allow opening table vis in embedded mode', async () => {
+        await embedding.openInEmbeddedMode();
+        await visualization.waitForRender();
+
+        const data = await PageObjects.visualize.getTableVisData();
+        log.debug(data.split('\n'));
+        expect(data.trim().split('\n')).to.be.eql([
+          '0B', '2,088',
+          '1.953KB', '2,748',
+          '3.906KB', '2,707',
+          '5.859KB', '2,876',
+          '7.813KB', '2,863',
+          '9.766KB', '147',
+          '11.719KB', '148',
+          '13.672KB', '129',
+          '15.625KB', '161',
+          '17.578KB', '137'
+        ]);
+      });
+
+      it('should allow to filter in embedded mode', async () => {
+        await filterBar.addFilter('@timestamp', 'is between', ['2015-09-19', '2015-09-21']);
+        await PageObjects.header.waitUntilLoadingHasFinished();
+        await visualization.waitForRender();
+
+        const data = await PageObjects.visualize.getTableVisData();
+        log.debug(data.split('\n'));
+        expect(data.trim().split('\n')).to.be.eql([
+          '0B', '708',
+          '1.953KB', '956',
+          '3.906KB', '935',
+          '5.859KB', '955',
+          '7.813KB', '953',
+          '9.766KB', '54',
+          '11.719KB', '56',
+          '13.672KB', '40',
+          '15.625KB', '51',
+          '17.578KB', '49'
+        ]);
+      });
+    });
+  });
+}

test/functional/apps/visualize/index.js

@@ -32,6 +32,7 @@ export default function ({ getService, loadTestFile }) {
       await kibanaServer.uiSettings.replace({ 'dateFormat:tz': 'UTC', 'defaultIndex': 'logstash-*' });
     });
 
+    loadTestFile(require.resolve('./_embedding_chart'));
     loadTestFile(require.resolve('./_inspector'));
     loadTestFile(require.resolve('./_chart_types'));
     loadTestFile(require.resolve('./_experimental_vis'));

test/functional/config.js

@@ -51,6 +51,7 @@ import {
   FlyoutProvider,
   ComboBoxProvider,
   VisualizationProvider,
+  EmbeddingProvider,
 } from './services';
 
 export default async function ({ readConfigFile }) {
@@ -107,6 +108,7 @@ export default async function ({ readConfigFile }) {
       flyout: FlyoutProvider,
       comboBox: ComboBoxProvider,
       visualization: VisualizationProvider,
+      embedding: EmbeddingProvider,
     },
     servers: commonConfig.get('servers'),
 

test/functional/services/embedding.js

@@ -0,0 +1,37 @@
+/*
+ * 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 function EmbeddingProvider({ getService, getPageObjects }) {
+  const remote = getService('remote');
+  const log = getService('log');
+  const PageObjects = getPageObjects(['header']);
+
+  class Embedding {
+
+    async openInEmbeddedMode() {
+      const currentUrl = await remote.getCurrentUrl();
+      log.debug(`Opening in embedded mode: ${currentUrl}`);
+      await remote.get(`${currentUrl}&embed=true`);
+      await PageObjects.header.waitUntilLoadingHasFinished();
+    }
+
+  }
+
+  return new Embedding();
+}

test/functional/services/index.js

@@ -27,6 +27,7 @@ export { ScreenshotsProvider } from './screenshots';
 export { FailureDebuggingProvider } from './failure_debugging';
 export { VisualizeListingTableProvider } from './visualize_listing_table';
 export { FlyoutProvider } from './flyout';
+export { EmbeddingProvider } from './embedding';
 export { ComboBoxProvider } from './combo_box';
 
 export * from './dashboard';