Trace analytics ui bug fixes in custom sources

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={
               <GlobalFilterButton

public/components/trace_analytics/components/common/helper_functions.tsx

@@ -204,15 +204,16 @@
     }
 
     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}`;
@@ -323,7 +324,7 @@
   percentileMaps: Array<{ traceGroupName: string; durationFilter: { gte?: number; lte?: number } }>,
   conditionString: string // >= 95th, < 95th
 ): FilterType => {
   const DSL: any = {
     query: {
       bool: {
         must: [],
@@ -368,12 +369,12 @@
   mode: TraceAnalyticsMode,
   filters: FilterType[],
   query: string,
   startTime: any,
   endTime: any,
   page?: string,
   appConfigs: FilterType[] = []
 ) => {
   const DSL: any = {
     query: {
       bool: {
         must: [],

public/components/trace_analytics/components/common/plots/service_map.tsx

@@ -31,7 +31,7 @@
 
 export interface ServiceObject {
   [key: string]: {
     average_latency: any;
     serviceName: string;
     id: number;
     traceGroups: Array<{ traceGroup: string; targetResource: string[] }>;
@@ -77,7 +77,7 @@
   const [invalid, setInvalid] = useState(false);
   const [network, setNetwork] = useState(null);
   const [ticks, setTicks] = useState<number[]>([]);
   const [items, setItems] = useState<any>({});
   const [query, setQuery] = useState('');
   const toggleButtons = [
     {
@@ -96,9 +96,9 @@
 
   const [selectedNodeDetails, setSelectedNodeDetails] = useState<ServiceNodeDetails | null>(null);
 
   const [selectableValue, setSelectableValue] = useState<Array<EuiSuperSelectOption<any>>>([]);
 
   const onChangeSelectable = (value: React.SetStateAction<Array<EuiSuperSelectOption<any>>>) => {
     // if the change is changing for the first time then callback servicemap with metrics
     if (selectableValue.length === 0 && value.length !== 0) {
       if (includeMetricsCallback) {
@@ -109,7 +109,7 @@
     setSelectableValue(value);
   };
 
   const metricOptions: Array<EuiSuperSelectOption<any>> = [
     {
       value: 'latency',
       inputDisplay: 'Duration',
@@ -190,6 +190,11 @@
           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);
       }
@@ -197,7 +202,7 @@
     hoverNode: (_event) => {},
   };
 
   const onFocus = (service: string, networkInstance?: any) => {
     if (service.length === 0) {
       setInvalid(false);
     } else if (serviceMap[service]) {
@@ -209,6 +214,21 @@
     }
   };
 
+  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 @@
         filterByCurrService
       )
     );
-    setSelectedNodeDetails(null);
   }, [serviceMap, idSelected]);
 
   return (

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>
         )}

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(

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,

public/components/trace_analytics/requests/queries/traces_queries.ts

@@ -568,7 +568,7 @@ export const getCustomIndicesTracesQuery = (
         must_not: [],
       },
     },
-    ...(sort && { sort: [{ [sort.field]: { order: sort.direction } }] }),
+    ...(sort ? { sort: [{ [sort.field]: { order: sort.direction } }] } : {}),
     track_total_hits: false,
   };
   if (traceId) {