Don't render map icons in IE 11 (#55848)

As reported in #55184, the service map is completely broken in IE. This is because IE has some bugs around SVG that cause a runtime error.

This change detects IE 11 and does not render those problematic icons.

The result is a map that has the shapes but no SVG icons in them: https://www.dropbox.com/s/o7hp73yv5klpfqd/Screenshot%202020-01-24%2009.27.54.png?dl=0

We'll follow up in a future release with a fix to show the icons, but this makes it so the map is functional in IE.

Fixes #55184.

Co-authored-by: Elastic Machine <[email protected]>

x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons.ts

@@ -46,10 +46,23 @@ const serviceIcons: { [key: string]: string } = {
 
 export const defaultIcon = getAvatarIcon();
 
+// IE 11 does not properly load some SVGs, which causes a runtime error and the
+// map to not work at all. We would prefer to do some kind of feature detection
+// rather than browser detection, but IE 11 does support SVG, just not well
+// enough for our use in loading icons.
+//
+// This method of detecting IE is from a Stack Overflow answer:
+// https://stackoverflow.com/a/21825207
+//
+// @ts-ignore `documentMode` is not recognized as a valid property of `document`.
+const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
+
 export function iconForNode(node: cytoscape.NodeSingular) {
   const type = node.data('type');
   if (type === 'service') {
     return serviceIcons[node.data('agentName') as string];
+  } else if (isIE11) {
+    return defaultIcon;
   } else {
     return icons[type];
   }