[Maps] Add layer - provide message when EMS is unavailable (#29909)

* [Maps] provide message when EMS is unavailable

* small fixes

x-pack/plugins/maps/index.js

@@ -27,6 +27,13 @@ export function maps(kibana) {
         icon: 'plugins/maps/icon.svg',
         euiIconType: 'gisApp',
       },
+      injectDefaultVars(server) {
+        const serverConfig = server.config();
+        const mapConfig = serverConfig.get('map');
+        return {
+          isEmsEnabled: mapConfig.includeElasticMapsService
+        };
+      },
       inspectorViews: [
         'plugins/maps/inspector/views/register_views',
       ],

x-pack/plugins/maps/public/shared/layers/sources/ems_file_source/create_source_editor.js

@@ -7,18 +7,18 @@
 
 import React from 'react';
 import {
-  EuiSelect,
+  EuiComboBox,
   EuiFormRow,
 } from '@elastic/eui';
 
 import { getEmsVectorFilesMeta } from '../../../../meta';
-
+import { getEmsUnavailableMessage } from '../ems_unavailable_message';
 
 export class EMSFileCreateSourceEditor extends React.Component {
 
-
   state = {
-    emsFileOptionsRaw: null
+    emsFileOptionsRaw: null,
+    selectedOption: null,
   };
 
   _loadFileOptions = async () => {
@@ -39,24 +39,41 @@ export class EMSFileCreateSourceEditor extends React.Component {
     this._loadFileOptions();
   }
 
+  _onChange = (selectedOptions) => {
+    if (selectedOptions.length === 0) {
+      return;
+    }
+
+    this.setState({ selectedOption: selectedOptions[0] });
+
+    const emsFileId = selectedOptions[0].value;
+    this.props.onChange(emsFileId);
+  }
+
   render() {
 
     if (!this.state.emsFileOptionsRaw) {
+      // TODO display loading message
       return null;
     }
 
-    const emsVectorOptions = this.state.emsFileOptionsRaw ? this.state.emsFileOptionsRaw.map((file) => ({
-      value: file.id,
-      text: file.name
-    })) : [];
-
+    const options = this.state.emsFileOptionsRaw.map(({ id, name }) => {
+      return { label: name, value: id };
+    });
 
     return (
-      <EuiFormRow label="Layer">
-        <EuiSelect
-          hasNoInitialSelection
-          options={emsVectorOptions}
-          onChange={this.props.onChange}
+      <EuiFormRow
+        label="Layer"
+        helpText={this.state.emsFileOptionsRaw.length === 0 ? getEmsUnavailableMessage() : null}
+      >
+        <EuiComboBox
+          placeholder="Select EMS vector shapes"
+          options={options}
+          selectedOptions={this.state.selectedOption ? [this.state.selectedOption] : []}
+          onChange={this._onChange}
+          isClearable={false}
+          singleSelection={true}
+          isDisabled={this.state.emsFileOptionsRaw.length === 0}
         />
       </EuiFormRow>
     );

x-pack/plugins/maps/public/shared/layers/sources/ems_file_source/ems_file_source.js

@@ -26,8 +26,7 @@ export class EMSFileSource extends AbstractVectorSource {
   }
 
   static renderEditor({ onPreviewSource }) {
-    const onChange = ({ target }) => {
-      const selectedId = target.options[target.selectedIndex].value;
+    const onChange = (selectedId) => {
       const emsFileSourceDescriptor = EMSFileSource.createDescriptor(selectedId);
       const emsFileSource = new EMSFileSource(emsFileSourceDescriptor);
       onPreviewSource(emsFileSource);

x-pack/plugins/maps/public/shared/layers/sources/ems_tms_source/create_source_editor.js

@@ -12,11 +12,10 @@ import {
 } from '@elastic/eui';
 
 import { getEmsTMSServices } from '../../../../meta';
-
+import { getEmsUnavailableMessage } from '../ems_unavailable_message';
 
 export class EMSTMSCreateSourceEditor extends React.Component {
 
-
   state = {
     emsTmsOptionsRaw: null
   };
@@ -42,6 +41,7 @@ export class EMSTMSCreateSourceEditor extends React.Component {
   render() {
 
     if (!this.state.emsTmsOptionsRaw) {
+      // TODO display loading message
       return null;
     }
 
@@ -52,11 +52,15 @@ export class EMSTMSCreateSourceEditor extends React.Component {
 
 
     return (
-      <EuiFormRow label="Tile service">
+      <EuiFormRow
+        label="Tile service"
+        helpText={this.state.emsTmsOptionsRaw.length === 0 ? getEmsUnavailableMessage() : null}
+      >
         <EuiSelect
           hasNoInitialSelection
           options={emsTileOptions}
           onChange={this.props.onChange}
+          disabled={this.state.emsTmsOptionsRaw.length === 0}
         />
       </EuiFormRow>
     );

x-pack/plugins/maps/public/shared/layers/sources/ems_unavailable_message.js

@@ -0,0 +1,23 @@
+/*
+ * 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 chrome from 'ui/chrome';
+
+const NO_EMS_ACCESS_MSG =
+  'Kibana is unable to access Elastic Maps Service. Contact your system administrator';
+
+const EMS_ACCESS_DISABLED_MSG =
+  'Access to Elastic Maps Service has been disabled.' +
+  ' Ask your system administrator to set "map.includeElasticMapsService" in kibana.yml.';
+
+export function getEmsUnavailableMessage() {
+  const isEmsEnabled = chrome.getInjected('isEmsEnabled', true);
+  if (isEmsEnabled) {
+    return NO_EMS_ACCESS_MSG;
+  }
+
+  return EMS_ACCESS_DISABLED_MSG;
+}

x-pack/plugins/maps/server/routes.js

@@ -54,8 +54,7 @@ export function initRoutes(server, licenseUid) {
       try {
         ems = await getEMSResources(licenseUid);
       } catch (e) {
-        console.error('Cannot connect to EMS');
-        console.error(e);
+        server.log('warning', `Cannot connect to EMS, error: ${e}`);
         ems = {
           fileLayers: [],
           tmsServices: []