From ad6600c5d37884118417ad118cc900e31028b5a5 Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Wed, 11 Sep 2024 15:33:44 -0700 Subject: [PATCH] Trace analytics ui bug fixes in custom sources (#2162) * trace analytics ui bug fixes Signed-off-by: Shenoy Pratik * revert sort change Signed-off-by: Shenoy Pratik --------- Signed-off-by: Shenoy Pratik --- .../__snapshots__/search_bar.test.tsx.snap | 2 +- .../components/common/helper_functions.tsx | 7 ++++--- .../components/common/plots/service_map.tsx | 21 ++++++++++++++++++- .../components/common/search_bar.tsx | 11 +++++----- .../components/traces/services_list.tsx | 21 ++++++++++--------- .../components/traces/traces_content.tsx | 7 ++++--- 6 files changed, 45 insertions(+), 24 deletions(-) diff --git a/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap b/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap index a95f3e81e..97ae72f57 100644 --- a/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap +++ b/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap @@ -418,7 +418,7 @@ exports[`Search bar components renders search bar 1`] = ` isClearable={false} isLoading={false} onChange={[Function]} - onSearch={[MockFunction]} + onSearch={[Function]} placeholder="Trace ID, trace group name, service name" prepend={ = 0 ? map[service].latency + 'ms' : 'N/A' + map[service].latency! >= 0 ? map[service].latency + 'ms' : '-' }`; const errorRate = `Error rate: ${ - map[service].error_rate! >= 0 ? map[service].error_rate + '%' : 'N/A' + map[service].error_rate! >= 0 ? map[service].error_rate + '%' : '-' }`; const throughput = - (map[service].throughput! >= 0 ? `Request rate: ${map[service].throughput}` : 'N/A') + + 'Request rate: ' + + (map[service].throughput! >= 0 ? `${map[service].throughput}` : '-') + (map[service].throughputPerMinute ? ` (${map[service].throughputPerMinute} per minute)` : ''); const hover = `${service}\n\n ${averageLatency} \n ${errorRate} \n ${throughput}`; diff --git a/public/components/trace_analytics/components/common/plots/service_map.tsx b/public/components/trace_analytics/components/common/plots/service_map.tsx index af2962b2f..8edac9952 100644 --- a/public/components/trace_analytics/components/common/plots/service_map.tsx +++ b/public/components/trace_analytics/components/common/plots/service_map.tsx @@ -190,6 +190,11 @@ export function ServiceMap({ throughput: selectedNode.throughput, }; + // On traces page with custom sources + // When user clicks on empty graph, load metrics + if (selectableValue.length === 0) { + onChangeSelectable('latency'); + } // Update the state to display node details setSelectedNodeDetails(details); } @@ -209,6 +214,21 @@ export function ServiceMap({ } }; + useEffect(() => { + if (selectedNodeDetails) { + const selectedNode = items?.graph.nodes.find( + (node) => node.label === selectedNodeDetails.label + ); + const details = { + label: selectedNode.label, + average_latency: selectedNode.average_latency, + error_rate: selectedNode.error_rate, + throughput: selectedNode.throughput, + }; + setSelectedNodeDetails(details); + } + }, [items]); + useEffect(() => { if (Object.keys(serviceMap).length === 0) return; const values = Object.keys(serviceMap) @@ -228,7 +248,6 @@ export function ServiceMap({ filterByCurrService ) ); - setSelectedNodeDetails(null); }, [serviceMap, idSelected]); return ( diff --git a/public/components/trace_analytics/components/common/search_bar.tsx b/public/components/trace_analytics/components/common/search_bar.tsx index 7dd8dcf6b..7c24014a6 100644 --- a/public/components/trace_analytics/components/common/search_bar.tsx +++ b/public/components/trace_analytics/components/common/search_bar.tsx @@ -4,18 +4,17 @@ */ import { + EuiButtonIcon, + EuiCompressedFieldSearch, EuiFlexGroup, EuiFlexItem, EuiSuperDatePicker, - EuiButtonIcon, - EuiCompressedFieldSearch, } from '@elastic/eui'; +import { i18n } from '@osd/i18n'; import debounce from 'lodash/debounce'; import React, { forwardRef, useImperativeHandle, useState } from 'react'; -import { i18n } from '@osd/i18n'; import { uiSettingsService } from '../../../../../common/utils'; -import { FiltersProps } from './filters/filters'; -import { GlobalFilterButton } from './filters/filters'; +import { FiltersProps, GlobalFilterButton } from './filters/filters'; export const renderDatePicker = ( startTime: string, @@ -87,7 +86,7 @@ export const SearchBar = forwardRef((props: SearchBarOwnProps, ref) => { setQuery(e.target.value); setGlobalQuery(e.target.value); }} - onSearch={props.refresh} + onSearch={(searchQuery) => props.refresh(undefined, searchQuery)} /> )} diff --git a/public/components/trace_analytics/components/traces/services_list.tsx b/public/components/trace_analytics/components/traces/services_list.tsx index 69404c795..afb7737cf 100644 --- a/public/components/trace_analytics/components/traces/services_list.tsx +++ b/public/components/trace_analytics/components/traces/services_list.tsx @@ -32,17 +32,18 @@ export const ServicesList = ({ const [options, setOptions] = useState>([]); const nameColumnAction = (serviceName: string) => { - if (addFilter) { - addFilter({ - field: 'serviceName', - operator: 'is', - value: serviceName, - inverted: false, - disabled: false, - }); - setFilteredService(serviceName); + if (!addFilter) return; + addFilter({ + field: 'serviceName', + operator: 'is', + value: serviceName, + inverted: false, + disabled: false, + }); + setFilteredService(serviceName); + setTimeout(function () { window.scrollTo({ left: 0, top: 0, behavior: 'smooth' }); - } + }, 500); }; const titleBar = useMemo( diff --git a/public/components/trace_analytics/components/traces/traces_content.tsx b/public/components/trace_analytics/components/traces/traces_content.tsx index c6ae79ce7..4ed479870 100644 --- a/public/components/trace_analytics/components/traces/traces_content.tsx +++ b/public/components/trace_analytics/components/traces/traces_content.tsx @@ -41,7 +41,7 @@ export function TracesContent(props: TracesProps) { chrome, query, filters, - appConfigs, + appConfigs = [], startTime, endTime, childBreadcrumbs, @@ -131,12 +131,13 @@ export function TracesContent(props: TracesProps) { setFilters(newFilters); }; - const refresh = async (sort?: PropertySort) => { + const refresh = async (sort?: PropertySort, overrideQuery?: string) => { + const filterQuery = overrideQuery ?? query; setLoading(true); const DSL = filtersToDsl( mode, filters, - query, + filterQuery, processTimeStamp(startTime, mode), processTimeStamp(endTime, mode), page,