Migrate Alerting Kibana pluign to the new Kibana Platform

.gitignore

@@ -11,3 +11,4 @@ build
 .kibana-plugin-helpers.dev.json
 coverage
 yarn-error.log
+target

.kibana-plugin-helpers.json

@@ -3,9 +3,9 @@
     "package.json",
     "yarn.lock",
     ".yarnrc",
-    "index.js",
-    "{lib,public,server,webpackShims,translations,utils}/**/*",
+    "kibana.json",
+    "{lib,server,webpackShims,translations,utils,target}/**/*",
     "!test",
     "!__tests__"
   ]
-}
+}

kibana.json

@@ -0,0 +1,9 @@
+{
+  "id": "opendistroAlerting",
+  "version": "1.11.0.2",
+  "kibanaVersion": "kibana",
+  "configPath": ["opendistro_alerting"],
+  "requiredPlugins": [],
+  "server": true,
+  "ui": true
+}

public/app.js

@@ -14,53 +14,36 @@
  */
 
 import React from 'react';
-import chrome from 'ui/chrome';
-import { render, unmountComponentAtNode } from 'react-dom';
-import { uiModules } from 'ui/modules';
+import ReactDOM from 'react-dom';
 import { HashRouter as Router, Route } from 'react-router-dom';
 
 import 'react-vis/dist/style.css';
-import './less/main.less';
+// TODO: review the CSS style and migrate the necessary style to SASS, as Less is not supported in Kibana "new platform" anymore
+// import './less/main.less';
 import Main from './pages/Main';
-import { AppContext } from './utils/AppContext';
+import { CoreContext } from './utils/CoreContext';
 
-const app = uiModules.get('apps/alerting');
-const darkMode = chrome.getUiSettingsClient().get('theme:darkMode') || false;
+export function renderApp(coreStart, params) {
+  const isDarkMode = coreStart.uiSettings.get('theme:darkMode') || false;
+  coreStart.chrome.setBreadcrumbs([{ text: 'Alerting' }]); // Set Breadcrumbs for the plugin
 
-//Load Chart's dark mode CSS
-if (darkMode) {
-  require('@elastic/charts/dist/theme_only_dark.css');
-} else {
-  require('@elastic/charts/dist/theme_only_light.css');
-}
-
-app.config(($locationProvider) => {
-  $locationProvider.html5Mode({
-    enabled: false,
-    requireBase: false,
-    rewriteLinks: false,
-  });
-});
-
-app.config((stateManagementConfigProvider) => stateManagementConfigProvider.disable());
-
-function RootController($scope, $element, $http) {
-  const domNode = $element[0];
+  // Load Chart's dark mode CSS
+  if (isDarkMode) {
+    require('@elastic/charts/dist/theme_only_dark.css');
+  } else {
+    require('@elastic/charts/dist/theme_only_light.css');
+  }
 
   // render react to DOM
-  render(
+  ReactDOM.render(
     <Router>
-      <AppContext.Provider value={{ httpClient: $http, darkMode }}>
-        <Route render={(props) => <Main title="Alerting" httpClient={$http} {...props} />} />
-      </AppContext.Provider>
+      <CoreContext.Provider
+        value={{ http: coreStart.http, isDarkMode, notifications: coreStart.notifications }}
+      >
+        <Route render={(props) => <Main title="Alerting" {...props} />} />
+      </CoreContext.Provider>
     </Router>,
-    domNode
+    params.element
   );
-
-  // unmount react on controller destroy
-  $scope.$on('$destroy', () => {
-    unmountComponentAtNode(domNode);
-  });
+  return () => ReactDOM.unmountComponentAtNode(params.element);
 }
-
-chrome.setRootController('alerting', RootController);

public/components/Breadcrumbs/Breadcrumbs.js

@@ -27,7 +27,7 @@ import {
 
 const propTypes = {
   history: PropTypes.object.isRequired,
-  httpClient: PropTypes.func.isRequired,
+  httpClient: PropTypes.object.isRequired,
   location: PropTypes.object.isRequired,
   title: PropTypes.string.isRequired,
 };
@@ -64,7 +64,9 @@ export default class Breadcrumbs extends Component {
       location: { state: routeState },
     } = this.props;
     const rawBreadcrumbs = await getBreadcrumbs(window.location.hash, routeState, httpClient);
-    const breadcrumbs = rawBreadcrumbs.map(breadcrumb => createEuiBreadcrumb(breadcrumb, history));
+    const breadcrumbs = rawBreadcrumbs.map((breadcrumb) =>
+      createEuiBreadcrumb(breadcrumb, history)
+    );
     this.setState({ breadcrumbs });
   }
 
@@ -88,7 +90,7 @@ export function createEuiBreadcrumb(breadcrumb, history) {
   return {
     text,
     href: `#${href}`,
-    onClick: e => {
+    onClick: (e) => {
       e.preventDefault();
       history.push(href);
     },
@@ -98,14 +100,14 @@ export function createEuiBreadcrumb(breadcrumb, history) {
 export async function getBreadcrumbs(hash, routeState, httpClient) {
   const routes = parseLocationHash(hash);
   const asyncBreadcrumbs = await Promise.all(
-    routes.map(route => getBreadcrumb(route, routeState, httpClient))
+    routes.map((route) => getBreadcrumb(route, routeState, httpClient))
   );
-  const breadcrumbs = _.flatten(asyncBreadcrumbs).filter(breadcrumb => !!breadcrumb);
+  const breadcrumbs = _.flatten(asyncBreadcrumbs).filter((breadcrumb) => !!breadcrumb);
   return breadcrumbs;
 }
 
 export function parseLocationHash(hash) {
-  return hash.split('/').filter(route => !!route);
+  return hash.split('/').filter((route) => !!route);
 }
 
 export async function getBreadcrumb(route, routeState, httpClient) {
@@ -128,8 +130,8 @@ export async function getBreadcrumb(route, routeState, httpClient) {
         let monitorName = base;
         try {
           const response = await httpClient.get(`../api/alerting/monitors/${base}`);
-          if (response.data.ok) {
-            monitorName = response.data.resp.name;
+          if (response.ok) {
+            monitorName = response.resp.name;
           }
         } catch (err) {
           console.error(err);

public/components/Breadcrumbs/Breadcrumbs.test.js

@@ -40,9 +40,7 @@ beforeEach(() => {
 
 describe('Breadcrumbs', () => {
   const title = 'Alerting';
-  httpClientMock.get = jest
-    .fn()
-    .mockResolvedValue({ data: { ok: true, resp: { name: 'random monitor' } } });
+  httpClientMock.get = jest.fn().mockResolvedValue({ ok: true, resp: { name: 'random monitor' } });
   delete global.window.location;
   global.window.location = { hash: '' };
 
@@ -115,29 +113,29 @@ describe('getBreadcrumb', () => {
 
   describe('when matching document IDs', () => {
     test('calls get monitor route', async () => {
-      httpClientMock.get.mockResolvedValue({ data: { ok: true, resp: { name: 'random_name' } } });
+      httpClientMock.get.mockResolvedValue({ ok: true, resp: { name: 'random_name' } });
       await getBreadcrumb(monitorId, {}, httpClientMock);
       expect(httpClientMock.get).toHaveBeenCalled();
       expect(httpClientMock.get).toHaveBeenCalledWith(`../api/alerting/monitors/${monitorId}`);
     });
 
     test('returns monitor name', async () => {
-      httpClientMock.get.mockResolvedValue({ data: { ok: true, resp: { name: 'random_name' } } });
+      httpClientMock.get.mockResolvedValue({ ok: true, resp: { name: 'random_name' } });
       expect(await getBreadcrumb(monitorId, {}, httpClientMock)).toMatchSnapshot();
     });
 
     test('uses monitor id as name if request fails', async () => {
-      httpClientMock.get.mockRejectedValue({ data: { ok: true, resp: { name: 'random_name' } } });
+      httpClientMock.get.mockRejectedValue({ ok: true, resp: { name: 'random_name' } });
       expect(await getBreadcrumb(monitorId, {}, httpClientMock)).toMatchSnapshot();
     });
 
     test('uses monitor id as name if ok=false', async () => {
-      httpClientMock.get.mockResolvedValue({ data: { ok: false, resp: { name: 'random_name' } } });
+      httpClientMock.get.mockResolvedValue({ ok: false, resp: { name: 'random_name' } });
       expect(await getBreadcrumb(monitorId, {}, httpClientMock)).toMatchSnapshot();
     });
 
     test('adds appropriate action breadcrumb', async () => {
-      httpClientMock.get.mockResolvedValue({ data: { ok: true, resp: { name: 'random_name' } } });
+      httpClientMock.get.mockResolvedValue({ ok: true, resp: { name: 'random_name' } });
       expect(
         await getBreadcrumb(
           `${monitorId}?action=${MONITOR_ACTIONS.UPDATE_MONITOR}`,

public/hack.js → public/index.js

@@ -1,5 +1,5 @@
 /*
- *   Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *   Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
  *
  *   Licensed under the Apache License, Version 2.0 (the "License").
  *   You may not use this file except in compliance with the License.
@@ -12,3 +12,9 @@
  *   express or implied. See the License for the specific language governing
  *   permissions and limitations under the License.
  */
+
+import { AlertingPlugin } from './plugin';
+
+export function plugin(initializerContext) {
+  return new AlertingPlugin(initializerContext);
+}

public/pages/CreateMonitor/components/AnomalyDetectors/EmptyFeaturesMessage/EmptyFeaturesMessage.test.js

@@ -17,12 +17,6 @@ import React from 'react';
 import { render } from 'enzyme';
 import { EmptyFeaturesMessage } from './EmptyFeaturesMessage';
 
-jest.mock('ui/chrome', () => ({
-  getBasePath: () => {
-    return 'http://localhost/app';
-  },
-}));
-
 describe('EmptyFeaturesMessage', () => {
   test('renders ', () => {
     const component = <EmptyFeaturesMessage detectorId="tempId" />;

public/pages/CreateMonitor/containers/AnomalyDetectors/AnomalyDetectorData.js

@@ -16,11 +16,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { AppContext } from '../../../../utils/AppContext';
+import { CoreContext } from '../../../../utils/CoreContext';
 import { AD_PREVIEW_DAYS } from '../../../../utils/constants';
 
 class AnomalyDetectorData extends React.Component {
-  static contextType = AppContext;
+  static contextType = CoreContext;
   constructor(props) {
     super(props);
     this.state = {
@@ -43,25 +43,23 @@ class AnomalyDetectorData extends React.Component {
 
   async getPreviewData() {
     const { detectorId, startTime, endTime } = this.props;
-    const { httpClient } = this.context;
+    const { http: httpClient } = this.context;
     this.setState({
       isLoading: true,
     });
     if (!detectorId) return;
     const requestParams = {
-      startTime: moment()
-        .subtract(AD_PREVIEW_DAYS, 'd')
-        .valueOf(),
+      startTime: moment().subtract(AD_PREVIEW_DAYS, 'd').valueOf(),
       startTime: startTime,
       endTime: endTime,
       preview: this.props.preview,
     };
     try {
       const response = await httpClient.get(`../api/alerting/detectors/${detectorId}/results`, {
-        params: requestParams,
+        query: requestParams,
       });
-      if (response.data.ok) {
-        const { anomalyResult, detector } = response.data.response;
+      if (response.ok) {
+        const { anomalyResult, detector } = response.response;
         this.setState({
           ...this.state,
           anomalyResult,
@@ -94,9 +92,7 @@ AnomalyDetectorData.propTypes = {
 };
 AnomalyDetectorData.defaultProps = {
   preview: true,
-  startTime: moment()
-    .subtract(5, 'd')
-    .valueOf(),
+  startTime: moment().subtract(5, 'd').valueOf(),
   endTime: moment().valueOf(),
 };