[APM] ML integration (elastic#19791) (elastic#20644)

azasypkin · Jul 11, 2018 · 5e0cddc · 5e0cddc
1 parent de3e5b5
commit 5e0cddc
Show file tree

Hide file tree

Showing 78 changed files with 7,663 additions and 2,272 deletions.
diff --git a/x-pack/plugins/__mocks__/ui/chrome.js b/x-pack/plugins/__mocks__/ui/chrome.js
@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+function getUiSettingsClient() {
+  return {
+    get: key => {
+      switch (key) {
+        case 'timepicker:timeDefaults':
+          return { from: 'now-15m', to: 'now', mode: 'quick' };
+        case 'timepicker:refreshIntervalDefaults':
+          return { display: 'Off', pause: false, value: 0 };
+        default:
+          throw new Error(`Unexpected config key: ${key}`);
+      }
+    }
+  };
+}
+
+function addBasePath(path) {
+  return path;
+}
+
+function getInjected(key) {
+  switch (key) {
+    case 'apmIndexPattern':
+      return 'apm*';
+    case 'mlEnabled':
+      return true;
+    default:
+      throw new Error(`Unexpected config key: ${key}`);
+  }
+}
+
+export default {
+  getInjected,
+  addBasePath,
+  getUiSettingsClient
+};
diff --git a/x-pack/plugins/apm/index.js b/x-pack/plugins/apm/index.js
@@ -28,6 +28,7 @@ export function apm(kibana) {
       injectDefaultVars(server) {
         const config = server.config();
         return {
+          mlEnabled: config.get('xpack.ml.enabled'),
           apmUiEnabled: config.get('xpack.apm.ui.enabled'),
           apmIndexPattern: config.get('xpack.apm.indexPattern')
         };

diff --git a/x-pack/plugins/apm/jsconfig.json b/x-pack/plugins/apm/jsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "baseUrl": "../../../.",
+    "paths": {
+      "ui/*": ["src/ui/public/*"]
+    }
+  },
+  "exclude": ["node_modules", "**/node_modules/*", "build"]
+}
diff --git a/...k/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/OpenWatcherDialogButton.js b/...k/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/OpenWatcherDialogButton.js
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/WatcherButton.js b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/WatcherButton.js
@@ -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 React, { Component } from 'react';
+import { EuiButton, EuiContextMenu, EuiIcon, EuiPopover } from '@elastic/eui';
+
+export default class WatcherButton extends Component {
+  state = {
+    isPopoverOpen: false
+  };
+
+  onButtonClick = () => this.setState({ isPopoverOpen: true });
+  closePopover = () => this.setState({ isPopoverOpen: false });
+
+  popOverPanels = [
+    {
+      id: 0,
+      title: 'Watcher',
+      items: [
+        {
+          name: 'Enable error reports',
+          icon: <EuiIcon type="plusInCircle" size="m" />,
+          onClick: () => {
+            this.closePopover();
+            this.props.onOpenFlyout();
+          }
+        },
+        {
+          name: 'View existing watches',
+          icon: 'tableOfContents',
+          href: '/app/kibana#/management/elasticsearch/watcher/',
+          target: '_blank',
+          onClick: () => this.closePopover()
+        }
+      ]
+    }
+  ];
+
+  button = (
+    <EuiButton
+      size="s"
+      iconType="arrowDown"
+      iconSide="right"
+      onClick={this.onButtonClick}
+    >
+      Integrations
+    </EuiButton>
+  );
+
+  render() {
+    return (
+      <EuiPopover
+        button={this.button}
+        isOpen={this.state.isPopoverOpen}
+        closePopover={this.closePopover}
+        panelPaddingSize="none"
+        anchorPosition="downRight"
+      >
+        <EuiContextMenu initialPanelId={0} panels={this.popOverPanels} />
+      </EuiPopover>
+    );
+  }
+}
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/WatcherFlyOut.js b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/WatcherFlyOut.js
@@ -12,7 +12,6 @@ import _ from 'lodash';
 
 import {
   EuiButton,
-  EuiButtonEmpty,
   EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutFooter,
@@ -203,7 +202,6 @@ export default class WatcherFlyout extends Component {
               <KibanaLink
                 pathname={'/app/kibana'}
                 hash={`/management/elasticsearch/watcher/watches/watch/${id}`}
-                query={{}}
               >
                 View watch.
               </KibanaLink>
@@ -242,7 +240,7 @@ export default class WatcherFlyout extends Component {
       return { value: `${hour}:00`, text: `${hour}:00 UTC` };
     });
 
-    const flyoutContent = (
+    const flyoutBody = (
       <EuiText>
         <p>
           This form will assist in creating a Watch that can notify you of error
@@ -420,33 +418,23 @@ export default class WatcherFlyout extends Component {
       <EuiFlyout onClose={this.props.onClose} size="s">
         <EuiFlyoutHeader>
           <EuiTitle>
-            <h2>Create new watch assistant</h2>
+            <h2>Enable error reports</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
-        <EuiFlyoutBody>{flyoutContent}</EuiFlyoutBody>
-        <EuiFlyoutFooter>
-          <EuiFlexGroup justifyContent="spaceBetween">
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                iconType="cross"
-                onClick={this.props.onClose}
-                flush="left"
-              >
-                Cancel
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                onClick={this.createWatch}
-                fill
-                disabled={
-                  !this.state.actions.email && !this.state.actions.slack
-                }
-              >
-                Create watch
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
+        <EuiFlyoutBody>{flyoutBody}</EuiFlyoutBody>
+        <EuiFlyoutFooter
+          style={{
+            flexDirection: 'row-reverse',
+            display: 'flex'
+          }}
+        >
+          <EuiButton
+            onClick={this.createWatch}
+            fill
+            disabled={!this.state.actions.email && !this.state.actions.slack}
+          >
+            Create watch
+          </EuiButton>
         </EuiFlyoutFooter>
       </EuiFlyout>
     );

diff --git a/...m/public/components/app/ErrorGroupOverview/Watcher/__test__/createErrorGroupWatch.test.js b/...m/public/components/app/ErrorGroupOverview/Watcher/__test__/createErrorGroupWatch.test.js
@@ -7,7 +7,7 @@
 import { createErrorGroupWatch } from '../createErrorGroupWatch';
 import mustache from 'mustache';
 import chrome from 'ui/chrome';
-import * as rest from '../../../../../services/rest';
+import * as rest from '../../../../../services/rest/watcher';
 import { isObject, isArray, isString } from 'lodash';
 import esResponse from './esResponse.json';
 

diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/createErrorGroupWatch.js b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/createErrorGroupWatch.js
@@ -17,7 +17,7 @@ import {
   ERROR_EXC_HANDLED,
   ERROR_CULPRIT
 } from '../../../../../common/constants';
-import { createWatch } from '../../../../services/rest';
+import { createWatch } from '../../../../services/rest/watcher';
 
 function getSlackPathUrl(slackUrl) {
   if (slackUrl) {

diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/view.js b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/view.js
@@ -10,7 +10,7 @@ import { HeaderContainer } from '../../shared/UIComponents';
 import TabNavigation from '../../shared/TabNavigation';
 import List from './List';
 import WatcherFlyout from './Watcher/WatcherFlyOut';
-import OpenWatcherDialogButton from './Watcher/OpenWatcherDialogButton';
+import WatcherButton from './Watcher/WatcherButton';
 import { ErrorGroupDetailsRequest } from '../../../store/reactReduxRequest/errorGroupList';
 
 class ErrorGroupOverview extends Component {
@@ -35,7 +35,7 @@ class ErrorGroupOverview extends Component {
         <HeaderContainer>
           <h1>{serviceName}</h1>
           {license.data.features.watcher.isAvailable && (
-            <OpenWatcherDialogButton onOpenFlyout={this.onOpenFlyout} />
+            <WatcherButton onOpenFlyout={this.onOpenFlyout} />
           )}
         </HeaderContainer>
 
@@ -59,7 +59,9 @@ class ErrorGroupOverview extends Component {
 }
 
 ErrorGroupOverview.propTypes = {
-  location: PropTypes.object.isRequired
+  license: PropTypes.object.isRequired,
+  location: PropTypes.object.isRequired,
+  urlParams: PropTypes.object.isRequired
 };
 
 export default ErrorGroupOverview;
diff --git a/x-pack/plugins/apm/public/components/app/Main/Breadcrumbs.js b/x-pack/plugins/apm/public/components/app/Main/Breadcrumbs.js
@@ -30,8 +30,8 @@ class Breadcrumbs extends React.Component {
               {isLast ? (
                 <span
                   ref={node => {
-                    if (node && document.title !== node.innerText) {
-                      document.title = capitalize(node.innerText);
+                    if (node && document.title !== node.textContent) {
+                      document.title = capitalize(node.textContent);
                     }
                   }}
                 >

diff --git a/x-pack/plugins/apm/public/components/app/Main/__test__/Breadcrumbs.test.js b/x-pack/plugins/apm/public/components/app/Main/__test__/Breadcrumbs.test.js
@@ -4,31 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-jest.mock(
-  'ui/chrome',
-  () => ({
-    getUiSettingsClient: () => {
-      return {
-        get: key => {
-          switch (key) {
-            case 'timepicker:timeDefaults':
-              return { from: 'now-15m', to: 'now', mode: 'quick' };
-            case 'timepicker:refreshIntervalDefaults':
-              return { display: 'Off', pause: false, value: 0 };
-            default:
-              throw new Error(`Unexpected config key: ${key}`);
-          }
-        }
-      };
-    }
-  }),
-  { virtual: true }
-);
-
 import React from 'react';
 import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
-jest.mock('../../../../utils/timepicker', () => {});
 
 import Breadcrumbs from '../Breadcrumbs';
 import { toJson } from '../../../../utils/testHelpers';

diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/view.js b/x-pack/plugins/apm/public/components/app/ServiceOverview/view.js
@@ -7,7 +7,7 @@
 import React, { Component } from 'react';
 import { STATUS } from '../../../constants';
 import { isEmpty } from 'lodash';
-import { loadAgentStatus } from '../../../services/rest';
+import { loadAgentStatus } from '../../../services/rest/apm';
 import { KibanaLink } from '../../../utils/url';
 import { EuiButton } from '@elastic/eui';
 import List from './List';
@@ -75,7 +75,7 @@ class ServiceOverview extends Component {
 
 function SetupInstructionsLink({ buttonFill = false }) {
   return (
-    <KibanaLink pathname={'/app/kibana'} hash={'/home/tutorial/apm'} query={{}}>
+    <KibanaLink pathname={'/app/kibana'} hash={'/home/tutorial/apm'}>
       <EuiButton size="s" color="primary" fill={buttonFill}>
         Setup Instructions
       </EuiButton>