Add EMS hot link (#21154)

Adds a dynamic hyperlink to the EMS landing page for EMS vector layers selected in the vector layer drop down of region maps.

src/core_plugins/kibana/public/visualize/editor/styles/_editor.less

@@ -444,6 +444,10 @@ vis-editor-vis-options > * {
   .flex-parent();
 }
 
+.vis-editor-config .ems-hotlink {
+  font-size: 12px;
+}
+
 /**
    * 1. TODO: Override bootstrap styles. Remove !important once we're rid of bootstrap.
    */
@@ -485,3 +489,5 @@ vis-editor-vis-options > * {
 .agg-select-help {
   float: right;
 }
+
+

src/core_plugins/region_map/public/region_map_vis.js

@@ -33,7 +33,7 @@ VisTypesRegistryProvider.register(function RegionMapProvider(Private, regionmaps
   const VisFactory = Private(VisFactoryProvider);
   const RegionMapsVisualization = Private(RegionMapsVisualizationProvider);
 
-  const vectorLayers = regionmapsConfig.layers.map(mapToLayerWithId.bind(null, 'self_hosted'));
+  const vectorLayers = regionmapsConfig.layers.map(mapToLayerWithId.bind(null, 'self_hosted', false));
   const selectedLayer = vectorLayers[0];
   const selectedJoinField = selectedLayer ? vectorLayers[0].fields[0] : null;
 
@@ -50,6 +50,7 @@ VisTypesRegistryProvider.register(function RegionMapProvider(Private, regionmaps
         addTooltip: true,
         colorSchema: 'Yellow to Red',
         selectedLayer: selectedLayer,
+        emsHotLink: '',
         selectedJoinField: selectedJoinField,
         isDisplayWarning: true,
         wms: config.get('visualization:tileMap:WMSdefaults'),

src/core_plugins/region_map/public/region_map_vis_params.html

@@ -21,6 +21,18 @@
       </div>
     </div>
 
+    <div class="kuiSideBarFormRow" ng-hide="!editorState.params.emsHotLink">
+        <a
+          class="ems-hotlink"
+          target="_blank"
+          rel="noopener noreferrer"
+          ng-href="{{editorState.params.emsHotLink}}"
+          target="_blank"
+          title="Preview {{editorState.params.selectedLayer.name}} on the Elastic Maps Service"
+        >Preview on EMS
+        </a>
+    </div>
+
     <div class="kuiSideBarFormRow">
       <label class="kuiSideBarFormRow__label" for="joinField">
         Join field

src/core_plugins/region_map/public/region_map_vis_params.js

@@ -38,7 +38,7 @@ uiModules.get('kibana/region_map')
           serviceSettings.getFileLayers()
             .then(function (layersFromService) {
 
-              layersFromService = layersFromService.map(mapToLayerWithId.bind(null, 'elastic_maps_service'));
+              layersFromService = layersFromService.map(mapToLayerWithId.bind(null, 'elastic_maps_service', true));
               const newVectorLayers = $scope.collections.vectorLayers.slice();
               for (let i = 0; i < layersFromService.length; i += 1) {
                 const layerFromService = layersFromService[i];
@@ -87,9 +87,22 @@ uiModules.get('kibana/region_map')
         }
 
         function onLayerChange() {
+
+          if (!$scope.editorState.params.selectedLayer) {
+            return;
+          }
+
           $scope.editorState.params.selectedJoinField = $scope.editorState.params.selectedLayer.fields[0];
+
+          if ($scope.editorState.params.selectedLayer.isEMS) {
+            $scope.editorState.params.emsHotLink = serviceSettings.getEMSHotLink($scope.editorState.params.selectedLayer);
+          } else {
+            $scope.editorState.params.emsHotLink = null;
+          }
         }
 
+        onLayerChange();
+
       }
     };
   });

src/core_plugins/region_map/public/util.js

@@ -19,8 +19,9 @@
 
 import _ from 'lodash';
 
-export function mapToLayerWithId(prefix, layer) {
+export function mapToLayerWithId(prefix, isEMS, layer) {
   const clonedLayer = _.cloneDeep(layer);
   clonedLayer.layerId = prefix + '.' + layer.name;
+  clonedLayer.isEMS = isEMS;
   return clonedLayer;
 }

src/server/config/schema.js

@@ -228,6 +228,7 @@ export default async () => Joi.object({
       }))
     }).default(),
     manifestServiceUrl: Joi.string().default(' https://catalogue.maps.elastic.co/v2/manifest'),
+    emsLandingPageUrl: Joi.string().default('https://maps.elastic.co/v2'),
     includeElasticMapsService: Joi.boolean().default(true)
   }).default(),
   tilemap: Joi.object({

src/ui/public/vis/map/service_settings.js

@@ -183,6 +183,11 @@ uiModules.get('kibana')
           }
         }
       }
+
+      getEMSHotLink(fileLayer) {
+        const id = `file/${fileLayer.name}`;
+        return `${mapConfig.emsLandingPageUrl}#${id}`;
+      }
     }
 
     return new ServiceSettings();