diff --git a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx index 2cc0af94b..fe56704a0 100644 --- a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx +++ b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx @@ -44,7 +44,7 @@ export function DashboardContent(props: DashboardProps) { startTime, endTime, childBreadcrumbs, - parentBreadcrumbs, + parentBreadcrumb, filters, setStartTime, setEndTime, @@ -93,7 +93,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; @@ -154,7 +154,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.'); // } // }, @@ -170,7 +170,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.'); // } // }, diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx index 0121af258..5101760a0 100644 --- a/public/components/trace_analytics/components/services/service_view.tsx +++ b/public/components/trace_analytics/components/services/service_view.tsx @@ -62,7 +62,7 @@ export function ServiceView(props: ServiceViewProps) { useEffect(() => { props.chrome.setBreadcrumbs([ - ...props.parentBreadcrumbs, + props.parentBreadcrumb, { text: 'Trace analytics', href: '#/trace_analytics/home', diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx index e25bf8726..417c9420e 100644 --- a/public/components/trace_analytics/components/services/services_content.tsx +++ b/public/components/trace_analytics/components/services/services_content.tsx @@ -30,7 +30,7 @@ export function ServicesContent(props: ServicesProps) { endTime, appConfigs = [], childBreadcrumbs, - parentBreadcrumbs, + parentBreadcrumb, nameColumnAction, traceColumnAction, setFilters, @@ -51,7 +51,7 @@ export function ServicesContent(props: ServicesProps) { const [filteredService, setFilteredService] = useState(''); useEffect(() => { - chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]); + chrome.setBreadcrumbs([parentBreadcrumb, ...childBreadcrumbs]); const validFilters = getValidFilterFields(mode, 'services'); setFilters([ ...filters.map((filter) => ({ @@ -71,12 +71,25 @@ export function ServicesContent(props: ServicesProps) { } } setFilteredService(newFilteredService); - if (!redirect && ((mode === 'data_prepper' && dataPrepperIndicesExist) || (mode === 'jaeger' && jaegerIndicesExist))) refresh(newFilteredService); + if ( + !redirect && + ((mode === 'data_prepper' && dataPrepperIndicesExist) || + (mode === 'jaeger' && jaegerIndicesExist)) + ) + refresh(newFilteredService); }, [filters, appConfigs, redirect, mode, jaegerIndicesExist, dataPrepperIndicesExist]); const refresh = async (currService?: string) => { setLoading(true); - const DSL = filtersToDsl(mode, filters, query,processTimeStamp(startTime, mode), processTimeStamp(endTime, mode), page, appConfigs); + const DSL = filtersToDsl( + mode, + filters, + query, + processTimeStamp(startTime, mode), + processTimeStamp(endTime, mode), + page, + appConfigs + ); // service map should not be filtered by service name const serviceMapDSL = _.cloneDeep(DSL); serviceMapDSL.query.bool.must = serviceMapDSL.query.bool.must.filter( @@ -84,7 +97,13 @@ export function ServicesContent(props: ServicesProps) { ); await Promise.all([ handleServicesRequest(http, DSL, setTableItems, mode), - handleServiceMapRequest(http, serviceMapDSL, mode, setServiceMap, currService || filteredService), + handleServiceMapRequest( + http, + serviceMapDSL, + mode, + setServiceMap, + currService || filteredService + ), ]); setLoading(false); }; @@ -133,7 +152,7 @@ export function ServicesContent(props: ServicesProps) { dataPrepperIndicesExist={dataPrepperIndicesExist} /> - { (mode === 'data_prepper' && dataPrepperIndicesExist) ? + {mode === 'data_prepper' && dataPrepperIndicesExist ? ( : (
) - } + /> + ) : ( +
+ )} ); } diff --git a/public/components/trace_analytics/components/traces/trace_view.tsx b/public/components/trace_analytics/components/traces/trace_view.tsx index 46fd00325..3f460e405 100644 --- a/public/components/trace_analytics/components/traces/trace_view.tsx +++ b/public/components/trace_analytics/components/traces/trace_view.tsx @@ -206,7 +206,7 @@ export function TraceView(props: TraceViewProps) { useEffect(() => { props.chrome.setBreadcrumbs([ - ...props.parentBreadcrumbs, + props.parentBreadcrumb, { text: 'Trace analytics', href: '#/trace_analytics/home', diff --git a/public/components/trace_analytics/components/traces/traces_content.tsx b/public/components/trace_analytics/components/traces/traces_content.tsx index 66764f988..2efc70ec7 100644 --- a/public/components/trace_analytics/components/traces/traces_content.tsx +++ b/public/components/trace_analytics/components/traces/traces_content.tsx @@ -23,7 +23,7 @@ export function TracesContent(props: TracesProps) { appConfigs, startTime, endTime, - parentBreadcrumbs, + parentBreadcrumb, childBreadcrumbs, traceIdColumnAction, setQuery, @@ -39,7 +39,7 @@ export function TracesContent(props: TracesProps) { const [loading, setLoading] = useState(false); useEffect(() => { - chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]); + chrome.setBreadcrumbs([parentBreadcrumb, ...childBreadcrumbs]); const validFilters = getValidFilterFields(mode, 'traces'); setFilters([ ...filters.map((filter) => ({ @@ -51,13 +51,33 @@ export function TracesContent(props: TracesProps) { }, []); useEffect(() => { - if (!redirect && ((mode === 'data_prepper' && dataPrepperIndicesExist) || (mode === 'jaeger' && jaegerIndicesExist))) refresh(); + if ( + !redirect && + ((mode === 'data_prepper' && dataPrepperIndicesExist) || + (mode === 'jaeger' && jaegerIndicesExist)) + ) + refresh(); }, [filters, appConfigs, redirect, mode, dataPrepperIndicesExist, jaegerIndicesExist]); const refresh = async (sort?: PropertySort) => { setLoading(true); - const DSL = filtersToDsl(mode, filters, query, processTimeStamp(startTime, mode), processTimeStamp(endTime, mode), page, appConfigs); - const timeFilterDSL = filtersToDsl(mode, [], '', processTimeStamp(startTime, mode), processTimeStamp(endTime, mode), page); + const DSL = filtersToDsl( + mode, + filters, + query, + processTimeStamp(startTime, mode), + processTimeStamp(endTime, mode), + page, + appConfigs + ); + const timeFilterDSL = filtersToDsl( + mode, + [], + '', + processTimeStamp(startTime, mode), + processTimeStamp(endTime, mode), + page + ); await handleTracesRequest(http, DSL, timeFilterDSL, tableItems, setTableItems, mode, sort); setLoading(false); }; diff --git a/public/components/trace_analytics/home.tsx b/public/components/trace_analytics/home.tsx index d9c443ff1..e0ad209a6 100644 --- a/public/components/trace_analytics/home.tsx +++ b/public/components/trace_analytics/home.tsx @@ -6,36 +6,35 @@ import { EuiGlobalToastList } from '@elastic/eui'; import { Toast } from '@elastic/eui/src/components/toast/global_toast_list'; import React, { ReactChild, useEffect, useState } from 'react'; -import { Route, RouteComponentProps } from 'react-router-dom'; -import { - ChromeBreadcrumb, - ChromeStart, - HttpStart, -} from '../../../../../src/core/public'; -import { ObservabilitySideBar } from '../common/side_nav'; +import { HashRouter, Route, RouteComponentProps } from 'react-router-dom'; +import { ChromeBreadcrumb, ChromeStart, HttpStart } from '../../../../../src/core/public'; import { FilterType } from './components/common/filters/filters'; import { SearchBarProps } from './components/common/search_bar'; import { Dashboard } from './components/dashboard'; import { Services, ServiceView } from './components/services'; import { Traces, TraceView } from './components/traces'; -import { handleDataPrepperIndicesExistRequest, handleJaegerIndicesExistRequest } from './requests/request_handler'; +import { + handleDataPrepperIndicesExistRequest, + handleJaegerIndicesExistRequest, +} from './requests/request_handler'; +import { TraceSideBar } from './trace_side_nav'; export interface TraceAnalyticsCoreDeps { - parentBreadcrumbs: ChromeBreadcrumb[]; + parentBreadcrumb: ChromeBreadcrumb; http: HttpStart; chrome: ChromeStart; } interface HomeProps extends RouteComponentProps, TraceAnalyticsCoreDeps {} -export type TraceAnalyticsMode = 'jaeger' | 'data_prepper' +export type TraceAnalyticsMode = 'jaeger' | 'data_prepper'; export interface TraceAnalyticsComponentDeps extends TraceAnalyticsCoreDeps, SearchBarProps { mode: TraceAnalyticsMode; - modes: { + modes: Array<{ id: string; title: string; - }[]; + }>; setMode: (mode: TraceAnalyticsMode) => void; jaegerIndicesExist: boolean; dataPrepperIndicesExist: boolean; @@ -44,7 +43,9 @@ export interface TraceAnalyticsComponentDeps extends TraceAnalyticsCoreDeps, Sea export const Home = (props: HomeProps) => { const [dataPrepperIndicesExist, setDataPrepperIndicesExist] = useState(false); const [jaegerIndicesExist, setJaegerIndicesExist] = useState(false); - const [mode, setMode] = useState(sessionStorage.getItem('TraceAnalyticsMode') as TraceAnalyticsMode || 'jaeger') + const [mode, setMode] = useState( + (sessionStorage.getItem('TraceAnalyticsMode') as TraceAnalyticsMode) || 'jaeger' + ); const storedFilters = sessionStorage.getItem('TraceAnalyticsFilters'); const [query, setQuery] = useState(sessionStorage.getItem('TraceAnalyticsQuery') || ''); const [filters, setFilters] = useState( @@ -81,18 +82,17 @@ export const Home = (props: HomeProps) => { }; useEffect(() => { - handleDataPrepperIndicesExistRequest(props.http, setDataPrepperIndicesExist) + handleDataPrepperIndicesExistRequest(props.http, setDataPrepperIndicesExist); handleJaegerIndicesExistRequest(props.http, setJaegerIndicesExist); }, []); - const modes = [ { id: 'jaeger', title: 'Jaeger', 'data-test-subj': 'jaeger-mode' }, { id: 'data_prepper', title: 'Data Prepper', 'data-test-subj': 'data-prepper-mode' }, ]; useEffect(() => { - if (!sessionStorage.getItem('TraceAnalyticsMode')){ + if (!sessionStorage.getItem('TraceAnalyticsMode')) { if (dataPrepperIndicesExist) { setMode('data_prepper'); } else if (jaegerIndicesExist) { @@ -104,33 +104,33 @@ export const Home = (props: HomeProps) => { const dashboardBreadcrumbs = [ { text: 'Trace analytics', - href: '#/trace_analytics/home', + href: '#/', }, { text: 'Dashboard', - href: '#/trace_analytics/home', + href: '#/', }, ]; const serviceBreadcrumbs = [ { text: 'Trace analytics', - href: '#/trace_analytics/home', + href: '#/', }, { text: 'Services', - href: '#/trace_analytics/services', + href: '#/services', }, ]; const traceBreadcrumbs = [ { text: 'Trace analytics', - href: '#/trace_analytics/home', + href: '#/', }, { text: 'Traces', - href: '#/trace_analytics/traces', + href: '#/traces', }, ]; @@ -145,13 +145,13 @@ export const Home = (props: HomeProps) => { const [appConfigs, _] = useState([]); const commonProps: TraceAnalyticsComponentDeps = { - parentBreadcrumbs: props.parentBreadcrumbs, + parentBreadcrumb: props.parentBreadcrumb, http: props.http, chrome: props.chrome, query, setQuery: setQueryWithStorage, filters, - appConfigs: appConfigs, + appConfigs, setFilters: setFiltersWithStorage, startTime, setStartTime: setStartTimeWithStorage, @@ -159,7 +159,9 @@ export const Home = (props: HomeProps) => { setEndTime: setEndTimeWithStorage, mode, modes, - setMode: (mode: TraceAnalyticsMode) => {setMode(mode)}, + setMode: (traceMode: TraceAnalyticsMode) => { + setMode(traceMode); + }, jaegerIndicesExist, dataPrepperIndicesExist, }; @@ -167,84 +169,92 @@ export const Home = (props: HomeProps) => { return ( <> { - setToasts(toasts.filter((toast) => toast.id !== removedToast.id)); - }} - toastLifeTimeMs={6000} - /> - ( - - - - )} + toasts={toasts} + dismissToast={(removedToast) => { + setToasts(toasts.filter((toast) => toast.id !== removedToast.id)); + }} + toastLifeTimeMs={6000} /> - ( - - + ( + + + + )} + /> + ( + + + + )} + /> + ( + - - )} - /> - ( - - )} - /> - ( - - + ( + + + + )} + /> + ( + - - )} - /> - ( - { - for (const addedFilter of filters) { - if ( - addedFilter.field === filter.field && - addedFilter.operator === filter.operator && - addedFilter.value === filter.value - ) { - return; + addFilter={(filter: FilterType) => { + for (const addedFilter of filters) { + if ( + addedFilter.field === filter.field && + addedFilter.operator === filter.operator && + addedFilter.value === filter.value + ) { + return; + } } - } - const newFilters = [...filters, filter]; - setFiltersWithStorage(newFilters); - }} - /> - )} - /> + const newFilters = [...filters, filter]; + setFiltersWithStorage(newFilters); + }} + /> + )} + /> + ); }; diff --git a/public/components/trace_analytics/trace_side_nav.tsx b/public/components/trace_analytics/trace_side_nav.tsx new file mode 100644 index 000000000..77cb44596 --- /dev/null +++ b/public/components/trace_analytics/trace_side_nav.tsx @@ -0,0 +1,74 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { + EuiButton, + EuiFlexGroup, + EuiFlexItem, + EuiPage, + EuiPageBody, + EuiPageSideBar, + EuiSideNav, + EuiSideNavItemType, + EuiSwitch, +} from '@elastic/eui'; +import React from 'react'; + +export function TraceSideBar(props: { children: React.ReactNode }) { + function setIsSelected(items: Array>, hash: string): boolean { + if (hash === '#/') { + items[0].isSelected = true; + return true; + } + if (hash === '#/traces') { + items[0].items[0].isSelected = true; + return true; + } + if (hash === '#/services') { + items[0].items[1].isSelected = true; + return true; + } + } + + const items = [ + { + name: 'Trace analytics', + id: 1, + href: '#/', + items: [ + { + name: 'Traces', + id: 1.1, + href: '#/traces', + }, + { + name: 'Services', + id: 1.2, + href: '#/services', + }, + ], + }, + ]; + + setIsSelected(items, location.hash); + + return ( + + + + + + + + + {props.children} + + ); +}