opensearch-project · ps48 · Sep 11, 2024 · Sep 11, 2024
@@ -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

@@ -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: [],

@@ -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 (

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

@@ -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(

@@ -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,