Merge branch 'master' of github.com:elastic/kibana into fix-ftue-with-apm

Author: spong

src/plugins/console/server/lib/elasticsearch_proxy_config.ts

@@ -21,9 +21,10 @@ import _ from 'lodash';
 import http from 'http';
 import https from 'https';
 import url from 'url';
-import { Duration } from 'moment';
 
-const createAgent = (legacyConfig: any) => {
+import { ESConfigForProxy } from '../types';
+
+const createAgent = (legacyConfig: ESConfigForProxy) => {
   const target = url.parse(_.head(legacyConfig.hosts));
   if (!/^https/.test(target.protocol || '')) return new http.Agent();
 
@@ -59,7 +60,7 @@ const createAgent = (legacyConfig: any) => {
   return new https.Agent(agentOptions);
 };
 
-export const getElasticsearchProxyConfig = (legacyConfig: { requestTimeout: Duration }) => {
+export const getElasticsearchProxyConfig = (legacyConfig: ESConfigForProxy) => {
   return {
     timeout: legacyConfig.requestTimeout.asMilliseconds(),
     agent: createAgent(legacyConfig),

src/plugins/console/server/plugin.ts

@@ -60,9 +60,7 @@ export class ConsoleServerPlugin implements Plugin<ConsoleSetup> {
         const legacyConfig = readLegacyEsConfig();
         return {
           ...elasticsearch,
-          hosts: legacyConfig.hosts,
-          requestHeadersWhitelist: legacyConfig.requestHeadersWhitelist,
-          customHeaders: legacyConfig.customHeaders,
+          ...legacyConfig,
         };
       },
       pathFilters: proxyPathFilters,

src/plugins/console/server/types.ts

@@ -31,4 +31,12 @@ export interface ESConfigForProxy {
   requestHeadersWhitelist: string[];
   customHeaders: Record<string, any>;
   requestTimeout: Duration;
+  ssl?: {
+    verificationMode: 'none' | 'certificate' | 'full';
+    certificateAuthorities: string[] | string;
+    alwaysPresentCertificate: boolean;
+    certificate?: string;
+    key?: string;
+    keyPassphrase?: string;
+  };
 }

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

@@ -0,0 +1,66 @@
+/*
+ * 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 {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiTitle
+} from '@elastic/eui';
+import cytoscape from 'cytoscape';
+import React from 'react';
+import { Buttons } from './Buttons';
+import { Info } from './Info';
+import { ServiceMetricList } from './ServiceMetricList';
+
+const popoverMinWidth = 280;
+
+interface ContentsProps {
+  focusedServiceName?: string;
+  isService: boolean;
+  label: string;
+  onFocusClick: () => void;
+  selectedNodeData: cytoscape.NodeDataDefinition;
+  selectedNodeServiceName: string;
+}
+
+export function Contents({
+  selectedNodeData,
+  focusedServiceName,
+  isService,
+  label,
+  onFocusClick,
+  selectedNodeServiceName
+}: ContentsProps) {
+  return (
+    <EuiFlexGroup
+      direction="column"
+      gutterSize="s"
+      style={{ minWidth: popoverMinWidth }}
+    >
+      <EuiFlexItem>
+        <EuiTitle size="xxs">
+          <h3>{label}</h3>
+        </EuiTitle>
+        <EuiHorizontalRule margin="xs" />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        {isService ? (
+          <ServiceMetricList serviceName={selectedNodeServiceName} />
+        ) : (
+          <Info {...selectedNodeData} />
+        )}
+      </EuiFlexItem>
+      {isService && (
+        <Buttons
+          focusedServiceName={focusedServiceName}
+          onFocusClick={onFocusClick}
+          selectedNodeServiceName={selectedNodeServiceName}
+        />
+      )}
+    </EuiFlexGroup>
+  );
+}

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

@@ -4,10 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
+import cytoscape from 'cytoscape';
+import React from 'react';
 import styled from 'styled-components';
-import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
 
 const ItemRow = styled.div`
   line-height: 2;
@@ -19,8 +20,8 @@ const ItemTitle = styled.dt`
 
 const ItemDescription = styled.dd``;
 
-interface InfoProps {
-  type: string;
+interface InfoProps extends cytoscape.NodeDataDefinition {
+  type?: string;
   subtype?: string;
 }
 

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

@@ -0,0 +1,49 @@
+/*
+ * 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 { storiesOf } from '@storybook/react';
+import React from 'react';
+import {
+  ApmPluginContext,
+  ApmPluginContextValue
+} from '../../../../context/ApmPluginContext';
+import { Contents } from './Contents';
+
+const selectedNodeData = {
+  id: 'opbeans-node',
+  label: 'opbeans-node',
+  href:
+    '#/services/opbeans-node/service-map?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0',
+  agentName: 'nodejs',
+  type: 'service'
+};
+
+storiesOf('app/ServiceMap/Popover/Contents', module).add(
+  'example',
+  () => {
+    return (
+      <ApmPluginContext.Provider
+        value={
+          ({ core: { notifications: {} } } as unknown) as ApmPluginContextValue
+        }
+      >
+        <Contents
+          selectedNodeData={selectedNodeData}
+          isService={true}
+          label="opbeans-node"
+          onFocusClick={() => {}}
+          selectedNodeServiceName="opbeans-node"
+        />
+      </ApmPluginContext.Provider>
+    );
+  },
+  {
+    info: {
+      propTablesExclude: [ApmPluginContext.Provider],
+      source: false
+    }
+  }
+);

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

@@ -4,27 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiHorizontalRule,
-  EuiPopover,
-  EuiTitle
-} from '@elastic/eui';
+import { EuiPopover } from '@elastic/eui';
 import cytoscape from 'cytoscape';
 import React, {
   CSSProperties,
+  useCallback,
   useContext,
   useEffect,
-  useState,
-  useCallback
+  useRef,
+  useState
 } from 'react';
 import { CytoscapeContext } from '../Cytoscape';
-import { Buttons } from './Buttons';
-import { Info } from './Info';
-import { ServiceMetricList } from './ServiceMetricList';
-
-const popoverMinWidth = 280;
+import { Contents } from './Contents';
 
 interface PopoverProps {
   focusedServiceName?: string;
@@ -35,92 +26,79 @@ export function Popover({ focusedServiceName }: PopoverProps) {
   const [selectedNode, setSelectedNode] = useState<
     cytoscape.NodeSingular | undefined
   >(undefined);
-  const onFocusClick = useCallback(() => setSelectedNode(undefined), [
+  const deselect = useCallback(() => setSelectedNode(undefined), [
     setSelectedNode
   ]);
-
-  useEffect(() => {
-    const selectHandler: cytoscape.EventHandler = event => {
-      setSelectedNode(event.target);
-    };
-    const unselectHandler: cytoscape.EventHandler = () => {
-      setSelectedNode(undefined);
-    };
-
-    if (cy) {
-      cy.on('select', 'node', selectHandler);
-      cy.on('unselect', 'node', unselectHandler);
-      cy.on('data viewport', unselectHandler);
-    }
-
-    return () => {
-      if (cy) {
-        cy.removeListener('select', 'node', selectHandler);
-        cy.removeListener('unselect', 'node', unselectHandler);
-        cy.removeListener('data viewport', undefined, unselectHandler);
-      }
-    };
-  }, [cy]);
-
   const renderedHeight = selectedNode?.renderedHeight() ?? 0;
   const renderedWidth = selectedNode?.renderedWidth() ?? 0;
   const { x, y } = selectedNode?.renderedPosition() ?? { x: 0, y: 0 };
   const isOpen = !!selectedNode;
-  const selectedNodeServiceName: string = selectedNode?.data('id');
   const isService = selectedNode?.data('type') === 'service';
   const triggerStyle: CSSProperties = {
     background: 'transparent',
     height: renderedHeight,
     position: 'absolute',
-    width: renderedWidth
+    width: renderedWidth,
+    border: '3px dotted red'
   };
-  const trigger = <div className="trigger" style={triggerStyle} />;
-
+  const trigger = <div style={triggerStyle} />;
   const zoom = cy?.zoom() ?? 1;
   const height = selectedNode?.height() ?? 0;
-  const translateY = y - (zoom + 1) * (height / 2);
+  const translateY = y - ((zoom + 1) * height) / 4;
   const popoverStyle: CSSProperties = {
     position: 'absolute',
     transform: `translate(${x}px, ${translateY}px)`
   };
-  const data = selectedNode?.data() ?? {};
-  const label = data.label || selectedNodeServiceName;
+  const selectedNodeData = selectedNode?.data() ?? {};
+  const selectedNodeServiceName = selectedNodeData.id;
+  const label = selectedNodeData.label || selectedNodeServiceName;
+  const popoverRef = useRef<EuiPopover>(null);
+
+  // Set up Cytoscape event handlers
+  useEffect(() => {
+    const selectHandler: cytoscape.EventHandler = event => {
+      setSelectedNode(event.target);
+    };
+
+    if (cy) {
+      cy.on('select', 'node', selectHandler);
+      cy.on('unselect', 'node', deselect);
+      cy.on('data viewport', deselect);
+    }
+
+    return () => {
+      if (cy) {
+        cy.removeListener('select', 'node', selectHandler);
+        cy.removeListener('unselect', 'node', deselect);
+        cy.removeListener('data viewport', undefined, deselect);
+      }
+    };
+  }, [cy, deselect]);
+
+  // Handle positioning of popover. This makes it so the popover positions
+  // itself correctly and the arrows are always pointing to where they should.
+  useEffect(() => {
+    if (popoverRef.current) {
+      popoverRef.current.positionPopoverFluid();
+    }
+  }, [popoverRef, x, y]);
 
   return (
     <EuiPopover
       anchorPosition={'upCenter'}
       button={trigger}
       closePopover={() => {}}
       isOpen={isOpen}
+      ref={popoverRef}
       style={popoverStyle}
     >
-      <EuiFlexGroup
-        direction="column"
-        gutterSize="s"
-        style={{ minWidth: popoverMinWidth }}
-      >
-        <EuiFlexItem>
-          <EuiTitle size="xxs">
-            <h3>{label}</h3>
-          </EuiTitle>
-          <EuiHorizontalRule margin="xs" />
-        </EuiFlexItem>
-
-        <EuiFlexItem>
-          {isService ? (
-            <ServiceMetricList serviceName={selectedNodeServiceName} />
-          ) : (
-            <Info {...data} />
-          )}
-        </EuiFlexItem>
-        {isService && (
-          <Buttons
-            focusedServiceName={focusedServiceName}
-            onFocusClick={onFocusClick}
-            selectedNodeServiceName={selectedNodeServiceName}
-          />
-        )}
-      </EuiFlexGroup>
+      <Contents
+        selectedNodeData={selectedNodeData}
+        isService={isService}
+        label={label}
+        onFocusClick={deselect}
+        selectedNodeServiceName={selectedNodeServiceName}
+      />
     </EuiPopover>
   );
 }

x-pack/legacy/plugins/encrypted_saved_objects/index.ts

@@ -21,7 +21,9 @@ export const encryptedSavedObjects = (kibana: {
     // Some legacy plugins still use `enabled` config key, so we keep it here, but the rest of the
     // keys is handled by the New Platform plugin.
     config: (Joi: Root) =>
-      Joi.object({ enabled: Joi.boolean().default(true) })
+      Joi.object({
+        enabled: Joi.boolean().default(true),
+      })
         .unknown(true)
         .default(),
 

x-pack/legacy/plugins/siem/index.ts

@@ -5,6 +5,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { get } from 'lodash/fp';
 import { resolve } from 'path';
 import { Server } from 'hapi';
 import { Root } from 'joi';
@@ -155,6 +156,9 @@ export const siem = (kibana: any) => {
       const initializerContext = { ...coreContext, env } as PluginInitializerContext;
       const serverFacade = {
         config,
+        usingEphemeralEncryptionKey:
+          get('usingEphemeralEncryptionKey', newPlatform.setup.plugins.encryptedSavedObjects) ??
+          false,
         plugins: {
           alerting: plugins.alerting,
           actions: newPlatform.start.plugins.actions,