PPL Alerting with Feature Flag

opensearch_dashboards.json

@@ -3,7 +3,7 @@
   "version": "3.3.0.0",
   "opensearchDashboardsVersion": "3.3.0",
   "configPath": ["opensearch_alerting"],
-  "optionalPlugins": ["dataSource", "dataSourceManagement", "assistantDashboards"],
+  "optionalPlugins": ["dataSource", "dataSourceManagement", "assistantDashboards", "explore"],
   "requiredPlugins": [
     "uiActions",
     "dashboard",

package.json

@@ -36,10 +36,12 @@
     "@types/react": "^16.14.23"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.6.1",
     "brace": "0.11.1",
     "formik": "^2.2.6",
     "lodash": "^4.17.21",
     "query-string": "^6.13.2",
+    "react-redux": "^7.2.0",
     "react-vis": "^1.8.1",
     "prettier": "^2.1.1"
   },
@@ -62,7 +64,10 @@
     "micromatch": "^4.0.8",
     "**/cross-spawn": "7.0.6",
     "elliptic": "^6.6.1",
-    "pbkdf2": "^3.1.3"
+    "pbkdf2": "^3.1.3",
+    "cipher-base": "^1.0.7",
+    "sha.js": "^2.4.12",
+    "form-data": "4.0.4"
   },
   "engines": {
     "yarn": "^1.21.1"

public/app.js

@@ -5,6 +5,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { HashRouter as Router, Route } from 'react-router-dom';
+import { Provider } from 'react-redux';
 
 import 'react-vis/dist/style.css';
 // TODO: review the CSS style and migrate the necessary style to SASS, as Less is not supported in OpenSearch Dashboards "new platform" anymore
@@ -14,13 +15,16 @@ import Main from './pages/Main';
 import { CoreContext } from './utils/CoreContext';
 import { ServicesContext, NotificationService, getDataSourceEnabled } from './services';
 import { initManageChannelsUrl } from './utils/helpers';
+import { OpenSearchDashboardsContextProvider } from '../../../src/plugins/opensearch_dashboards_react/public';
+import { getAlertingStore } from './redux/store';
+import { DatasetProvider } from './contexts';
 
-export function renderApp(coreStart, params, defaultRoute) {
+export function renderApp(coreStart, depsStart, params, defaultRoute) {
   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 };
+  const services = { notificationService, data: depsStart?.data };
   const mdsProps = {
     setActionMenu: params.setHeaderActionMenu,
     dataSourceEnabled: getDataSourceEnabled()?.enabled,
@@ -39,25 +43,37 @@ export function renderApp(coreStart, params, defaultRoute) {
 
   initManageChannelsUrl(coreStart.http);
 
-  // render react to DOM
+  // Initialize Redux store
+  const store = getAlertingStore();
+
   ReactDOM.render(
-    <Router>
-      <ServicesContext.Provider value={services}>
-        <CoreContext.Provider
-          value={{
-            http: coreStart.http,
-            isDarkMode,
-            notifications: coreStart.notifications,
-            chrome: coreStart.chrome,
-            defaultRoute: defaultRoute,
-          }}
-        >
-          <Route
-            render={(props) => <Main title="Alerting" {...mdsProps} {...navProps} {...props} />}
-          />
-        </CoreContext.Provider>
-      </ServicesContext.Provider>
-    </Router>,
+    <Provider store={store}>
+      <OpenSearchDashboardsContextProvider services={{ ...coreStart, ...depsStart }}>
+        <OpenSearchDashboardsContextProvider services={{ data: depsStart?.data }}>
+          <DatasetProvider>
+            <Router>
+              <ServicesContext.Provider value={services}>
+                <CoreContext.Provider
+                  value={{
+                    http: coreStart.http,
+                    isDarkMode,
+                    notifications: coreStart.notifications,
+                    chrome: coreStart.chrome,
+                    defaultRoute: defaultRoute,
+                    data: depsStart?.data,
+                    services: { ...coreStart, ...depsStart },
+                  }}
+                >
+                  <Route
+                    render={(props) => <Main title="Alerting" {...mdsProps} {...navProps} {...props} />}
+                  />
+                </CoreContext.Provider>
+              </ServicesContext.Provider>
+            </Router>
+          </DatasetProvider>
+        </OpenSearchDashboardsContextProvider>
+      </OpenSearchDashboardsContextProvider>
+    </Provider>,
     params.element
   );
   return () => ReactDOM.unmountComponentAtNode(params.element);