Integrate Alerting Dashboards with Notifications Plugin (#220)

* Add NotificationsCallOut and NotificationsInfoCallOut components Signed-off-by: Mohammad Qureshi <47198598+qreshi@users.noreply.github.com> * Add NotificationService Signed-off-by: Mohammad Qureshi <47198598+qreshi@users.noreply.github.com> * Add NotificationsInfoCallOut on Destinations page and disable creating/editing Destination objects Signed-off-by: Mohammad Qureshi <47198598+qreshi@users.noreply.github.com> * Add option to select both Destinations and Notification Channels when defining Action Signed-off-by: Mohammad Qureshi <47198598+qreshi@users.noreply.github.com> * Disable unused buttons and fix issue with channels loading on existing Monitor Signed-off-by: Mohammad Qureshi <47198598+qreshi@users.noreply.github.com> * Update Jest snapshots Signed-off-by: Ashish Agrawal <ashisagr@amazon.com> * Remove Destination related Cypress tests Signed-off-by: Mohammad Qureshi <47198598+qreshi@users.noreply.github.com> * Remove leftover deletion of Destinations in Cypress test clean-up Signed-off-by: Mohammad Qureshi <47198598+qreshi@users.noreply.github.com> Co-authored-by: Ashish Agrawal <ashisagr@amazon.com>
opensearch-project · Apr 19, 2022 · fbea210 · fbea210
1 parent 259335a
commit fbea210
Show file tree

Hide file tree

Showing 52 changed files with 3,656 additions and 874 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,7 +1,11 @@
 // 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')],
+  presets: [
+    require('@babel/preset-env'),
+    require('@babel/preset-react'),
+    require('@babel/preset-typescript'),
+  ],
   plugins: [
     require('@babel/plugin-proposal-class-properties'),
     require('@babel/plugin-proposal-object-rest-spread'),

diff --git a/cypress/fixtures/sample_destination_chime.json b/cypress/fixtures/sample_destination_chime.json
diff --git a/cypress/fixtures/sample_destination_custom_webhook.json b/cypress/fixtures/sample_destination_custom_webhook.json
diff --git a/cypress/integration/bucket_level_monitor_spec.js b/cypress/integration/bucket_level_monitor_spec.js
@@ -5,7 +5,6 @@
 
 import { INDEX, PLUGIN_NAME } from '../support/constants';
 import sampleAggregationQuery from '../fixtures/sample_aggregation_query';
-import sampleDestination from '../fixtures/sample_destination_custom_webhook';
 import sampleExtractionQueryMonitor from '../fixtures/sample_extraction_query_bucket_level_monitor';
 import sampleVisualEditorMonitor from '../fixtures/sample_visual_editor_bucket_level_monitor';
 
@@ -309,7 +308,6 @@ describe('Bucket-Level Monitors', () => {
   after(() => {
     // Delete all monitors and destinations
     cy.deleteAllMonitors();
-    cy.deleteAllDestinations();
 
     // Delete sample data
     cy.deleteIndexByName(`${INDEX.SAMPLE_DATA_ECOMMERCE}`);

diff --git a/cypress/integration/cluster_metrics_monitor_spec.js b/cypress/integration/cluster_metrics_monitor_spec.js
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import sampleDestination from '../fixtures/sample_destination_custom_webhook';
 import sampleClusterMetricsMonitor from '../fixtures/sample_cluster_metrics_monitor.json';
 import { INDEX, PLUGIN_NAME } from '../../cypress/support/constants';
 
@@ -392,7 +391,6 @@ describe('ClusterMetricsMonitor', () => {
   after(() => {
     // Delete all monitors and destinations
     cy.deleteAllMonitors();
-    cy.deleteAllDestinations();
 
     // Delete sample data
     cy.deleteIndexByName(`${INDEX.SAMPLE_DATA_ECOMMERCE}`);

diff --git a/cypress/integration/destination_spec.js b/cypress/integration/destination_spec.js
diff --git a/cypress/integration/query_level_monitor_spec.js b/cypress/integration/query_level_monitor_spec.js
@@ -7,7 +7,6 @@ import _ from 'lodash';
 import { INDEX, PLUGIN_NAME } from '../support/constants';
 import sampleQueryLevelMonitor from '../fixtures/sample_query_level_monitor';
 import sampleQueryLevelMonitorWithAlwaysTrueTrigger from '../fixtures/sample_query_level_monitor_with_always_true_trigger';
-import sampleDestination from '../fixtures/sample_destination_custom_webhook.json';
 
 const SAMPLE_MONITOR = 'sample_query_level_monitor';
 const UPDATED_MONITOR = 'updated_query_level_monitor';
@@ -314,7 +313,6 @@ describe('Query-Level Monitors', () => {
   after(() => {
     // Delete all existing monitors and destinations
     cy.deleteAllMonitors();
-    cy.deleteAllDestinations();
 
     // Delete sample data
     cy.deleteIndexByName(`${INDEX.SAMPLE_DATA_ECOMMERCE}`);

diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -74,10 +74,6 @@ Cypress.Commands.add('createMonitor', (monitorJSON) => {
   cy.request('POST', `${Cypress.env('opensearch')}${API.MONITOR_BASE}`, monitorJSON);
 });
 
-Cypress.Commands.add('createDestination', (destinationJSON) => {
-  cy.request('POST', `${Cypress.env('opensearch')}${API.DESTINATION_BASE}`, destinationJSON);
-});
-
 Cypress.Commands.add('createAndExecuteMonitor', (monitorJSON) => {
   cy.request('POST', `${Cypress.env('opensearch')}${API.MONITOR_BASE}`, monitorJSON).then(
     (response) => {
@@ -138,25 +134,6 @@ Cypress.Commands.add('deleteAllMonitors', () => {
   });
 });
 
-Cypress.Commands.add('deleteAllDestinations', () => {
-  cy.request({
-    method: 'GET',
-    url: `${Cypress.env('opensearch')}${API.DESTINATION_BASE}?size=200`,
-    failOnStatusCode: false, // In case there is no alerting config index in cluster, where the status code is 404
-  }).then((response) => {
-    if (response.status === 200) {
-      for (let i = 0; i < response.body.totalDestinations; i++) {
-        cy.request(
-          'DELETE',
-          `${Cypress.env('opensearch')}${API.DESTINATION_BASE}/${response.body.destinations[i].id}`
-        );
-      }
-    } else {
-      cy.log('Failed to get all destinations.', response);
-    }
-  });
-});
-
 Cypress.Commands.add('createIndexByName', (indexName) => {
   cy.request('PUT', `${Cypress.env('opensearch')}/${indexName}`);
 });

diff --git a/public/app.js b/public/app.js
@@ -12,10 +12,14 @@ import 'react-vis/dist/style.css';
 // import './less/main.less';
 import Main from './pages/Main';
 import { CoreContext } from './utils/CoreContext';
+import { ServicesContext, NotificationService } from './services';
 
 export function renderApp(coreStart, params) {
   const isDarkMode = coreStart.uiSettings.get('theme:darkMode') || false;
+  const http = coreStart.http;
   coreStart.chrome.setBreadcrumbs([{ text: 'Alerting' }]); // Set Breadcrumbs for the plugin
+  const notificationService = new NotificationService(http);
+  const services = { notificationService };
 
   // Load Chart's dark mode CSS
   if (isDarkMode) {
@@ -27,11 +31,13 @@ export function renderApp(coreStart, params) {
   // render react to DOM
   ReactDOM.render(
     <Router>
-      <CoreContext.Provider
-        value={{ http: coreStart.http, isDarkMode, notifications: coreStart.notifications }}
-      >
-        <Route render={(props) => <Main title="Alerting" {...props} />} />
-      </CoreContext.Provider>
+      <ServicesContext.Provider value={services}>
+        <CoreContext.Provider
+          value={{ http: coreStart.http, isDarkMode, notifications: coreStart.notifications }}
+        >
+          <Route render={(props) => <Main title="Alerting" {...props} />} />
+        </CoreContext.Provider>
+      </ServicesContext.Provider>
     </Router>,
     params.element
   );

diff --git a/public/models/interfaces.ts b/public/models/interfaces.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { NotificationService } from '../services';
+
+export interface BrowserServices {
+  notificationService: NotificationService;
+}
diff --git a/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js b/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
@@ -242,6 +242,7 @@ export default class CreateMonitor extends Component {
       monitorToEdit,
       notifications,
       isDarkMode,
+      notificationService,
     } = this.props;
     const { initialValues, plugins } = this.state;
 
@@ -296,6 +297,8 @@ export default class CreateMonitor extends Component {
                     isDarkMode={this.props.isDarkMode}
                     httpClient={httpClient}
                     notifications={notifications}
+                    notificationService={notificationService}
+                    plugins={plugins}
                   />
                 )}
               </FieldArray>