Support for Kibana 7.0.1

babel.config.js

@@ -0,0 +1,12 @@
+// babelrc doesn't respect NODE_PATH anymore but using require does.
+// Alternative to install them locally in node_modules
+module.exports = {
+  presets: [
+    require('@babel/preset-env'),
+    require('@babel/preset-react'),
+  ],
+  plugins: [
+    require('@babel/plugin-proposal-class-properties'),
+    require('@babel/plugin-proposal-object-rest-spread'),
+  ]
+}

package.json

@@ -1,12 +1,12 @@
 {
   "name": "opendistro-alerting",
-  "version": "0.9.0.0",
+  "version": "1.0.0",
   "description": "Kibana Alerting Plugin",
   "main": "index.js",
   "license": "Apache-2.0",
   "homepage": "https://github.com/opendistro-for-elasticsearch/alerting-kibana-plugin",
   "kibana": {
-    "version": "6.7.1",
+    "version": "7.0.1",
     "templateVersion": "6.3.3"
   },
   "repository": {

public/app.js

@@ -18,9 +18,8 @@ import chrome from 'ui/chrome';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { uiModules } from 'ui/modules';
 import { HashRouter as Router, Route } from 'react-router-dom';
-import '@elastic/eui/dist/eui_theme_light.css';
-import 'react-vis/dist/style.css';
 
+import 'react-vis/dist/style.css';
 import 'ui/autoload/styles';
 import './less/main.less';
 

public/components/Charts/Highlight/Highlight.js

@@ -287,6 +287,19 @@ class Highlight extends AbstractSeries {
     }
   }
 
+  getHighlighterStyles() {
+    const { isDarkMode } = this.props;
+    if (isDarkMode) {
+      return {
+        fill: 'black',
+        opacity: 0.1,
+      };
+    }
+    return {
+      fill: 'white',
+      opacity: 0.8,
+    };
+  }
   render() {
     const {
       color,
@@ -360,13 +373,12 @@ class Highlight extends AbstractSeries {
         <rect
           pointerEvents="none"
           className="rv-mouse-target"
-          fill="white"
-          opacity="0.8"
           x={marginLeft}
           y="0"
           width={Math.max(left - marginLeft, 0)}
           height={Math.max(touchHeight, 0)}
           onMouseLeave={e => e.preventDefault()}
+          {...this.getHighlighterStyles()}
         />
         {/* A Center Highlighter */}
         <rect
@@ -383,13 +395,12 @@ class Highlight extends AbstractSeries {
         <rect
           pointerEvents="none"
           className="rv-mouse-target"
-          fill="white"
-          opacity="0.8"
           x={right}
           y="0"
           width={Math.max(touchWidth - right, 0)}
           height={Math.max(touchHeight, 0)}
           onMouseLeave={e => e.preventDefault()}
+          {...this.getHighlighterStyles()}
         />
 
         {/* Draws border lines on Highlighted area */}

public/less/main.less

@@ -22,8 +22,6 @@
 }
 
 .accordion-action {
-  background-color: white;
-  border: 1px solid #d9d9d9;
   padding: 10px 0px;
   margin-bottom: 10px;
   .euiAccordion__button {
@@ -36,7 +34,6 @@
 }
 
 .euiTextArea.read-only-text-area {
-  background-color: #fbfbfb;
   padding-left: 12px;
   border-color: initial;
   box-shadow: 0 1px 1px -1px rgba(153, 153, 153, 0.2), 0 3px 2px -2px rgba(153, 153, 153, 0.2),
@@ -50,55 +47,6 @@
 *  .euiSwitch .euiSwitch__thumb has a width/height set at 24px in older version which breaks the styling of the newer version.
 * */
 
-.euiSwitch .euiSwitch__thumb {
-  width: 20px;
-  height: 20px;
-}
-
-.euiRadio .euiRadio__circle {
-  width: 16px;
-  height: 16px;
-}
-
-.euiCheckbox {
-  min-height: initial;
-
-  .euiCheckbox__input {
-    opacity: initial;
-    z-index: initial;
-    margin: initial;
-    cursor: initial;
-  }
-
-  .euiCheckbox__square {
-    height: initial;
-    width: initial;
-    z-index: initial;
-  }
-
-  .euiCheckbox__label {
-    font-weight: initial;
-  }
-}
-
-.euiRadio .euiRadio__input:checked ~ .euiRadio__circle {
-  background-repeat-x: no-repeat;
-  background-repeat-y: no-repeat;
-  background-position-x: center;
-  background-position-y: center;
-}
-
-.euiCheckbox .euiCheckbox__input:checked ~ .euiCheckbox__square {
-  background-position-x: center;
-  background-position-y: center;
-  background-repeat-x: no-repeat;
-  background-repeat-y: no-repeat;
-}
-
-.euiAccordion__button:focus {
-  background-color: initial;
-}
-
 .euiFormRow.euiFormRow--hasEmptyLabelSpace {
   padding-top: initial;
 }
@@ -123,8 +71,3 @@
 .euiPaginationButton-isActive:focus {
   color: #0079a5 !important;
 }
-
-.euiComboBox .euiComboBox__input > input {
-  // Fixes blue rectangle border around cursor text
-  box-shadow: initial;
-}

public/pages/CreateMonitor/components/ExtractionQuery/ExtractionQuery.js

@@ -15,7 +15,6 @@
 
 import React from 'react';
 import { EuiCodeEditor, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
-import 'brace/theme/github';
 import 'brace/mode/json';
 import 'brace/mode/plain_text';
 import 'brace/snippets/javascript';
@@ -24,7 +23,7 @@ import 'brace/ext/language_tools';
 import { FormikCodeEditor } from '../../../../components/FormControls';
 import { isInvalid, hasError, validateExtractionQuery } from '../../../../utils/validate';
 
-const ExtractionQuery = ({ response }) => (
+const ExtractionQuery = ({ isDarkMode, response }) => (
   <EuiFlexGroup>
     <EuiFlexItem>
       <FormikCodeEditor
@@ -41,7 +40,7 @@ const ExtractionQuery = ({ response }) => (
           mode: 'json',
           width: '100%',
           height: '500px',
-          theme: 'github',
+          theme: isDarkMode ? 'sense-dark' : 'github',
           onChange: (query, field, form) => {
             form.setFieldValue('query', query);
           },
@@ -55,7 +54,7 @@ const ExtractionQuery = ({ response }) => (
       <EuiFormRow label="Extraction query response" fullWidth>
         <EuiCodeEditor
           mode="json"
-          theme="github"
+          theme={isDarkMode ? 'sense-dark' : 'github'}
           width="100%"
           height="500px"
           value={response}

public/pages/CreateMonitor/components/QueryPerformance/QueryPerformance.js

@@ -59,7 +59,7 @@ const QueryPerformance = ({ response }) => (
         <EuiText size="xs">
           <strong>Hits</strong>
           <span style={{ display: 'block' }}>
-            {_.get(response, 'hits.total', DEFAULT_EMPTY_DATA)}
+            {_.get(response, 'hits.total.value', DEFAULT_EMPTY_DATA)}
           </span>
         </EuiText>
       </EuiFlexItem>

public/pages/CreateMonitor/components/QueryPerformance/QueryPerformance.test.js

@@ -20,7 +20,9 @@ import QueryPerformance from './QueryPerformance';
 
 describe('QueryPerformance', () => {
   test('renders', () => {
-    const component = <QueryPerformance response={{ took: 5, hits: { total: 15 } }} />;
+    const component = (
+      <QueryPerformance response={{ took: 5, hits: { total: { value: 15, relation: 'eq' } } }} />
+    );
 
     expect(render(component)).toMatchSnapshot();
   });

public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js

@@ -15,6 +15,7 @@
 
 import React, { Component, Fragment } from 'react';
 import _ from 'lodash';
+import chrome from 'ui/chrome';
 import PropTypes from 'prop-types';
 import { EuiSpacer, EuiButton, EuiText } from '@elastic/eui';
 import ContentPanel from '../../../../components/ContentPanel';
@@ -67,6 +68,7 @@ class DefineMonitor extends Component {
     this.resetResponse = this.resetResponse.bind(this);
     this.onQueryMappings = this.onQueryMappings.bind(this);
     this.queryMappings = this.queryMappings.bind(this);
+    this.isDarkMode = chrome.getUiSettingsClient().get('theme:darkMode') || false;
   }
 
   componentDidMount() {
@@ -241,7 +243,12 @@ class DefineMonitor extends Component {
           ? this.renderGraph()
           : renderEmptyMessage('You must specify a time field.');
       } else {
-        content = <ExtractionQuery response={JSON.stringify(response || '', null, 4)} />;
+        content = (
+          <ExtractionQuery
+            response={JSON.stringify(response || '', null, 4)}
+            isDarkMode={this.isDarkMode}
+          />
+        );
       }
     }
 

public/pages/CreateMonitor/containers/DefineMonitor/utils/mappings.js

@@ -13,11 +13,6 @@
  *   permissions and limitations under the License.
  */
 
-export function getDocMappings([index, { mappings }]) {
-  const [docType, docMappings] = Object.entries(mappings).pop();
-  return docMappings;
-}
-
 export function shouldSkip(mapping) {
   const isDisabled = mapping.enabled === false;
   const hasIndexDisabled = mapping.index === false;
@@ -38,7 +33,6 @@ export function getFieldsFromProperties(properties, dataTypes, path) {
 
 export function getTypeFromMappings(mappings, dataTypes, path = '') {
   if (shouldSkip(mappings)) return dataTypes;
-
   // if there are properties then type is inherently an object
   if (mappings.properties) {
     getFieldsFromProperties(mappings.properties, dataTypes, path);
@@ -54,8 +48,8 @@ export function getTypeFromMappings(mappings, dataTypes, path = '') {
 
 export function getPathsPerDataType(mappings) {
   const dataTypes = {};
-  Object.entries(mappings)
-    .map(getDocMappings)
-    .forEach(docMappings => getTypeFromMappings(docMappings, dataTypes));
+  Object.entries(mappings).forEach(([index, { mappings: docMappings }]) =>
+    getTypeFromMappings(docMappings, dataTypes)
+  );
   return dataTypes;
 }

public/pages/CreateMonitor/containers/DefineMonitor/utils/mappings.test.js

@@ -20,18 +20,16 @@ describe('getPathsPerDataType', () => {
     const mappings = {
       random_index: {
         mappings: {
-          _doc: {
-            properties: {
-              '@message': { type: 'text' },
-              '@timestamp': { type: 'date' },
-              username: { type: 'keyword' },
-              memory: { type: 'double' },
-              phpmemory: { type: 'long' },
-              bytes: { type: 'long' },
-              clientip: { type: 'ip' },
-              id: { type: 'integer' },
-              ip: { type: 'ip' },
-            },
+          properties: {
+            '@message': { type: 'text' },
+            '@timestamp': { type: 'date' },
+            username: { type: 'keyword' },
+            memory: { type: 'double' },
+            phpmemory: { type: 'long' },
+            bytes: { type: 'long' },
+            clientip: { type: 'ip' },
+            id: { type: 'integer' },
+            ip: { type: 'ip' },
           },
         },
       },

public/pages/CreateTrigger/components/TriggerQuery/TriggerQuery.js

@@ -26,7 +26,6 @@ import {
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
-import 'brace/theme/github';
 import 'brace/mode/json';
 import 'brace/mode/plain_text';
 import 'brace/snippets/javascript';
@@ -54,6 +53,7 @@ const TriggerQuery = ({
   response,
   triggerValues,
   setFlyout,
+  isDarkMode,
 }) => {
   const trigger = { ...formikToTrigger(triggerValues), actions: [] };
   const formattedResponse = JSON.stringify(response, null, 4);
@@ -64,7 +64,7 @@ const TriggerQuery = ({
           <EuiFormRow label="Extraction query response" fullWidth>
             <EuiCodeEditor
               mode="json"
-              theme="github"
+              theme={isDarkMode ? 'sense-dark' : 'github'}
               width="100%"
               value={error || formattedResponse}
               readOnly
@@ -100,7 +100,7 @@ const TriggerQuery = ({
               >
                 <EuiCodeEditor
                   mode="plain_text"
-                  theme="github"
+                  theme={isDarkMode ? 'sense-dark' : 'github'}
                   height="300px"
                   width="100%"
                   onChange={source => {

public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js

@@ -131,7 +131,7 @@ class ConfigureActions extends React.Component {
         title="Configure Actions"
         titleSize="s"
         panelStyles={{ paddingBottom: '0px' }}
-        bodyStyles={{ backgroundColor: '#F6F6F6', padding: '10px' }}
+        bodyStyles={{ padding: '10px' }}
         horizontalRuleClassName="accordion-horizontal-rule"
         actions={<AddActionButton arrayHelpers={arrayHelpers} />}
       >

public/pages/CreateTrigger/containers/CreateTrigger/CreateTrigger.js

@@ -15,6 +15,7 @@
 
 import React, { Component, Fragment } from 'react';
 import _ from 'lodash';
+import chrome from 'ui/chrome';
 import moment from 'moment';
 import { Formik, FieldArray } from 'formik';
 import {
@@ -54,6 +55,7 @@ export default class CreateTrigger extends Component {
       executeResponse: null,
       initialValues,
     };
+    this.isDarkMode = chrome.getUiSettingsClient().get('theme:darkMode') || false;
   }
 
   componentDidMount() {
@@ -206,6 +208,7 @@ export default class CreateTrigger extends Component {
                 setFlyout={setFlyout}
                 triggers={monitor.triggers}
                 triggerValues={values}
+                isDarkMode={this.isDarkMode}
               />
               <EuiSpacer />
               <FieldArray