Trace analytics ui bug fixes in custom sources (#2162)

* trace analytics ui bug fixes Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * revert sort change Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> --------- Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
opensearch-project · Sep 11, 2024 · ad6600c · ad6600c
1 parent ce419d8
commit ad6600c
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 24 deletions.
diff --git a/...onents/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap b/...onents/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={
  <GlobalFilterButton

diff --git a/public/components/trace_analytics/components/common/helper_functions.tsx b/public/components/trace_analytics/components/common/helper_functions.tsx
@@ -204,15 +204,16 @@ export function getServiceMapGraph(
  }
 
  const averageLatency = `Average duration: ${
- map[service].latency! >= 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
@@ -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
@@ -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)}
  />
  </EuiFlexItem>
  )}

diff --git 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<Array<{ label: string }>>([]);
 
  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
@@ -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,