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>

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

@@ -319,15 +319,15 @@ export interface Breadcrumbs {
 
 export interface EventAnalyticsProps {
   chrome: CoreSetup;
-  parentBreadcrumbs: ChromeBreadcrumb;
+  parentBreadcrumbs: ChromeBreadcrumb[];
   pplService: any;
   dslService: any;
   savedObjects: SavedObjectsStart;
   timestampUtils: TimestampUtils;
   http: HttpStart;
   notifications: NotificationsStart;
   queryManager: QueryManager;
-  setBreadcrumbs:(newBreadcrumbs: ChromeBreadcrumb[]) => void;
+  setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
 }
 
 export interface DataConfigPanelProps {

public/components/app.tsx

@@ -6,10 +6,8 @@
 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 { AppMountParameters, CoreStart } from '../../../../src/core/public';
+import { CoreStart } from '../../../../src/core/public';
 import { observabilityID, observabilityTitle } from '../../common/constants/shared';
 import { store } from '../framework/redux/store';
 import { AppPluginStartDependencies } from '../types';
@@ -30,7 +28,6 @@ interface ObservabilityAppDeps {
   timestampUtils: any;
   queryManager: QueryManager;
   startPage: string;
-  // mountParams: AppMountParameters;
 }
 
 // for cypress to test redux store
@@ -55,7 +52,6 @@ export const App = ({
   savedObjects,
   timestampUtils,
   queryManager,
-  // mountParams,
   startPage,
 }: ObservabilityAppDeps) => {
   const { chrome, http, notifications, savedObjects: coreSavedObjects } = CoreStartProp;
@@ -64,11 +60,6 @@ export const App = ({
     href: `${observabilityID}#/`,
   };
 
-  const customPanelBreadcrumb = {
-    text: 'Operational panels',
-    href: '#/operational_panels/',
-  };
-
   const ModuleComponent = pages[startPage];
 
   return (
@@ -98,122 +89,3 @@ export const App = ({
     </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>
-// );
-// };

public/components/application_analytics/components/app_table.tsx

@@ -75,10 +75,7 @@ export function AppTable(props: AppTableProps) {
 
   useEffect(() => {
     chrome.setBreadcrumbs([
-      {
-        text: observabilityTitle,
-        href: `${observabilityID}#/`,
-      },
+      ...parentBreadcrumbs,
       {
         text: 'Applications',
         href: '#/',

public/components/application_analytics/components/application.tsx

@@ -53,7 +53,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 {
@@ -66,6 +66,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]: {
@@ -90,6 +91,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) {
@@ -109,6 +111,7 @@ export function Application(props: AppDetailProps) {
     updateApp,
     setAppConfigs,
     setToasts,
+    toasts,
     setFilters,
     callback,
     queryManager,
@@ -213,21 +216,21 @@ export function Application(props: AppDetailProps) {
     callback(switchToEvent);
   }, [appId]);
 
-  /* useEffect(() => {
+  useEffect(() => {
     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');
     setEndTimeForApp(sessionStorage.getItem(`${application.name}EndTime`) || 'now');
-  }, [appId, application.name]); */
+  }, [appId, application.name]);
 
   useEffect(() => {
     const DSL = filtersToDsl(mode, filters, query, appStartTime, appEndTime, 'app', appConfigs);
@@ -293,6 +296,7 @@ export function Application(props: AppDetailProps) {
           setStartTime={setStartTimeForApp}
           setEndTime={setEndTimeForApp}
           childBreadcrumbs={childBreadcrumbs}
+          toasts={toasts}
         />
       </>
     );

public/components/application_analytics/components/create.tsx

@@ -89,10 +89,7 @@ export const CreateApp = (props: CreateAppProps) => {
 
   useEffect(() => {
     chrome.setBreadcrumbs([
-      {
-        text: observabilityTitle,
-        href: `${observabilityID}#/`,
-      },
+      ...parentBreadcrumbs,
       {
         text: 'Applications',
         href: '#/',

public/components/application_analytics/home.tsx

@@ -20,7 +20,6 @@ import { CreateApp } from './components/create';
 import { TraceAnalyticsComponentDeps, TraceAnalyticsCoreDeps } from '../trace_analytics/home';
 import { FilterType } from '../trace_analytics/components/common/filters/filters';
 import { handleDataPrepperIndicesExistRequest } from '../trace_analytics/requests/request_handler';
-import { ObservabilitySideBar } from '../common/side_nav';
 import { ChromeBreadcrumb, NotificationsStart } from '../../../../../src/core/public';
 import { APP_ANALYTICS_API_PREFIX } from '../../../common/constants/application_analytics';
 import {
@@ -38,6 +37,7 @@ import {
   CUSTOM_PANELS_DOCUMENTATION_URL,
 } from '../../../common/constants/custom_panels';
 import { QueryManager } from '../../../common/query_manager/ppl_query_manager';
+import { observabilityApplicationsID } from '../../../common/constants/shared';
 
 export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
 
@@ -48,6 +48,7 @@ interface HomeProps extends RouteComponentProps, AppAnalyticsCoreDeps {
   timestampUtils: TimestampUtils;
   notifications: NotificationsStart;
   queryManager: QueryManager;
+  parentBreadcrumbs: ChromeBreadcrumb[];
 }
 
 export interface AppAnalyticsComponentDeps extends TraceAnalyticsComponentDeps {
@@ -58,6 +59,7 @@ export interface AppAnalyticsComponentDeps extends TraceAnalyticsComponentDeps {
   setQueryWithStorage: (newQuery: string) => void;
   setFiltersWithStorage: (newFilters: FilterType[]) => void;
   setAppConfigs: (newAppConfigs: FilterType[]) => void;
+  parentBreadcrumbs: ChromeBreadcrumb[];
 }
 
 export const Home = (props: HomeProps) => {
@@ -153,7 +155,7 @@ export const Home = (props: HomeProps) => {
   };
 
   const moveToApp = (id: string, type: string) => {
-    window.location.assign(`${last(parentBreadcrumbs)!.href}/${id}`);
+    window.location.assign(`${observabilityApplicationsID}#/${id}`);
     if (type === 'createSetAvailability') {
       setTriggerSwitchToEvent(2);
     }
@@ -434,6 +436,7 @@ export const Home = (props: HomeProps) => {
                 savedObjects={savedObjects}
                 timestampUtils={timestampUtils}
                 notifications={notifications}
+                toasts={toasts}
                 setToasts={setToast}
                 updateApp={updateApp}
                 callback={callback}

public/components/custom_panels/home.tsx

@@ -6,38 +6,33 @@
 import { EuiBreadcrumb, EuiGlobalToastList, EuiLink, ShortDate } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import _ from 'lodash';
-import React, { ReactChild, useEffect, useState } from 'react';
+import React, { ReactChild, useState } from 'react';
+import { useDispatch } from 'react-redux';
 // eslint-disable-next-line @osd/eslint/module_migration
 import { StaticContext } from 'react-router';
 import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
-import { map, mergeMap, tap, toArray } from 'rxjs/operators';
-import { concat, from, Observable, of } from 'rxjs';
-import { useDispatch } from 'react-redux';
-import PPLService from '../../services/requests/ppl';
-import DSLService from '../../services/requests/dsl';
 import { CoreStart, SavedObjectsStart } from '../../../../../src/core/public';
-
 import {
   CUSTOM_PANELS_API_PREFIX,
   CUSTOM_PANELS_DOCUMENTATION_URL,
   CUSTOM_PANELS_SAVED_OBJECT_TYPE,
 } from '../../../common/constants/custom_panels';
 import {
   EVENT_ANALYTICS,
+  observabilityLogsID,
+  observabilityPanelsID,
   OBSERVABILITY_BASE,
   SAVED_OBJECTS,
 } from '../../../common/constants/shared';
-import {
-  CustomPanelListType,
-  ObservabilityPanelAttrs,
-  PanelType,
-} from '../../../common/types/custom_panels';
+import { ObservabilityPanelAttrs } from '../../../common/types/custom_panels';
+import { coreRefs } from '../../framework/core_refs';
+import DSLService from '../../services/requests/dsl';
+import PPLService from '../../services/requests/ppl';
 import { CustomPanelTable } from './custom_panel_table';
 import { CustomPanelView } from './custom_panel_view';
-import { isNameValid } from './helpers/utils';
 import { CustomPanelViewSO } from './custom_panel_view_so';
-import { coreRefs } from '../../framework/core_refs';
-import { deletePanel, fetchPanels, uuidRx } from './redux/panel_slice';
+import { isNameValid } from './helpers/utils';
+import { fetchPanels } from './redux/panel_slice';
 
 // import { ObjectFetcher } from '../common/objectFetcher';
 
@@ -86,7 +81,7 @@ export const Home = ({
     ...parentBreadcrumbs,
     {
       text: 'Dashboards',
-      href: `${_.last(parentBreadcrumbs)!.href}`,
+      href: `${observabilityPanelsID}#/`,
     },
   ];
 
@@ -97,7 +92,7 @@ export const Home = ({
   };
 
   const onEditClick = (savedVisualizationId: string) => {
-    window.location.assign(`#/event_analytics/explorer/${savedVisualizationId}`);
+    window.location.assign(`${observabilityLogsID}#/explorer/${savedVisualizationId}`);
   };
 
   // Creates a new CustomPanel

public/components/event_analytics/explorer/events_views/docViewer.tsx

@@ -20,6 +20,7 @@ import { HttpSetup } from '../../../../../../../src/core/public';
 import { TraceBlock } from './trace_block/trace_block';
 import { OTEL_TRACE_ID } from '../../../../../common/constants/explorer';
 import { isValidTraceId } from '../../utils';
+import { observabilityTracesID } from '../../../../../common/constants/shared';
 
 interface IDocViewerProps {
   http: HttpSetup;
@@ -102,7 +103,7 @@ export function DocViewer(props: IDocViewerProps) {
       setTracesLink(
         <EuiLink
           className="trace-link"
-          href={`#/trace_analytics/traces/${traceId}`}
+          href={`${observabilityTracesID}#/${traceId}`}
           target="_blank"
           external
         />

public/components/event_analytics/explorer/log_explorer.tsx

@@ -92,9 +92,7 @@ export const LogExplorer = ({
   }, [tabIds]);
 
   const handleTabClick = (selectedTab: EuiTabbedContentTab) => {
-    history.replace(
-      `/${queryRef.current![selectedTab.id][SAVED_OBJECT_ID] || ''}`
-    );
+    history.replace(`/explorer/${queryRef.current![selectedTab.id][SAVED_OBJECT_ID] || ''}`);
     dispatch(setSelectedQueryTab({ tabId: selectedTab.id }));
   };
 

public/components/event_analytics/home/home.tsx

@@ -49,10 +49,7 @@ import {
   ExplorerData as IExplorerData,
   IQuery,
 } from '../../../../common/types/explorer';
-import { getOSDSavedObjectsClient } from '../../../../common/utils';
 import SavedObjects from '../../../services/saved_objects/event_analytics/saved_objects';
-import { OSDSavedVisualizationClient } from '../../../services/saved_objects/saved_object_client/osd_saved_objects/saved_visualization';
-import { PPLSavedQueryClient } from '../../../services/saved_objects/saved_object_client/ppl';
 import { SavedObjectsActions } from '../../../services/saved_objects/saved_object_client/saved_objects_actions';
 import { ObservabilitySavedObject } from '../../../services/saved_objects/saved_object_client/types';
 import { getSampleDataModal } from '../../common/helpers/add_sample_modal';
@@ -223,7 +220,7 @@ const EventAnalyticsHome = (props: IHomeProps) => {
       dispatch(setSelectedQueryTab({ tabId: newTabId }));
     });
     // redirect to explorer
-    history.push(`/${objectId}`);
+    history.push(`/explorer/${objectId}`);
   };
 
   const addSampledata = async () => {
@@ -334,7 +331,7 @@ const EventAnalyticsHome = (props: IHomeProps) => {
       key="redirect"
       onClick={() => {
         setIsActionsPopoverOpen(false);
-        history.push(`/`);
+        history.push(`/explorer`);
       }}
       data-test-subj="eventHomeAction__explorer"
     >
@@ -456,7 +453,7 @@ const EventAnalyticsHome = (props: IHomeProps) => {
                       <EuiFlexItem grow={false}>
                         <EuiButton
                           fullWidth={false}
-                          onClick={() => history.push(`/`)}
+                          onClick={() => history.push(`/explorer`)}
                           data-test-subj="actionEventExplorer"
                         >
                           Event Explorer

public/components/event_analytics/index.tsx

@@ -3,17 +3,14 @@
  * 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';
 import { isEmpty } from 'lodash';
 import React, { createContext, ReactChild, useState } from 'react';
 import { HashRouter, Route, RouteComponentProps, Switch, useHistory } from 'react-router-dom';
-import { useEffect } from 'react';
 import { RAW_QUERY } from '../../../common/constants/explorer';
-import { ObservabilitySideBar } from '../common/side_nav';
+import '../../variables.scss';
 import { LogExplorer } from './explorer/log_explorer';
 import { Home as EventExplorerHome } from './home/home';
 
@@ -39,7 +36,7 @@ export const EventAnalytics = ({
   const [toasts, setToasts] = useState<Toast[]>([]);
 
   const eventAnalyticsBreadcrumb = {
-    text: 'Event analytics',
+    text: 'Logs',
     href: '#/',
   };
 
@@ -60,16 +57,6 @@ export const EventAnalytics = ({
     return emptyTabId;
   };
 
-  useEffect(() => {
-    setBreadcrumbs([
-      ...parentBreadcrumbs,
-      {
-        text: 'Logs',
-        href: `#/`,
-      },
-    ]);
-  }, [setBreadcrumbs, parentBreadcrumbs]);
-
   return (
     <>
       <EuiGlobalToastList
@@ -82,14 +69,14 @@ export const EventAnalytics = ({
       <HashRouter>
         <Switch>
           <Route
-            path={[`/explorer/:id`, '/explorer']}
+            path={['/explorer/:id', '/explorer']}
             render={(routerProps) => {
-              chrome.setBreadcrumbs([
+              setBreadcrumbs([
                 ...parentBreadcrumbs,
                 eventAnalyticsBreadcrumb,
                 {
                   text: 'Explorer',
-                  href: `#/`,
+                  href: `#/explorer`,
                 },
               ]);
               return (
@@ -120,21 +107,14 @@ export const EventAnalytics = ({
             exact
             path={[`/`]}
             render={() => {
-              // chrome.setBreadcrumbs([
-              //   ...parentBreadcrumbs,
-              //   eventAnalyticsBreadcrumb,
-              //   {
-              //     text: 'Home',
-              //     href: '#/',
-              //   },
-              // ]);
-              // setBreadcrumbs([
-              //   parentBreadcrumbs,
-              //   {
-              //     text: 'Home',
-              //     href: '#/',
-              //   },
-              // ]);
+              setBreadcrumbs([
+                ...parentBreadcrumbs,
+                eventAnalyticsBreadcrumb,
+                {
+                  text: 'Home',
+                  href: '#/',
+                },
+              ]);
               return (
                 <EventExplorerHome
                   http={http}
@@ -152,5 +132,3 @@ export const EventAnalytics = ({
     </>
   );
 };
-
-export default EventAnalytics;

public/components/index.tsx

@@ -31,8 +31,7 @@ export const Observability = (
       timestampUtils={timestampUtils}
       queryManager={queryManager}
       startPage={startPage}
-      // mountParams={undefined}
-      />,
+    />,
     AppMountParametersProp.element
   );
 

public/components/notebooks/components/main.tsx

@@ -16,7 +16,6 @@ import {
   NOTEBOOKS_API_PREFIX,
   NOTEBOOKS_DOCUMENTATION_URL,
 } from '../../../../common/constants/notebooks';
-import { ObservabilitySideBar } from '../../common/side_nav';
 import { Notebook } from './notebook';
 import { NoteTable } from './note_table';
 

public/components/notebooks/components/notebook.tsx

@@ -306,7 +306,7 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
       modalLayout: getCustomModal(
         (newName: string) => {
           this.props.cloneNotebook(newName, this.props.openedNoteId).then((id: string) => {
-            window.location.assign(`#/notebooks/${id}`);
+            window.location.assign(`#/${id}`);
             setTimeout(() => {
               this.loadNotebook();
             }, 300);

public/components/trace_analytics/components/dashboard/dashboard_table.tsx

@@ -152,6 +152,7 @@ export function DashboardTable(props: {
           </>
         ),
         align: 'center',
+        // eslint-disable-next-line @typescript-eslint/naming-convention
         sortable: ({ dashboard_latency_variance }) =>
           dashboard_latency_variance?.length > 0
             ? dashboard_latency_variance[2] - dashboard_latency_variance[0]
@@ -336,7 +337,7 @@ export function DashboardTable(props: {
               });
               if (props.page !== 'app') {
                 props.setRedirect(true);
-                location.assign('#/trace_analytics/traces');
+                location.assign('#/traces');
               }
             }}
           >

public/components/trace_analytics/components/dashboard/top_error_rates_table.tsx

@@ -206,7 +206,7 @@ export function ErrorRatesTable(props: {
               ]);
               if (props.page !== 'app') {
                 props.setRedirect(true);
-                location.assign('#/trace_analytics/traces');
+                location.assign('#/traces');
               }
             }}
           >

public/components/trace_analytics/components/dashboard/top_latency_table.tsx

@@ -162,6 +162,7 @@ export function LatencyTable(props: {
           </>
         ),
         align: 'center',
+        // eslint-disable-next-line @typescript-eslint/naming-convention
         sortable: ({ dashboard_latency_variance }) =>
           dashboard_latency_variance?.length > 0
             ? dashboard_latency_variance[2] - dashboard_latency_variance[0]
@@ -320,7 +321,7 @@ export function LatencyTable(props: {
               ]);
               if (props.page !== 'app') {
                 props.setRedirect(true);
-                location.assign('#/trace_analytics/traces');
+                location.assign('#/traces');
               }
             }}
           >

public/components/trace_analytics/components/services/service_view.tsx

@@ -65,15 +65,15 @@ export function ServiceView(props: ServiceViewProps) {
       props.parentBreadcrumb,
       {
         text: 'Trace analytics',
-        href: '#/trace_analytics/home',
+        href: '#/home',
       },
       {
         text: 'Services',
-        href: '#/trace_analytics/services',
+        href: '#/services',
       },
       {
         text: props.serviceName,
-        href: `#/trace_analytics/services/${encodeURIComponent(props.serviceName)}`,
+        href: `#/services/${encodeURIComponent(props.serviceName)}`,
       },
     ]);
   }, [props.serviceName]);
@@ -138,7 +138,7 @@ export function ServiceView(props: ServiceViewProps) {
                     {fields.connected_services && fields.connected_services.length
                       ? fields.connected_services
                           .map((service: string) => (
-                            <EuiLink href={`#/trace_analytics/services/${service}`} key={service}>
+                            <EuiLink href={`#/services/${service}`} key={service}>
                               {service}
                             </EuiLink>
                           ))
@@ -193,7 +193,7 @@ export function ServiceView(props: ServiceViewProps) {
                           inverted: false,
                           disabled: false,
                         });
-                        location.assign('#/trace_analytics/traces');
+                        location.assign('#/traces');
                       }}
                     >
                       <EuiI18nNumber value={fields.traces} />

public/components/trace_analytics/components/traces/trace_view.tsx

@@ -209,15 +209,15 @@ export function TraceView(props: TraceViewProps) {
       props.parentBreadcrumb,
       {
         text: 'Trace analytics',
-        href: '#/trace_analytics/home',
+        href: '#/home',
       },
       {
         text: 'Traces',
-        href: '#/trace_analytics/traces',
+        href: '#/traces',
       },
       {
         text: props.traceId,
-        href: `#/trace_analytics/traces/${encodeURIComponent(props.traceId)}`,
+        href: `#/traces/${encodeURIComponent(props.traceId)}`,
       },
     ]);
     refresh();

public/components/trace_analytics/home.tsx

@@ -134,13 +134,12 @@ export const Home = (props: HomeProps) => {
     },
   ];
 
-  const nameColumnAction = (item: any) =>
-    location.assign(`#/trace_analytics/services/${encodeURIComponent(item)}`);
+  const nameColumnAction = (item: any) => location.assign(`#/services/${encodeURIComponent(item)}`);
 
-  const traceColumnAction = () => location.assign('#/trace_analytics/traces');
+  const traceColumnAction = () => location.assign('#/traces');
 
   const traceIdColumnAction = (item: any) =>
-    location.assign(`#/trace_analytics/traces/${encodeURIComponent(item)}`);
+    location.assign(`#/traces/${encodeURIComponent(item)}`);
 
   const [appConfigs, _] = useState([]);