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

* trace analytics ui bug fixes



* revert sort change



---------


(cherry picked from commit ad6600c)

Signed-off-by: Shenoy Pratik <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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 @@ 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}`;

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 (

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,