[Maps] show maps webgl error in generated reports (#36133) (#36388)

* [Maps] show maps webgl error in generated reports

* add data-shared-item prop

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

@@ -59,6 +59,7 @@ export const DRAW_TYPE = {
   POLYGON: 'POLYGON'
 };
 export const SET_SCROLL_ZOOM = 'SET_SCROLL_ZOOM';
+export const SET_MAP_INIT_ERROR = 'SET_MAP_INIT_ERROR';
 
 function getLayerLoadingCallbacks(dispatch, layerId) {
   return {
@@ -87,6 +88,13 @@ async function syncDataForAllLayers(getState, dispatch, dataFilters) {
   await Promise.all(syncs);
 }
 
+export function setMapInitError(errorMessage) {
+  return {
+    type: SET_MAP_INIT_ERROR,
+    errorMessage
+  };
+}
+
 export function trackCurrentLayerState(layerId) {
   return {
     type: TRACK_CURRENT_LAYER_STATE,

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

@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 import { GisMap } from './view';
 import { getFlyoutDisplay, getIsFullScreen, exitFullScreen, FLYOUT_STATE } from '../../store/ui';
 import { triggerRefreshTimer } from '../../actions/store_actions';
-import { getRefreshConfig } from '../../selectors/map_selectors';
+import { getRefreshConfig, getMapInitError } from '../../selectors/map_selectors';
 
 function mapStateToProps(state = {}) {
   const flyoutDisplay = getFlyoutDisplay(state);
@@ -18,6 +18,7 @@ function mapStateToProps(state = {}) {
     noFlyoutVisible: flyoutDisplay === FLYOUT_STATE.NONE,
     isFullScreen: getIsFullScreen(state),
     refreshConfig: getRefreshConfig(state),
+    mapInitError: getMapInitError(state),
   };
 }
 

x-pack/plugins/maps/public/components/gis_map/view.js

@@ -10,8 +10,9 @@ import { WidgetOverlay } from '../widget_overlay/index';
 import { ToolbarOverlay } from '../toolbar_overlay/index';
 import { LayerPanel } from '../layer_panel/index';
 import { AddLayerPanel } from '../layer_addpanel/index';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiCallOut } from '@elastic/eui';
 import { ExitFullScreenButton } from 'ui/exit_full_screen';
+import { i18n } from '@kbn/i18n';
 
 export class GisMap extends Component {
 
@@ -63,11 +64,29 @@ export class GisMap extends Component {
       noFlyoutVisible,
       isFullScreen,
       exitFullScreen,
+      mapInitError,
     } = this.props;
 
+    if (mapInitError) {
+      return (
+        <div data-render-complete data-shared-item>
+          <EuiCallOut
+            title={i18n.translate('xpack.maps.map.initializeErrorTitle', {
+              defaultMessage: 'Unable to initialize map'
+            })}
+            color="danger"
+            iconType="cross"
+          >
+            <p>
+              {mapInitError}
+            </p>
+          </EuiCallOut>
+        </div>
+      );
+    }
+
     let currentPanel;
     let currentPanelClassName;
-
     if (noFlyoutVisible) {
       currentPanel = null;
     } else if (addLayerVisible) {

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

@@ -14,6 +14,7 @@ import {
   clearMouseCoordinates,
   clearGoto,
   setTooltipState,
+  setMapInitError,
   updateDrawState
 } from '../../../actions/store_actions';
 import {
@@ -65,6 +66,9 @@ function mapDispatchToProps(dispatch) {
     setTooltipState(tooltipState) {
       dispatch(setTooltipState(tooltipState));
     },
+    setMapInitError(errorMessage) {
+      dispatch(setMapInitError(errorMessage));
+    },
     disableDrawState() {
       dispatch(updateDrawState(null));
     }

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

@@ -250,11 +250,13 @@ export class MBMapContainer extends React.Component {
   }
 
   componentDidUpdate() {
+    if (this._mbMap) {
       // do not debounce syncing of map-state and tooltip
       this._syncMbMapWithMapState();
       this._syncTooltipState();
       this._debouncedSync();
     }
+  }
 
   componentDidMount() {
     this._initializeMap();
@@ -299,12 +301,16 @@ export class MBMapContainer extends React.Component {
   }
 
   async _initializeMap() {
-
+    try {
       this._mbMap = await createMbMapInstance({
         node: this.refs.mapContainer,
         initialView: this.props.goto ? this.props.goto.center : null,
         scrollZoom: this.props.scrollZoom
       });
+    } catch(error) {
+      this.props.setMapInitError(error.message);
+      return;
+    }
 
     if (!this._isMounted) {
       return;

x-pack/plugins/maps/public/selectors/map_selectors.js

@@ -67,6 +67,8 @@ export const getTooltipState = ({ map }) => {
 
 export const getMapReady = ({ map }) => map && map.ready;
 
+export const getMapInitError = ({ map }) => map.mapInitError;
+
 export const getGoto = ({ map }) => map && map.goto;
 
 export const getSelectedLayerId = ({ map }) => {
@@ -150,7 +152,6 @@ export const getDataFilters = createSelector(
   }
 );
 
-
 export const getLayerList = createSelector(
   getLayerListRaw,
   getInspectorAdapters,

x-pack/plugins/maps/public/store/map.js

@@ -38,8 +38,9 @@ import {
   REMOVE_TRACKED_LAYER_STATE,
   UPDATE_SOURCE_DATA_REQUEST,
   SET_TOOLTIP_STATE,
+  SET_SCROLL_ZOOM,
+  SET_MAP_INIT_ERROR,
   UPDATE_DRAW_STATE,
-  SET_SCROLL_ZOOM
 } from '../actions/store_actions';
 
 import { copyPersistentState, TRACKED_LAYER_DESCRIPTOR } from './util';
@@ -87,6 +88,7 @@ const updateLayerSourceDescriptorProp = (state, layerId, propName, value) => {
 
 const INITIAL_STATE = {
   ready: false,
+  mapInitError: null,
   goto: null,
   tooltipState: null,
   mapState: {
@@ -317,6 +319,11 @@ export function map(state = INITIAL_STATE, action) {
           scrollZoom: action.scrollZoom,
         }
       };
+    case SET_MAP_INIT_ERROR:
+      return {
+        ...state,
+        mapInitError: action.errorMessage
+      };
     default:
       return state;
   }