Fix side nav minor bugs (#365)

* fix side nav minor bugs
* fix notebook clone link
* add event changes
* Add /explorer to router path to indicate query result page
* Remove /trace_analytics from redirects
* fix trace correlation link

---------

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
Signed-off-by: Joshua Li <joshuali925@gmail.com>
Co-authored-by: Joshua Li <joshuali925@gmail.com>

(cherry picked from commit 34b0311)
Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>

common/constants/shared.ts

@@ -23,7 +23,7 @@ export const PPL_ENDPOINT = '/_plugins/_ppl';
 export const SQL_ENDPOINT = '/_plugins/_sql';
 export const DSL_ENDPOINT = '/_plugins/_dsl';
 
-export const observabilityID = 'observability-dashboards';
+export const observabilityID = 'observability-logs';
 export const observabilityTitle = 'Observability';
 export const observabilityPluginOrder = 6000;
 

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 {

public/components/app.tsx

@@ -7,7 +7,6 @@ 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 { CoreStart } from '../../../../src/core/public';
 import { observabilityID, observabilityTitle } from '../../common/constants/shared';
 import { store } from '../framework/redux/store';
@@ -28,13 +27,23 @@ interface ObservabilityAppDeps {
   savedObjects: any;
   timestampUtils: any;
   queryManager: QueryManager;
+  startPage: string;
 }
 
 // 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,130 +52,40 @@ export const App = ({
   savedObjects,
   timestampUtils,
   queryManager,
+  startPage,
 }: ObservabilityAppDeps) => {
   const { chrome, http, notifications, savedObjects: coreSavedObjects } = CoreStartProp;
   const parentBreadcrumb = {
     text: observabilityTitle,
     href: `${observabilityID}#/`,
   };
 
-  const customPanelBreadcrumb = {
-    text: 'Operational panels',
-    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>
   );
 };

public/components/application_analytics/components/app_table.tsx

@@ -37,7 +37,12 @@ import moment from 'moment';
 import { DeleteModal } from '../../common/helpers/delete_modal';
 import { AppAnalyticsComponentDeps } from '../home';
 import { getCustomModal } from '../../custom_panels/helpers/modal_containers';
-import { pageStyles, UI_DATE_FORMAT } from '../../../../common/constants/shared';
+import {
+  observabilityID,
+  observabilityTitle,
+  pageStyles,
+  UI_DATE_FORMAT,
+} from '../../../../common/constants/shared';
 import { ApplicationType, AvailabilityType } from '../../../../common/types/application_analytics';
 
 interface AppTableProps extends AppAnalyticsComponentDeps {
@@ -72,8 +77,8 @@ export function AppTable(props: AppTableProps) {
     chrome.setBreadcrumbs([
       ...parentBreadcrumbs,
       {
-        text: 'Application analytics',
-        href: '#/application_analytics',
+        text: 'Applications',
+        href: '#/',
       },
     ]);
     clear();
@@ -216,10 +221,7 @@ export function AppTable(props: AppTableProps) {
       sortable: true,
       truncateText: true,
       render: (value, record) => (
-        <EuiLink
-          data-test-subj={`${record.name}ApplicationLink`}
-          href={`#/application_analytics/${record.id}`}
-        >
+        <EuiLink data-test-subj={`${record.name}ApplicationLink`} href={`#/${record.id}`}>
           {_.truncate(record.name, { length: 100 })}
         </EuiLink>
       ),
@@ -284,7 +286,7 @@ export function AppTable(props: AppTableProps) {
                     </EuiPopover>
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiButton fill href="#/application_analytics/create">
+                    <EuiButton fill href="#/create">
                       {createButtonText}
                     </EuiButton>
                   </EuiFlexItem>
@@ -324,7 +326,7 @@ export function AppTable(props: AppTableProps) {
                 <EuiSpacer size="m" />
                 <EuiFlexGroup justifyContent="center">
                   <EuiFlexItem grow={false}>
-                    <EuiButton fullWidth={false} href={`#/application_analytics/create`}>
+                    <EuiButton fullWidth={false} href={`#/create`}>
                       {createButtonText}
                     </EuiButton>
                   </EuiFlexItem>

public/components/application_analytics/components/application.tsx

@@ -54,7 +54,7 @@ import {
 } from '../../../../common/constants/application_analytics';
 import { TAB_EVENT_ID, TAB_CHART_ID, NEW_TAB } from '../../../../common/constants/explorer';
 import { IQueryTab } from '../../../../common/types/explorer';
-import { NotificationsStart } from '../../../../../../src/core/public';
+import { NotificationsStart, Toast } from '../../../../../../src/core/public';
 import { AppAnalyticsComponentDeps } from '../home';
 import { CustomPanelView } from '../../../../public/components/custom_panels/custom_panel_view';
 import {
@@ -67,6 +67,7 @@ import { SpanDetailFlyout } from '../../../../public/components/trace_analytics/
 import { TraceDetailFlyout } from './flyout_components/trace_detail_flyout';
 import { fetchAppById, initializeTabData } from '../helpers/utils';
 import { QueryManager } from '../../../../common/query_manager/ppl_query_manager';
+import { observabilityApplicationsID } from '../../../../common/constants/shared';
 
 const searchBarConfigs = {
   [TAB_EVENT_ID]: {
@@ -91,6 +92,7 @@ interface AppDetailProps extends AppAnalyticsComponentDeps {
   updateApp: (appId: string, updateAppData: Partial<ApplicationRequestType>, type: string) => void;
   setToasts: (title: string, color?: string, text?: ReactChild) => void;
   callback: (childfunction: () => void) => void;
+  toasts: Toast[];
 }
 
 export function Application(props: AppDetailProps) {
@@ -110,6 +112,7 @@ export function Application(props: AppDetailProps) {
     updateApp,
     setAppConfigs,
     setToasts,
+    toasts,
     setFilters,
     callback,
     queryManager,
@@ -218,12 +221,12 @@ export function Application(props: AppDetailProps) {
     chrome.setBreadcrumbs([
       ...parentBreadcrumbs,
       {
-        text: 'Application analytics',
-        href: '#/application_analytics',
+        text: 'Applications',
+        href: '#/',
       },
       {
         text: application.name,
-        href: `${last(parentBreadcrumbs)!.href}application_analytics/${appId}`,
+        href: `${observabilityApplicationsID}/${appId}`,
       },
     ]);
     setStartTimeForApp(sessionStorage.getItem(`${application.name}StartTime`) || 'now-24h');
@@ -294,6 +297,7 @@ export function Application(props: AppDetailProps) {
           setStartTime={setStartTimeForApp}
           setEndTime={setEndTimeForApp}
           childBreadcrumbs={childBreadcrumbs}
+          toasts={toasts}
         />
       </>
     );

public/components/application_analytics/components/create.tsx

@@ -38,6 +38,7 @@ import {
   OptionType,
 } from '../../../../common/types/application_analytics';
 import { fetchAppById } from '../helpers/utils';
+import { observabilityID, observabilityTitle } from '../../../../common/constants/shared';
 
 interface CreateAppProps extends AppAnalyticsComponentDeps {
   dslService: DSLService;
@@ -90,12 +91,12 @@ export const CreateApp = (props: CreateAppProps) => {
     chrome.setBreadcrumbs([
       ...parentBreadcrumbs,
       {
-        text: 'Application analytics',
-        href: '#/application_analytics',
+        text: 'Applications',
+        href: '#/',
       },
       {
         text: editMode ? 'Edit' : 'Create',
-        href: `#/application_analytics/${editMode ? 'edit' : 'create'}`,
+        href: `#/${editMode ? 'edit' : 'create'}`,
       },
     ]);
   }, []);