From 2ac7281408a4edaf4635fe97f92190943f34cdd4 Mon Sep 17 00:00:00 2001 From: Rupal Mahajan Date: Fri, 14 Apr 2023 13:59:07 -0700 Subject: [PATCH] Fix applications link Signed-off-by: Rupal Mahajan --- .../components/app_table.tsx | 25 ++-- .../components/application.tsx | 11 +- .../components/configuration.tsx | 4 +- .../components/create.tsx | 12 +- .../components/application_analytics/home.tsx | 116 +++++++++--------- .../dashboard/dashboard_content.tsx | 41 +++++-- 6 files changed, 118 insertions(+), 91 deletions(-) diff --git a/public/components/application_analytics/components/app_table.tsx b/public/components/application_analytics/components/app_table.tsx index 75fe228af8..19d19a3c8b 100644 --- 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) => ( - + {_.truncate(record.name, { length: 100 })} ), @@ -284,7 +289,7 @@ export function AppTable(props: AppTableProps) { - + {createButtonText} @@ -324,7 +329,7 @@ export function AppTable(props: AppTableProps) { - + {createButtonText} diff --git a/public/components/application_analytics/components/application.tsx b/public/components/application_analytics/components/application.tsx index b758942583..0f86072250 100644 --- 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" /> diff --git a/public/components/application_analytics/components/configuration.tsx b/public/components/application_analytics/components/configuration.tsx index 8cb8080ffc..a4346656da 100644 --- 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 index 084d53b17d..9eddacfa09 100644 --- 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 index 225d925ab8..3a6260bb34 100644 --- 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} /> - - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - + + + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + + ); }; diff --git a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx index 2cc0af94bd..a67f0b12c6 100644 --- 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} /> - {((mode === 'data_prepper' && dataPrepperIndicesExist) || mode === 'jaeger' && jaegerIndicesExist) ? ( + {(mode === 'data_prepper' && dataPrepperIndicesExist) || + (mode === 'jaeger' && jaegerIndicesExist) ? (
{mode === 'data_prepper' ? ( <> @@ -359,7 +378,7 @@ export function DashboardContent(props: DashboardProps) { )}
) : ( - + )} );