Left-Nav app registrations for Observability - WIP (opensearch-projec…

…t#350) * Left Nav links. Working for Notebook. * Remove observability side bar * Events URL working * Fix metrics link from left nav * Fix applications link --------- Signed-off-by: Peter Fitzgibbons <[email protected]> Signed-off-by: Rupal Mahajan <[email protected]> Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> Signed-off-by: Derek Ho <[email protected]> Signed-off-by: Eric Wei <[email protected]> Co-authored-by: Peter Fitzgibbons <[email protected]> Co-authored-by: Rupal Mahajan <[email protected]> Co-authored-by: Kavitha Conjeevaram Mohan <[email protected]> Co-authored-by: Eric Wei <[email protected]> Co-authored-by: Derek Ho <[email protected]>
joshuali925 · Apr 18, 2023 · e2f40f3 · e2f40f3
1 parent d11d1ee
commit e2f40f3
Show file tree

Hide file tree

Showing 24 changed files with 629 additions and 441 deletions.
diff --git a/.cypress/integration/3_panels.spec.ts b/.cypress/integration/3_panels.spec.ts
@@ -110,8 +110,8 @@ describe.only('Testing panels table', () => {
     expectUuid(duplicate)
   });
 
-  it.only('Duplicates a legacy panel', () => {
-    createLegacyPanel()
+  it.only('Duplicates a saved object panel', () => {
+    createSavedObjectPanel()
     selectThePanel();
     openActionsDropdown();
     cy.get('button[data-test-subj="duplicateContextMenuItem"]').click();
@@ -516,13 +516,13 @@ describe('Clean up all test data', () => {
 
 
 const moveToEventsHome = () => {
-  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/`);
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-events#/`);
   cy.wait(delay * 3);
 };
 
 const moveToPanelHome = () => {
   cy.visit(
-    `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/`
+    `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/`
     , { timeout: 3000 });
   cy.wait(delay * 3);
 };

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/common/types/explorer.ts b/common/types/explorer.ts
@@ -37,6 +37,7 @@ import {
   SavedObjectAttributes,
   SavedObjectsStart,
 } from '../../../../src/core/public/saved_objects';
+import { ChromeBreadcrumb } from '../../../../src/core/public/chrome';
 
 export interface IQueryTab {
   id: string;
@@ -318,14 +319,15 @@ export interface Breadcrumbs {
 
 export interface EventAnalyticsProps {
   chrome: CoreSetup;
-  parentBreadcrumbs: Breadcrumbs[];
+  parentBreadcrumbs: ChromeBreadcrumb;
   pplService: any;
   dslService: any;
   savedObjects: SavedObjectsStart;
   timestampUtils: TimestampUtils;
   http: HttpStart;
   notifications: NotificationsStart;
   queryManager: QueryManager;
+  setBreadcrumbs:(newBreadcrumbs: ChromeBreadcrumb[]) => void;
 }
 
 export interface DataConfigPanelProps {

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,24 @@ 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 = {
+  applications: ApplicationAnalyticsHome,
+  logs: EventAnalytics,
+  metrics: MetricsHome,
+  traces: TraceAnalyticsHome,
+  notebooks: NotebooksHome,
+  dashboards: CustomPanelsHome,
+};
+
 export const App = ({
   CoreStartProp,
   DepsStart,
@@ -43,6 +55,8 @@ export const App = ({
   savedObjects,
   timestampUtils,
   queryManager,
+  // mountParams,
+  startPage,
 }: ObservabilityAppDeps) => {
   const { chrome, http, notifications, savedObjects: coreSavedObjects } = CoreStartProp;
   const parentBreadcrumb = {
@@ -55,118 +69,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}
-                      savedObjects={savedObjects}
-                      coreSavedObjects={coreSavedObjects}
-                    />
-                  );
-                }}
-              />
-              <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}
+            chrome={chrome}
+            notifications={notifications}
+            CoreStartProp={CoreStartProp}
+            DepsStart={DepsStart}
+            DashboardContainerByValueRenderer={
+              DepsStart.dashboard.DashboardContainerByValueRenderer
+            }
+            pplService={pplService}
+            dslService={dslService}
+            savedObjects={savedObjects}
+            timestampUtils={timestampUtils}
+            queryManager={queryManager}
+            parentBreadcrumb={parentBreadcrumb}
+            parentBreadcrumbs={[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>
+// );
+// };