Fix applications link

Signed-off-by: Rupal Mahajan <[email protected]>
opensearch-project · Apr 14, 2023 · 2ac7281 · 2ac7281
1 parent c82082c
commit 2ac7281
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 91 deletions.
diff --git a/public/components/application_analytics/components/app_table.tsx b/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 {
@@ -70,10 +75,13 @@ export function AppTable(props: AppTableProps) {
 
   useEffect(() => {
     chrome.setBreadcrumbs([
-      ...parentBreadcrumbs,
       {
-        text: 'Application analytics',
-        href: '#/application_analytics',
+        text: observabilityTitle,
+        href: `${observabilityID}#/`,
+      },
+      {
+        text: 'Applications',
+        href: '#/',
       },
     ]);
     clear();
@@ -216,10 +224,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 +289,7 @@ export function AppTable(props: AppTableProps) {
                     </EuiPopover>
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiButton fill href="#/application_analytics/create">
+                    <EuiButton fill href="#/create">
                       {createButtonText}
                     </EuiButton>
                   </EuiFlexItem>
@@ -324,7 +329,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>

diff --git a/public/components/application_analytics/components/application.tsx b/public/components/application_analytics/components/application.tsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 /* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable no-console */
 
 import {
   EuiHorizontalRule,
@@ -214,7 +213,7 @@ export function Application(props: AppDetailProps) {
     callback(switchToEvent);
   }, [appId]);
 
-  useEffect(() => {
+  /* useEffect(() => {
     chrome.setBreadcrumbs([
       ...parentBreadcrumbs,
       {
@@ -228,7 +227,7 @@ export function Application(props: AppDetailProps) {
     ]);
     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);
@@ -274,11 +273,11 @@ export function Application(props: AppDetailProps) {
   const childBreadcrumbs = [
     {
       text: 'Application analytics',
-      href: '#/application_analytics',
+      href: '#/',
     },
     {
       text: `${application.name}`,
-      href: `#/application_analytics/${appId}`,
+      href: `#/${appId}`,
     },
   ];
 
@@ -351,7 +350,7 @@ export function Application(props: AppDetailProps) {
             openFlyout={setSpanFlyoutId}
             DSL={spanDSL}
             setTotal={setTotalSpans}
-            mode='data_prepper'
+            mode="data_prepper"
           />
         </EuiPanel>
       </>

diff --git a/public/components/application_analytics/components/configuration.tsx b/public/components/application_analytics/components/configuration.tsx
@@ -72,9 +72,7 @@ export const Configuration = (props: ConfigProps) => {
                       fill
                       data-test-subj="editApplicationButton"
                       onClick={() => {
-                        window.location.assign(
-                          `${last(parentBreadcrumbs)!.href}application_analytics/edit/${appId}`
-                        );
+                        window.location.assign(`${last(parentBreadcrumbs)!.href}/edit/${appId}`);
                       }}
                     >
                       Edit

diff --git a/public/components/application_analytics/components/create.tsx b/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;
@@ -88,14 +89,17 @@ export const CreateApp = (props: CreateAppProps) => {
 
   useEffect(() => {
     chrome.setBreadcrumbs([
-      ...parentBreadcrumbs,
       {
-        text: 'Application analytics',
-        href: '#/application_analytics',
+        text: observabilityTitle,
+        href: `${observabilityID}#/`,
+      },
+      {
+        text: 'Applications',
+        href: '#/',
       },
       {
         text: editMode ? 'Edit' : 'Create',
-        href: `#/application_analytics/${editMode ? 'edit' : 'create'}`,
+        href: `#/${editMode ? 'edit' : 'create'}`,
       },
     ]);
   }, []);

diff --git a/public/components/application_analytics/home.tsx b/public/components/application_analytics/home.tsx
@@ -5,7 +5,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import React, { ReactChild, useEffect, useState } from 'react';
-import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import DSLService from 'public/services/requests/dsl';
 import PPLService from 'public/services/requests/ppl';
 import SavedObjects from 'public/services/saved_objects/event_analytics/saved_objects';
@@ -21,7 +21,7 @@ import { TraceAnalyticsComponentDeps, TraceAnalyticsCoreDeps } from '../trace_an
 import { FilterType } from '../trace_analytics/components/common/filters/filters';
 import { handleDataPrepperIndicesExistRequest } from '../trace_analytics/requests/request_handler';
 import { ObservabilitySideBar } from '../common/side_nav';
-import { NotificationsStart } from '../../../../../src/core/public';
+import { ChromeBreadcrumb, NotificationsStart } from '../../../../../src/core/public';
 import { APP_ANALYTICS_API_PREFIX } from '../../../common/constants/application_analytics';
 import {
   ApplicationRequestType,
@@ -153,7 +153,7 @@ export const Home = (props: HomeProps) => {
   };
 
   const moveToApp = (id: string, type: string) => {
-    window.location.assign(`${last(parentBreadcrumbs)!.href}application_analytics/${id}`);
+    window.location.assign(`${last(parentBreadcrumbs)!.href}/${id}`);
     if (type === 'createSetAvailability') {
       setTriggerSwitchToEvent(2);
     }
@@ -388,60 +388,62 @@ export const Home = (props: HomeProps) => {
         }}
         toastLifeTimeMs={6000}
       />
-      <Switch>
-        <Route
-          exact
-          path={['/', '/application_analytics']}
-          render={() => (
-            <AppTable
-              loading={false}
-              applications={applicationList}
-              fetchApplications={fetchApps}
-              renameApplication={renameApp}
-              deleteApplication={deleteApp}
-              clearStorage={clearStorage}
-              moveToApp={moveToApp}
-              {...commonProps}
-            />
-          )}
-        />
-        <Route
-          exact
-          path={['/application_analytics/create', '/application_analytics/edit/:id+']}
-          render={(routerProps) => (
-            <CreateApp
-              dslService={dslService}
-              pplService={pplService}
-              createApp={createApp}
-              updateApp={updateApp}
-              setToasts={setToast}
-              clearStorage={clearStorage}
-              existingAppId={decodeURIComponent(routerProps.match.params.id) || ''}
-              {...commonProps}
-            />
-          )}
-        />
-        <Route
-          exact
-          path={'/application_analytics/:id+'}
-          render={(routerProps) => (
-            <Application
-              disabled={false}
-              appId={decodeURIComponent(routerProps.match.params.id)}
-              pplService={pplService}
-              dslService={dslService}
-              savedObjects={savedObjects}
-              timestampUtils={timestampUtils}
-              notifications={notifications}
-              setToasts={setToast}
-              updateApp={updateApp}
-              callback={callback}
-              queryManager={queryManager}
-              {...commonProps}
-            />
-          )}
-        />
-      </Switch>
+      <HashRouter>
+        <Switch>
+          <Route
+            exact
+            path={'/'}
+            render={() => (
+              <AppTable
+                loading={false}
+                applications={applicationList}
+                fetchApplications={fetchApps}
+                renameApplication={renameApp}
+                deleteApplication={deleteApp}
+                clearStorage={clearStorage}
+                moveToApp={moveToApp}
+                {...commonProps}
+              />
+            )}
+          />
+          <Route
+            exact
+            path={['/create', '/edit/:id+']}
+            render={(routerProps) => (
+              <CreateApp
+                dslService={dslService}
+                pplService={pplService}
+                createApp={createApp}
+                updateApp={updateApp}
+                setToasts={setToast}
+                clearStorage={clearStorage}
+                existingAppId={decodeURIComponent(routerProps.match.params.id) || ''}
+                {...commonProps}
+              />
+            )}
+          />
+          <Route
+            exact
+            path={'/:id+'}
+            render={(routerProps) => (
+              <Application
+                disabled={false}
+                appId={decodeURIComponent(routerProps.match.params.id)}
+                pplService={pplService}
+                dslService={dslService}
+                savedObjects={savedObjects}
+                timestampUtils={timestampUtils}
+                notifications={notifications}
+                setToasts={setToast}
+                updateApp={updateApp}
+                callback={callback}
+                queryManager={queryManager}
+                {...commonProps}
+              />
+            )}
+          />
+        </Switch>
+      </HashRouter>
     </div>
   );
 };
diff --git a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
@@ -73,13 +73,17 @@ export function DashboardContent(props: DashboardProps) {
 
   useEffect(() => {
     if (showTimeoutToast === true && toasts.length === 0) {
-      setToast!('Query took too long to execute.', 'danger', 'Reduce time range or filter your data. If issue persists, consider increasing your cluster size.')
+      setToast!(
+        'Query took too long to execute.',
+        'danger',
+        'Reduce time range or filter your data. If issue persists, consider increasing your cluster size.'
+      );
     }
     setShowTimeoutToast(false);
-  }, [showTimeoutToast])
+  }, [showTimeoutToast]);
 
   useEffect(() => {
-    chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]);
+    // chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]);
     const validFilters = getValidFilterFields(mode, page);
     setFilters([
       ...filters.map((filter) => ({
@@ -93,7 +97,7 @@ export function DashboardContent(props: DashboardProps) {
   useEffect(() => {
     let newFilteredService = '';
     for (const filter of filters) {
-      if (mode === 'data_prepper') { 
+      if (mode === 'data_prepper') {
         if (filter.field === 'serviceName') {
           newFilteredService = filter.value;
           break;
@@ -106,8 +110,22 @@ export function DashboardContent(props: DashboardProps) {
       }
     }
     setFilteredService(newFilteredService);
-    if (!redirect && ((mode === 'data_prepper' && dataPrepperIndicesExist) || (mode === 'jaeger' && jaegerIndicesExist))) refresh(newFilteredService);
-  }, [filters, startTime, endTime, appConfigs, redirect, mode, dataPrepperIndicesExist, jaegerIndicesExist]);
+    if (
+      !redirect &&
+      ((mode === 'data_prepper' && dataPrepperIndicesExist) ||
+        (mode === 'jaeger' && jaegerIndicesExist))
+    )
+      refresh(newFilteredService);
+  }, [
+    filters,
+    startTime,
+    endTime,
+    appConfigs,
+    redirect,
+    mode,
+    dataPrepperIndicesExist,
+    jaegerIndicesExist,
+  ]);
 
   const refresh = async (currService?: string) => {
     setLoading(true);
@@ -154,12 +172,12 @@ export function DashboardContent(props: DashboardProps) {
         mode,
         () => setShowTimeoutToast(true),
         // () => {
-        //   if (toasts.length === 0) { 
+        //   if (toasts.length === 0) {
         //     setToast!('Query took too long to execute.', 'danger', 'Reduce time range or filter your data. If issue persists, consider increasing your cluster size.');
         //   }
         // },
         setPercentileMap
-      ).finally(() => setLoading(false))
+      ).finally(() => setLoading(false));
       handleJaegerErrorDashboardRequest(
         http,
         DSL,
@@ -170,7 +188,7 @@ export function DashboardContent(props: DashboardProps) {
         mode,
         () => setShowTimeoutToast(true),
         // () => {
-        //   if (toasts.length === 0) { 
+        //   if (toasts.length === 0) {
         //     setToast!('Query took too long to execute.', 'danger', 'Reduce time range or filter your data. If issue persists, consider increasing your cluster size.');
         //   }
         // },
@@ -295,7 +313,8 @@ export function DashboardContent(props: DashboardProps) {
         mode={mode}
       />
       <EuiSpacer size="m" />
-      {((mode === 'data_prepper' && dataPrepperIndicesExist) || mode === 'jaeger' && jaegerIndicesExist) ? (
+      {(mode === 'data_prepper' && dataPrepperIndicesExist) ||
+      (mode === 'jaeger' && jaegerIndicesExist) ? (
         <div>
           {mode === 'data_prepper' ? (
             <>
@@ -359,7 +378,7 @@ export function DashboardContent(props: DashboardProps) {
           )}
         </div>
       ) : (
-        <MissingConfigurationMessage mode={mode}/>
+        <MissingConfigurationMessage mode={mode} />
       )}
     </>
   );