[Maps] Map embeddable

src/legacy/core_plugins/inspector_views/public/requests/request_selector.js

@@ -116,6 +116,7 @@ class RequestSelector extends Component {
       >
         <EuiContextMenuPanel
           items={this.props.requests.map(this.renderRequestDropdownItem)}
+          data-test-subj="inspectorRequestChooserMenuPanel"
         />
       </EuiPopover>
     );
@@ -140,7 +141,7 @@ class RequestSelector extends Component {
         </EuiFlexItem>
         <EuiFlexItem grow={true}>
           {requests.length <= 1 &&
-            <div className="insRequestSelector__singleRequest">
+            <div className="insRequestSelector__singleRequest" data-test-subj="inspectorRequestName">
               {selectedRequest.name}
             </div>
           }

src/legacy/ui/public/filter_bar/filter_editor/index.tsx

@@ -213,6 +213,7 @@ class FilterEditorUI extends Component<Props, State> {
               onChange={this.onIndexPatternChange}
               singleSelection={{ asPlainText: true }}
               isClearable={false}
+              data-test-subj="filterIndexPatternsSelect"
             />
           </EuiFormRow>
         </EuiFlexItem>

test/functional/services/dashboard/panel_actions.js

@@ -88,6 +88,11 @@ export function DashboardPanelActionsProvider({ getService, getPageObjects }) {
       await testSubjects.click(CUSTOMIZE_PANEL_DATA_TEST_SUBJ);
     }
 
+    async openInspectorByTitle(title) {
+      const header = await this.getPanelHeading(title);
+      await this.openInspector(header);
+    }
+
     async openInspector(parent) {
       await this.openContextMenu(parent);
       await testSubjects.click(OPEN_INSPECTOR_TEST_SUBJ);

test/functional/services/filter_bar.js

@@ -127,6 +127,18 @@ export function FilterBarProvider({ getService, getPageObjects }) {
         await testSubjects.click('cancelSaveFilter');
       }
     }
+
+    async getIndexPatterns() {
+      await testSubjects.click('addFilter');
+      const indexPatterns = await comboBox.getOptionsList('filterIndexPatternsSelect');
+      await this.ensureFieldEditorModalIsClosed();
+      return indexPatterns.trim().split('\n').join(',');
+    }
+
+    async selectIndexPattern(indexPatternTitle) {
+      await testSubjects.click('addFilter');
+      await comboBox.set('filterIndexPatternsSelect', indexPatternTitle);
+    }
   }
 
   return new FilterBar();

test/functional/services/inspector.js

@@ -140,5 +140,29 @@ export function InspectorProvider({ getService }) {
       });
       await renderable.waitForRender();
     }
+
+    async openInspectorView(viewId) {
+      log.debug(`Open Inspector view ${viewId}`);
+      await testSubjects.click('inspectorViewChooser');
+      await testSubjects.click(viewId);
+    }
+
+    async openInspectorRequestsView() {
+      await this.openInspectorView('inspectorViewChooserRequests');
+    }
+
+    async getRequestNames() {
+      await this.openInspectorRequestsView();
+      const requestChooserExists = await testSubjects.exists('inspectorRequestChooser');
+      if (requestChooserExists) {
+        await testSubjects.click('inspectorRequestChooser');
+        const menu = await testSubjects.find('inspectorRequestChooserMenuPanel');
+        const requestNames = await menu.getVisibleText();
+        return requestNames.trim().split('\n').join(',');
+      }
+
+      const singleRequest = await testSubjects.find('inspectorRequestName');
+      return await singleRequest.getVisibleText();
+    }
   };
 }

x-pack/plugins/maps/index.js

@@ -39,6 +39,9 @@ export function maps(kibana) {
           isEmsEnabled: mapConfig.includeElasticMapsService,
         };
       },
+      embeddableFactories: [
+        'plugins/maps/embeddable/map_embeddable_factory_provider'
+      ],
       inspectorViews: [
         'plugins/maps/inspector/views/register_views',
       ],

x-pack/plugins/maps/public/actions/store_actions.js

@@ -479,7 +479,7 @@ export function removeLayer(id) {
   };
 }
 
-export function setQuery({ query, timeFilters }) {
+export function setQuery({ query, timeFilters, filters = [] }) {
   return async (dispatch, getState) => {
     dispatch({
       type: SET_QUERY,
@@ -489,6 +489,7 @@ export function setQuery({ query, timeFilters }) {
         // ensure query changes to trigger re-fetch even when query is the same because "Refresh" clicked
         queryLastTriggeredAt: (new Date()).toISOString(),
       },
+      filters,
     });
 
     const dataFilters = getDataFilters(getState());

x-pack/plugins/maps/public/angular/services/gis_map_saved_object_loader.js

@@ -7,17 +7,9 @@
 import './saved_gis_map';
 import { uiModules } from 'ui/modules';
 import { SavedObjectLoader, SavedObjectsClientProvider } from 'ui/saved_objects';
-import { SavedObjectRegistryProvider } from 'ui/saved_objects/saved_object_registry';
 
 const module = uiModules.get('app/maps');
 
-// Register this service with the saved object registry so it can be
-// edited by the object editor.
-SavedObjectRegistryProvider.register({
-  service: 'gisMapSavedObjectLoader',
-  title: 'gisMaps'
-});
-
 // This is the only thing that gets injected into controllers
 module.service('gisMapSavedObjectLoader', function (Private, SavedGisMap, kbnIndex, kbnUrl, $http, chrome) {
   const savedObjectClient = Private(SavedObjectsClientProvider);

x-pack/plugins/maps/public/angular/services/saved_gis_map.js

@@ -39,6 +39,15 @@ module.factory('SavedGisMap', function (Private) {
         });
 
         savedObject.layerListJSON = attributes.layerListJSON;
+
+        const indexPatternIds = references
+          .filter(reference => {
+            return reference.type === 'index-pattern';
+          })
+          .map(reference => {
+            return reference.id;
+          });
+        savedObject.indexPatternIds = _.uniq(indexPatternIds);
       },
 
       // if this is null/undefined then the SavedObject will be assigned the defaults

x-pack/plugins/maps/public/components/map/mb/view.js

@@ -93,8 +93,7 @@ export class MBMapContainer extends React.Component {
       originalMbBoxRemoveLayerFunc.apply(this._mbMap, [id]);
     };
 
-    this.assignSizeWatch();
-
+    this._initResizerChecker();
 
     // moveend callback is debounced to avoid updating map extent state while map extent is still changing
     // moveend is fired while the map extent is still changing in the following scenarios
@@ -149,20 +148,11 @@ export class MBMapContainer extends React.Component {
     }
   }
 
-  assignSizeWatch() {
+  _initResizerChecker() {
     this._checker = new ResizeChecker(this.refs.mapContainer);
-    this._checker.on('resize', (() => {
-      let lastWidth = window.innerWidth;
-      let lastHeight = window.innerHeight;
-      return () => {
-        if (lastWidth === window.innerWidth
-          && lastHeight === window.innerHeight && this._mbMap) {
-          this._mbMap.resize();
-        }
-        lastWidth = window.innerWidth;
-        lastHeight = window.innerHeight;
-      };
-    })());
+    this._checker.on('resize', () => {
+      this._mbMap.resize();
+    });
   }
 
   _syncMbMapWithMapState = () => {

x-pack/plugins/maps/public/embeddable/map_embeddable.js

@@ -0,0 +1,114 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import _ from 'lodash';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render, unmountComponentAtNode } from 'react-dom';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+import { Embeddable } from 'ui/embeddable';
+import { I18nContext } from 'ui/i18n';
+
+import { GisMap } from '../components/gis_map';
+import { createMapStore } from '../store/store';
+import { getInitialLayers } from '../angular/get_initial_layers';
+import {
+  setGotoWithCenter,
+  replaceLayerList,
+  setQuery,
+  setRefreshConfig,
+} from '../actions/store_actions';
+import { setReadOnly } from '../store/ui';
+import { getInspectorAdapters } from '../store/non_serializable_instances';
+
+export class MapEmbeddable extends Embeddable {
+
+  constructor({ savedMap, editUrl, indexPatterns = [] }) {
+    super({ title: savedMap.title, editUrl, indexPatterns });
+
+    this._savedMap = savedMap;
+    this._store = createMapStore();
+  }
+
+  getInspectorAdapters() {
+    return getInspectorAdapters(this._store.getState());
+  }
+
+  onContainerStateChanged(containerState) {
+    if (!_.isEqual(containerState.timeRange, this._prevTimeRange) ||
+        !_.isEqual(containerState.query, this._prevQuery) ||
+        !_.isEqual(containerState.filters, this._prevFilters)) {
+      this._dispatchSetQuery(containerState);
+    }
+
+    if (!_.isEqual(containerState.refreshConfig, this._prevRefreshConfig)) {
+      this._dispatchSetRefreshConfig(containerState);
+    }
+  }
+
+  _dispatchSetQuery({ query, timeRange, filters }) {
+    this._prevTimeRange = timeRange;
+    this._prevQuery = query;
+    this._prevFilters = filters;
+    this._store.dispatch(setQuery({
+      filters: filters.filter(filter => !filter.meta.disabled),
+      query,
+      timeFilters: timeRange,
+    }));
+  }
+
+  _dispatchSetRefreshConfig({ refreshConfig }) {
+    this._prevRefreshConfig = refreshConfig;
+    this._store.dispatch(setRefreshConfig(refreshConfig));
+  }
+
+  /**
+   *
+   * @param {HTMLElement} domNode
+   * @param {ContainerState} containerState
+   */
+  render(domNode, containerState) {
+    this._store.dispatch(setReadOnly(true));
+    // todo get center and zoom from embeddable UI state
+    if (this._savedMap.mapStateJSON) {
+      const mapState = JSON.parse(this._savedMap.mapStateJSON);
+      this._store.dispatch(setGotoWithCenter({
+        lat: mapState.center.lat,
+        lon: mapState.center.lon,
+        zoom: mapState.zoom,
+      }));
+    }
+    const layerList = getInitialLayers(this._savedMap.layerListJSON);
+    this._store.dispatch(replaceLayerList(layerList));
+    this._dispatchSetQuery(containerState);
+    this._dispatchSetRefreshConfig(containerState);
+
+    render(
+      <Provider store={this._store}>
+        <I18nContext>
+          <GisMap/>
+        </I18nContext>
+      </Provider>,
+      domNode
+    );
+  }
+
+  destroy() {
+    this._savedMap.destroy();
+    if (this._domNode) {
+      unmountComponentAtNode(this._domNode);
+    }
+  }
+
+  reload() {
+    this._dispatchSetQuery({
+      query: this._prevQuery,
+      timeRange: this._prevTimeRange,
+      filters: this._prevFilters
+    });
+  }
+}

x-pack/plugins/maps/public/embeddable/map_embeddable_factory.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import _ from 'lodash';
+import chrome from 'ui/chrome';
+import { EmbeddableFactory } from 'ui/embeddable';
+import { MapEmbeddable } from './map_embeddable';
+import { indexPatternService } from '../kibana_services';
+
+export class MapEmbeddableFactory extends EmbeddableFactory {
+
+  constructor(gisMapSavedObjectLoader) {
+    super({ name: 'map' });
+    this._savedObjectLoader = gisMapSavedObjectLoader;
+  }
+
+  async _getIndexPatterns(indexPatternIds = []) {
+    const promises = indexPatternIds.map(async (indexPatternId) => {
+      try {
+        return await indexPatternService.get(indexPatternId);
+      } catch (error) {
+        // Unable to load index pattern, better to not throw error so map embeddable can render
+        // Error will be surfaced by map embeddable since it too will be unable to locate the index pattern
+        return null;
+      }
+    });
+    const indexPatterns = await Promise.all(promises);
+    return _.compact(indexPatterns);
+  }
+
+  async create(panelMetadata, onEmbeddableStateChanged) {
+    const savedMap = await this._savedObjectLoader.get(panelMetadata.id);
+    const indexPatterns = await this._getIndexPatterns(savedMap.indexPatternIds);
+
+    return new MapEmbeddable({
+      onEmbeddableStateChanged,
+      savedMap,
+      editUrl: chrome.addBasePath(`/app/maps#/map/${panelMetadata.id}`),
+      indexPatterns,
+    });
+  }
+}

x-pack/plugins/maps/public/embeddable/map_embeddable_factory_provider.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EmbeddableFactoriesRegistryProvider } from 'ui/embeddable/embeddable_factories_registry';
+import { MapEmbeddableFactory } from './map_embeddable_factory';
+import '../angular/services/gis_map_saved_object_loader';
+
+function mapEmbeddableFactoryProvider(gisMapSavedObjectLoader) {
+  return new MapEmbeddableFactory(gisMapSavedObjectLoader);
+}
+
+EmbeddableFactoriesRegistryProvider.register(mapEmbeddableFactoryProvider);

x-pack/plugins/maps/public/index.js

@@ -14,6 +14,7 @@ import 'uiExports/autocompleteProviders';
 import 'uiExports/fieldFormats';
 import 'uiExports/inspectorViews';
 import 'uiExports/search';
+import 'uiExports/embeddableFactories';
 import 'ui/agg_types';
 
 import chrome from 'ui/chrome';