Merge branch 'master' into eui/18.2

package.json

@@ -163,7 +163,6 @@
     "compare-versions": "3.5.1",
     "core-js": "^3.2.1",
     "css-loader": "2.1.1",
-    "custom-event-polyfill": "^0.3.0",
     "d3": "3.5.17",
     "d3-cloud": "1.2.5",
     "deep-freeze-strict": "^1.1.1",

packages/kbn-ui-shared-deps/entry.js

@@ -17,6 +17,9 @@
  * under the License.
  */
 
+// import global polyfills before everything else
+require('./polyfills');
+
 // must load before angular
 export const Jquery = require('jquery');
 window.$ = window.jQuery = Jquery;

packages/kbn-ui-shared-deps/package.json

@@ -13,8 +13,11 @@
     "@elastic/charts": "^16.1.0",
     "@kbn/dev-utils": "1.0.0",
     "@yarnpkg/lockfile": "^1.1.0",
+    "abortcontroller-polyfill": "^1.3.0",
     "angular": "^1.7.9",
+    "core-js": "^3.2.1",
     "css-loader": "^2.1.1",
+    "custom-event-polyfill": "^0.3.0",
     "del": "^5.1.0",
     "jquery": "^3.4.1",
     "mini-css-extract-plugin": "0.8.0",
@@ -24,6 +27,9 @@
     "react-intl": "^2.8.0",
     "react": "^16.12.0",
     "read-pkg": "^5.2.0",
-    "webpack": "4.41.0"
+    "regenerator-runtime": "^0.13.3",
+    "symbol-observable": "^1.2.0",
+    "webpack": "4.41.0",
+    "whatwg-fetch": "^3.0.0"
   }
 }

packages/kbn-ui-shared-deps/polyfills.js

@@ -0,0 +1,26 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+require('core-js/stable');
+require('regenerator-runtime/runtime');
+require('custom-event-polyfill');
+require('whatwg-fetch');
+require('abortcontroller-polyfill/dist/polyfill-patch-fetch');
+require('./vendor/childnode_remove_polyfill');
+require('symbol-observable');

webpackShims/childnode-remove-polyfill.js → packages/kbn-ui-shared-deps/vendor/childnode_remove_polyfill.js

@@ -1,21 +1,4 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
+/* eslint-disable @kbn/eslint/require-license-header */
 
 /* @notice
  * This product bundles childnode-remove which is available under a

src/legacy/core_plugins/tests_bundle/tests_entry_template.js

@@ -29,16 +29,7 @@ export const createTestEntryTemplate = defaultUiSettings => bundle => `
  *
  */
 
-// import global polyfills before everything else
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
-import 'custom-event-polyfill';
-import 'whatwg-fetch';
-import 'abortcontroller-polyfill';
-import 'childnode-remove-polyfill';
 import fetchMock from 'fetch-mock/es5/client';
-import Symbol_observable from 'symbol-observable';
-
 import { CoreSystem } from '__kibanaCore__';
 
 // Fake uiCapabilities returned to Core in browser tests

src/legacy/ui/ui_bundles/app_entry_template.js

@@ -28,14 +28,6 @@ export const appEntryTemplate = bundle => `
  * context: ${bundle.getContext()}
  */
 
-// import global polyfills
-import Symbol_observable from 'symbol-observable';
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
-import 'custom-event-polyfill';
-import 'whatwg-fetch';
-import 'abortcontroller-polyfill';
-import 'childnode-remove-polyfill';
 ${apmImport()}
 import { i18n } from '@kbn/i18n';
 import { CoreSystem } from '__kibanaCore__'

src/optimize/watch/watch_cache.ts

@@ -170,22 +170,20 @@ export class WatchCache {
  * very large folders (with 84K+ files) cause a stack overflow.
  */
 async function recursiveDelete(directory: string) {
-  const entries = await readdirAsync(directory, { withFileTypes: true });
-  await Promise.all(
-    entries.map(entry => {
-      const absolutePath = path.join(directory, entry.name);
-      const result = entry.isDirectory()
-        ? recursiveDelete(absolutePath)
-        : unlinkAsync(absolutePath);
-
-      // Ignore errors, if the file or directory doesn't exist.
-      return result.catch(e => {
-        if (e.code !== 'ENOENT') {
-          throw e;
-        }
-      });
-    })
-  );
-
-  return rmdirAsync(directory);
+  try {
+    const entries = await readdirAsync(directory, { withFileTypes: true });
+
+    await Promise.all(
+      entries.map(entry => {
+        const absolutePath = path.join(directory, entry.name);
+        return entry.isDirectory() ? recursiveDelete(absolutePath) : unlinkAsync(absolutePath);
+      })
+    );
+
+    return rmdirAsync(directory);
+  } catch (error) {
+    if (error.code !== 'ENOENT') {
+      throw error;
+    }
+  }
 }

x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx

@@ -26,7 +26,7 @@ interface CytoscapeProps {
   children?: ReactNode;
   elements: cytoscape.ElementDefinition[];
   serviceName?: string;
-  style: CSSProperties;
+  style?: CSSProperties;
 }
 
 function useCytoscape(options: cytoscape.CytoscapeOptions) {
@@ -69,8 +69,8 @@ export function Cytoscape({
 
   // Set up cytoscape event handlers
   useEffect(() => {
-    if (cy) {
-      cy.on('data', event => {
+    const dataHandler: cytoscape.EventHandler = event => {
+      if (cy) {
         // Add the "primary" class to the node if its id matches the serviceName.
         if (cy.nodes().length > 0 && serviceName) {
           cy.nodes().removeClass('primary');
@@ -80,8 +80,30 @@ export function Cytoscape({
         if (event.cy.elements().length > 0) {
           cy.layout(cytoscapeOptions.layout as cytoscape.LayoutOptions).run();
         }
-      });
+      }
+    };
+    const mouseoverHandler: cytoscape.EventHandler = event => {
+      event.target.addClass('hover');
+      event.target.connectedEdges().addClass('nodeHover');
+    };
+    const mouseoutHandler: cytoscape.EventHandler = event => {
+      event.target.removeClass('hover');
+      event.target.connectedEdges().removeClass('nodeHover');
+    };
+
+    if (cy) {
+      cy.on('data', dataHandler);
+      cy.on('mouseover', 'edge, node', mouseoverHandler);
+      cy.on('mouseout', 'edge, node', mouseoutHandler);
     }
+
+    return () => {
+      if (cy) {
+        cy.removeListener('data', undefined, dataHandler);
+        cy.removeListener('mouseover', 'edge, node', mouseoverHandler);
+        cy.removeListener('mouseout', 'edge, node', mouseoutHandler);
+      }
+    };
   }, [cy, serviceName]);
 
   return (

x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/Buttons.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable @elastic/eui/href-or-on-click */
+
+import { EuiButton, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { MouseEvent } from 'react';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { getAPMHref } from '../../../shared/Links/apm/APMLink';
+
+interface ButtonsProps {
+  focusedServiceName?: string;
+  onFocusClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  selectedNodeServiceName: string;
+}
+
+export function Buttons({
+  focusedServiceName,
+  onFocusClick = () => {},
+  selectedNodeServiceName
+}: ButtonsProps) {
+  const currentSearch = useUrlParams().urlParams.kuery ?? '';
+  const detailsUrl = getAPMHref(
+    `/services/${selectedNodeServiceName}/transactions`,
+    currentSearch
+  );
+  const focusUrl = getAPMHref(
+    `/services/${selectedNodeServiceName}/service-map`,
+    currentSearch
+  );
+
+  const isAlreadyFocused = focusedServiceName === selectedNodeServiceName;
+
+  return (
+    <>
+      <EuiFlexItem>
+        <EuiButton href={detailsUrl} fill={true}>
+          {i18n.translate('xpack.apm.serviceMap.serviceDetailsButtonText', {
+            defaultMessage: 'Service Details'
+          })}
+        </EuiButton>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiButton
+          isDisabled={isAlreadyFocused}
+          color="secondary"
+          href={focusUrl}
+          onClick={onFocusClick}
+          title={
+            isAlreadyFocused
+              ? i18n.translate('xpack.apm.serviceMap.alreadyFocusedTitleText', {
+                  defaultMessage: 'Map is already focused'
+                })
+              : undefined
+          }
+        >
+          {i18n.translate('xpack.apm.serviceMap.focusMapButtonText', {
+            defaultMessage: 'Focus map'
+          })}
+        </EuiButton>
+      </EuiFlexItem>
+    </>
+  );
+}

x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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 React from 'react';
+import { i18n } from '@kbn/i18n';
+import styled from 'styled-components';
+import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
+
+const ItemRow = styled.div`
+  line-height: 2;
+`;
+
+const ItemTitle = styled.dt`
+  color: ${lightTheme.textColors.subdued};
+`;
+
+const ItemDescription = styled.dd``;
+
+interface InfoProps {
+  type: string;
+  subtype?: string;
+}
+
+export function Info({ type, subtype }: InfoProps) {
+  const listItems = [
+    {
+      title: i18n.translate('xpack.apm.serviceMap.typePopoverMetric', {
+        defaultMessage: 'Type'
+      }),
+      description: type
+    },
+    {
+      title: i18n.translate('xpack.apm.serviceMap.subtypePopoverMetric', {
+        defaultMessage: 'Subtype'
+      }),
+      description: subtype
+    }
+  ];
+
+  return (
+    <>
+      {listItems.map(
+        ({ title, description }) =>
+          description && (
+            <ItemRow key={title}>
+              <ItemTitle>{title}</ItemTitle>
+              <ItemDescription>{description}</ItemDescription>
+            </ItemRow>
+          )
+      )}
+    </>
+  );
+}