Observability - Dashboard Lists Integration

* Register App Analytics, Panels as "Dashboard List Providers" (requires opensearch-project/OpenSearch-Dashboards#2149)

* Register App Analytics, Event Analytics as "Dashboard Left-Nav Links", using existing app.register functions of OSD.  Create a new "top-level" Left-Nav section "Observability"

Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>

common/constants/shared.ts

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import CSS from 'csstype';
-import { IField } from '../../common/types/explorer';
 
 // Client route
 export const PPL_BASE = '/api/ppl';
@@ -27,6 +26,14 @@ export const observabilityID = 'observability-dashboards';
 export const observabilityTitle = 'Observability';
 export const observabilityPluginOrder = 6000;
 
+export const observabilityApplicationsID = 'observability-applications';
+export const observabilityApplicationsTitle = 'Application Analytics';
+export const observabilityApplicationsPluginOrder = 5090;
+
+export const observabilityEventsID = 'observability-events';
+export const observabilityEventsTitle = 'Event Analytics';
+export const observabilityEventsPluginOrder = 5091;
+
 // Shared Constants
 export const SQL_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/search-plugins/sql/index/';
 export const PPL_DOCUMENTATION_URL =

public/components/app.tsx

@@ -4,30 +4,25 @@
  */
 
 import { I18nProvider } from '@osd/i18n/react';
-import { QueryManager } from 'common/query_manager';
 import React from 'react';
 import { Provider } from 'react-redux';
 import { HashRouter, Route, Switch } from 'react-router-dom';
+import { QueryManager } from 'common/query_manager';
 import { CoreStart } from '../../../../src/core/public';
 import { observabilityID, observabilityTitle } from '../../common/constants/shared';
 import store from '../framework/redux/store';
 import { AppPluginStartDependencies } from '../types';
-import { Home as ApplicationAnalyticsHome } from './application_analytics/home';
-import { MetricsListener } from './common/metrics_listener';
-import { Home as CustomPanelsHome } from './custom_panels/home';
-import { EventAnalytics } from './event_analytics';
-import { Home as MetricsHome } from './metrics/index';
-import { Main as NotebooksHome } from './notebooks/components/main';
-import { Home as TraceAnalyticsHome } from './trace_analytics/home';
+import { AppRoutesWrapper } from './routes_wrapper';
 
 interface ObservabilityAppDeps {
-  CoreStartProp: CoreStart;
-  DepsStart: AppPluginStartDependencies;
+  coreStart: CoreStart;
+  depsStart: AppPluginStartDependencies;
   pplService: any;
   dslService: any;
   savedObjects: any;
   timestampUtils: any;
   queryManager: QueryManager;
+  startPage?: String;
 }
 
 // for cypress to test redux store
@@ -36,134 +31,28 @@ if (window.Cypress) {
 }
 
 export const App = ({
-  CoreStartProp,
-  DepsStart,
+  coreStart,
+  depsStart,
   pplService,
   dslService,
   savedObjects,
   timestampUtils,
   queryManager,
+  startPage,
 }: ObservabilityAppDeps) => {
-  const { chrome, http, notifications } = CoreStartProp;
-  const parentBreadcrumb = {
-    text: observabilityTitle,
-    href: `${observabilityID}#/`,
-  };
-
-  const customPanelBreadcrumb = {
-    text: 'Operational panels',
-    href: '#/operational_panels/',
-  };
-
   return (
     <Provider store={store}>
       <HashRouter>
-        <I18nProvider>
-          <MetricsListener http={http}>
-            <Switch>
-              <Route
-                path="/metrics_analytics/"
-                render={(props) => {
-                  chrome.setBreadcrumbs([
-                    parentBreadcrumb,
-                    { text: 'Metrics analytics', href: '#/metrics_analytics/' },
-                  ]);
-                  return (
-                    <MetricsHome
-                      http={http}
-                      chrome={chrome}
-                      parentBreadcrumb={parentBreadcrumb}
-                      renderProps={props}
-                      pplService={pplService}
-                      savedObjects={savedObjects}
-                    />
-                  );
-                }}
-              />
-              <Route
-                path={'/application_analytics'}
-                render={(props) => {
-                  return (
-                    <ApplicationAnalyticsHome
-                      {...props}
-                      chrome={chrome}
-                      http={http}
-                      notifications={notifications}
-                      parentBreadcrumbs={[parentBreadcrumb]}
-                      pplService={pplService}
-                      dslService={dslService}
-                      savedObjects={savedObjects}
-                      timestampUtils={timestampUtils}
-                      queryManager={queryManager}
-                    />
-                  );
-                }}
-              />
-              <Route
-                path="/notebooks"
-                render={(props) => (
-                  <NotebooksHome
-                    {...props}
-                    DashboardContainerByValueRenderer={
-                      DepsStart.dashboard.DashboardContainerByValueRenderer
-                    }
-                    http={http}
-                    pplService={pplService}
-                    setBreadcrumbs={chrome.setBreadcrumbs}
-                    parentBreadcrumb={parentBreadcrumb}
-                    notifications={notifications}
-                  />
-                )}
-              />
-              <Route
-                path="/operational_panels"
-                render={(props) => {
-                  chrome.setBreadcrumbs([parentBreadcrumb, customPanelBreadcrumb]);
-                  return (
-                    <CustomPanelsHome
-                      http={http}
-                      chrome={chrome}
-                      parentBreadcrumbs={[parentBreadcrumb, customPanelBreadcrumb]}
-                      pplService={pplService}
-                      dslService={dslService}
-                      renderProps={props}
-                    />
-                  );
-                }}
-              />
-              <Route
-                path={['/trace_analytics', '/trace_analytics/home']}
-                render={(props) => (
-                  <TraceAnalyticsHome
-                    {...props}
-                    chrome={chrome}
-                    http={http}
-                    parentBreadcrumbs={[parentBreadcrumb]}
-                  />
-                )}
-              />
-              <Route
-                path={['/', '/event_analytics']}
-                render={(props) => {
-                  return (
-                    <EventAnalytics
-                      chrome={chrome}
-                      parentBreadcrumbs={[parentBreadcrumb]}
-                      pplService={pplService}
-                      dslService={dslService}
-                      savedObjects={savedObjects}
-                      timestampUtils={timestampUtils}
-                      http={http}
-                      notifications={notifications}
-                      queryManager={queryManager}
-                      {...props}
-                    />
-                  );
-                }}
-              />
-            </Switch>
-          </MetricsListener>
-        </I18nProvider>
+        <AppRoutesWrapper
+          coreStart={coreStart}
+          depsStart={depsStart}
+          pplService={pplService}
+          dslService={dslService}
+          savedObjects={savedObjects}
+          timestampUtils={timestampUtils}
+          queryManager={queryManager}
+          startPage={startPage}
+        ></AppRoutesWrapper>{' '}
       </HashRouter>
     </Provider>
   );

public/components/application_analytics/helpers/utils.tsx

@@ -41,6 +41,8 @@ import {
   init as initPatterns,
   remove as removePatterns,
 } from '../../event_analytics/redux/slices/patterns_slice';
+import { from } from 'rxjs';
+import { mergeMap } from 'rxjs/operators';
 
 // Name validation
 export const isNameValid = (name: string, existingNames: string[]) => {
@@ -182,6 +184,10 @@ export const initializeTabData = async (dispatch: Dispatch<any>, tabId: string,
   });
 };
 
+export const fetchAppsList = (http: HttpSetup) => {
+  return from(http.get(`${APP_ANALYTICS_API_PREFIX}/`)).pipe(mergeMap((res) => res.data));
+};
+
 export const fetchPanelsVizIdList = async (http: HttpSetup, appPanelId: string) => {
   return await http
     .get(`${CUSTOM_PANELS_API_PREFIX}/panels/${appPanelId}`)

public/components/custom_panels/helpers/utils.tsx

@@ -20,11 +20,15 @@ import { Visualization } from '../../visualizations/visualization';
 import { getVizContainerProps } from '../../../components/visualizations/charts/helpers';
 import { QueryManager } from '../../../../common/query_manager';
 import { getDefaultVisConfig } from '../../event_analytics/utils';
+import { from } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+import { HttpSetup } from '../../src/core/target/types/public';
 import { removeBacktick } from '../../../../common/utils';
 
 /*
  * "Utils" This file contains different reused functions in operational panels
  *
+ * fetchPanelsList - Get list of Observability Panel from Custom Panels API
  * isNameValid - Validates string to length > 0 and < 50
  * convertDateTime - Converts input datetime string to required format
  * mergeLayoutAndVisualizations - Function to merge current panel layout into the visualizations list
@@ -36,6 +40,16 @@ import { removeBacktick } from '../../../../common/utils';
  * displayVisualization - Function to render the visualzation based of its type
  */
 
+export const fetchPanelsList = (http: HttpSetup) => {
+  return from(http.get(`${CUSTOM_PANELS_API_PREFIX}/panels`)).pipe(
+    map((res) => res.panels),
+    catchError((err) => {
+      console.error('Issue in fetching the operational panels', err.body.message);
+      return from([]);
+    })
+  );
+};
+
 // Name validation 0>Name<=50
 export const isNameValid = (name: string) => {
   return name.length >= 50 || name.length === 0 ? false : true;

public/components/index.tsx

@@ -18,17 +18,19 @@ export const Observability = (
   dslService: any,
   savedObjects: any,
   timestampUtils: any,
-  queryManager: QueryManager
+  queryManager: QueryManager,
+  startPage?: String
 ) => {
   ReactDOM.render(
     <App
-      CoreStartProp={CoreStartProp}
-      DepsStart={DepsStart}
+      coreStart={CoreStartProp}
+      depsStart={DepsStart}
       pplService={pplService}
       dslService={dslService}
       savedObjects={savedObjects}
       timestampUtils={timestampUtils}
       queryManager={queryManager}
+      startPage={startPage}
     />,
     AppMountParametersProp.element
   );