Left Nav links. Working for Notebook.

Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>
opensearch-project · Apr 14, 2023 · 9e46292 · 9e46292
1 parent 583010d
commit 9e46292
Show file tree

Hide file tree

Showing 9 changed files with 338 additions and 157 deletions.
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
@@ -27,6 +27,30 @@ export const observabilityID = 'observability-dashboards';
 export const observabilityTitle = 'Observability';
 export const observabilityPluginOrder = 6000;
 
+export const observabilityApplicationsID = 'observability-applications';
+export const observabilityApplicationsTitle = 'Applications';
+export const observabilityApplicationsPluginOrder = 5090;
+
+export const observabilityLogsID = 'observability-logs';
+export const observabilityLogsTitle = 'Logs';
+export const observabilityLogsPluginOrder = 5091;
+
+export const observabilityMetricsID = 'observability-metrics';
+export const observabilityMetricsTitle = 'Metrics';
+export const observabilityMetricsPluginOrder = 5092;
+
+export const observabilityTracesID = 'observability-traces';
+export const observabilityTracesTitle = 'Traces';
+export const observabilityTracesPluginOrder = 5093;
+
+export const observabilityNotebookID = 'observability-notebooks';
+export const observabilityNotebookTitle = 'Notebooks';
+export const observabilityNotebookPluginOrder = 5094;
+
+export const observabilityPanelsID = 'observability-dashboards';
+export const observabilityPanelsTitle = 'Dashboards';
+export const observabilityPanelsPluginOrder = 5095;
+
 // Shared Constants
 export const SQL_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/search-plugins/sql/index/';
 export const PPL_DOCUMENTATION_URL =

diff --git a/public/components/app.tsx b/public/components/app.tsx
@@ -6,9 +6,10 @@
 import { I18nProvider } from '@osd/i18n/react';
 import { QueryManager } from 'common/query_manager';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { HashRouter, Route, Switch } from 'react-router-dom';
-import { CoreStart } from '../../../../src/core/public';
+import { AppMountParameters, CoreStart } from '../../../../src/core/public';
 import { observabilityID, observabilityTitle } from '../../common/constants/shared';
 import { store } from '../framework/redux/store';
 import { AppPluginStartDependencies } from '../types';
@@ -28,13 +29,21 @@ interface ObservabilityAppDeps {
   savedObjects: any;
   timestampUtils: any;
   queryManager: QueryManager;
+  startPage: string;
+  mountParams: AppMountParameters;
 }
 
 // for cypress to test redux store
 if (window.Cypress) {
   window.store = store;
 }
 
+const pages = {
+  'notebooks': NotebooksHome,
+  'metrics': MetricsHome,
+  'events': EventAnalytics,
+}
+
 export const App = ({
   CoreStartProp,
   DepsStart,
@@ -43,6 +52,8 @@ export const App = ({
   savedObjects,
   timestampUtils,
   queryManager,
+  mountParams,
+  startPage,
 }: ObservabilityAppDeps) => {
   const { chrome, http, notifications } = CoreStartProp;
   const parentBreadcrumb = {
@@ -55,116 +66,151 @@ export const App = ({
     href: '#/operational_panels/',
   };
 
+  const ModuleComponent = pages[startPage]
+
   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>
-      </HashRouter>
+      <I18nProvider>
+        <MetricsListener http={http}>
+
+          <ModuleComponent
+            http={http}
+            notifications={notifications}
+            CoreStartProp={CoreStartProp}
+            DepsStart={DepsStart}
+            DashboardContainerByValueRenderer={
+              DepsStart.dashboard.DashboardContainerByValueRenderer
+            }
+
+            pplService={pplService}
+            dslService={dslService}
+            savedObjects={savedObjects}
+            timestampUtils={timestampUtils}
+            queryManager={queryManager}
+            parentBreadcrumb={parentBreadcrumb}
+            setBreadcrumbs={chrome.setBreadcrumbs}
+          />
+        </MetricsListener>
+      </I18nProvider>
     </Provider>
-  );
+  )
 };
+
+// // redirect legacy notebooks URL to current URL under observability
+// if (window.location.pathname.includes('application_analytics')) {
+//   window.location.assign(convertLegacyAppAnalyticsUrl(window.location));
+// }
+
+// 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>
+//     </HashRouter>
+//   </Provider>
+// );
+// };
diff --git a/public/components/event_analytics/index.tsx b/public/components/event_analytics/index.tsx
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '../../variables.scss';
+
 import { EuiGlobalToastList } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import { EmptyTabParams, EventAnalyticsProps } from 'common/types/explorer';
@@ -133,3 +135,5 @@ export const EventAnalytics = ({
     </>
   );
 };
+
+export default EventAnalytics;
diff --git a/public/components/index.tsx b/public/components/index.tsx
@@ -18,7 +18,8 @@ export const Observability = (
   dslService: any,
   savedObjects: any,
   timestampUtils: any,
-  queryManager: QueryManager
+  queryManager: QueryManager,
+  startPage: string
 ) => {
   ReactDOM.render(
     <App
@@ -29,6 +30,7 @@ export const Observability = (
       savedObjects={savedObjects}
       timestampUtils={timestampUtils}
       queryManager={queryManager}
+      startPage={startPage}
     />,
     AppMountParametersProp.element
   );