Service Content/View Optimizations

public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx

@@ -23,10 +23,7 @@
 import { ServiceMap } from '../../../../../public/components/trace_analytics/components/services';
 import { SpanDetailTable } from '../../../../../public/components/trace_analytics/components/traces/span_detail_table';
 import { TraceAnalyticsComponentDeps } from '../../../../../public/components/trace_analytics/home';
-import {
-  handleServiceMapRequest,
-  handleServiceViewRequest,
-} from '../../../../../public/components/trace_analytics/requests/services_request_handler';
+import { handleServiceViewRequest } from '../../../../../public/components/trace_analytics/requests/services_request_handler';
 import { getListItem } from '../../helpers/utils';
 
 interface ServiceFlyoutProps extends TraceAnalyticsComponentDeps {
@@ -49,10 +46,10 @@
     openSpanFlyout,
     mode,
   } = props;
   const [fields, setFields] = useState<any>({});
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
   const [total, setTotal] = useState(0);
   const [DSL, setDSL] = useState<any>({});
   const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
     'latency' | 'error_rate' | 'throughput'
   >('latency');
@@ -134,10 +131,14 @@
     );
 
     setIsServicesDataLoading(true);
-    Promise.all([
-      handleServiceViewRequest(serviceName, http, serviceDSL, setFields, mode),
-      handleServiceMapRequest(http, serviceDSL, mode, '', setServiceMap),
-    ]).finally(() => setIsServicesDataLoading(false));
+    handleServiceViewRequest(
+      serviceName,
+      http,
+      serviceDSL,
+      setFields,
+      mode,
+      setServiceMap
+    ).finally(() => setIsServicesDataLoading(false));
 
     const spanDSL = filtersToDsl(mode, filters, query, startTime, endTime, 'app', appConfigs);
     spanDSL.query.bool.filter.push({

public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap

@@ -2698,7 +2698,7 @@ exports[`Services component renders empty services page 1`] = `
               currService=""
               filters={Array []}
               idSelected="latency"
-              isServicesDataLoading={true}
+              isServicesDataLoading={false}
               mode="data_prepper"
               page="services"
               serviceMap={Object {}}
@@ -8602,7 +8602,7 @@ exports[`Services component renders services page 1`] = `
               currService=""
               filters={Array []}
               idSelected="latency"
-              isServicesDataLoading={true}
+              isServicesDataLoading={false}
               mode="data_prepper"
               page="services"
               serviceMap={Object {}}

public/components/trace_analytics/components/services/service_view.tsx

@@ -41,10 +41,7 @@
 import { coreRefs } from '../../../../framework/core_refs';
 import { HeaderControlledComponentsWrapper } from '../../../../plugin_helpers/plugin_headerControl';
 import { TraceAnalyticsComponentDeps } from '../../home';
-import {
-  handleServiceMapRequest,
-  handleServiceViewRequest,
-} from '../../requests/services_request_handler';
+import { handleServiceViewRequest } from '../../requests/services_request_handler';
 import { TraceFilter } from '../common/constants';
 import { FilterType } from '../common/filters/filters';
 import {
@@ -72,7 +69,7 @@
 
 export function ServiceView(props: ServiceViewProps) {
   const { mode, page, setCurrentSelectedService } = props;
   const [fields, setFields] = useState<any>({});
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
   const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
     'latency' | 'error_rate' | 'throughput'
@@ -106,25 +103,19 @@
     );
 
     setIsServiceOverviewLoading(true);
+    setIsServicesDataLoading(true);
     handleServiceViewRequest(
       props.serviceName,
       props.http,
       DSL,
       setFields,
       mode,
+      setServiceMap,
       props.dataSourceMDSId[0].id
-    ).finally(() => setIsServiceOverviewLoading(false));
-
-    if (mode === 'data_prepper' || mode === 'custom_data_prepper') {
-      setIsServicesDataLoading(true);
-      handleServiceMapRequest(
-        props.http,
-        DSL,
-        mode,
-        props.dataSourceMDSId[0].id,
-        setServiceMap
-      ).finally(() => setIsServicesDataLoading(false));
-    }
+    ).finally(() => {
+      setIsServiceOverviewLoading(false);
+      setIsServicesDataLoading(false);
+    });
   };
 
   useEffect(() => {
@@ -453,7 +444,7 @@
   const [spanFilters, setSpanFilters] = useState<TraceFilter[]>(
     storedFilters ? JSON.parse(storedFilters) : []
   );
   const [DSL, setDSL] = useState<any>({});
 
   const setSpanFiltersWithStorage = (newFilters: TraceFilter[]) => {
     setSpanFilters(newFilters);
@@ -493,7 +484,7 @@
     setDSL(spanDSL);
   }, [props.startTime, props.endTime, props.serviceName, spanFilters]);
 
   const addSpanFilter = (field: string, value: any) => {
     const newFilters = [...spanFilters];
     const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
     if (index === -1) {

public/components/trace_analytics/components/services/services_content.tsx

@@ -10,7 +10,6 @@
 import { ServiceTrends } from '../../../../../common/types/trace_analytics';
 import { coreRefs } from '../../../../framework/core_refs';
 import {
-  handleServiceMapRequest,
   handleServicesRequest,
   handleServiceTrendsRequest,
 } from '../../requests/services_request_handler';
@@ -55,7 +54,7 @@
   >('latency');
   const [redirect, setRedirect] = useState(true);
   const [filteredService, setFilteredService] = useState('');
   const [selectedItems, setSelectedItems] = useState<any[]>([]);
   const [isServiceTrendEnabled, setIsServiceTrendEnabled] = useState(false);
   const [serviceTrends, setServiceTrends] = useState<ServiceTrends>({});
   const searchBarRef = useRef<{ updateQuery: (newQuery: string) => void }>(null);
@@ -120,21 +119,32 @@
     // service map should not be filtered by service name
     const serviceMapDSL = cloneDeep(DSL);
     serviceMapDSL.query.bool.must = serviceMapDSL.query.bool.must.filter(
       (must: any) => must?.term?.serviceName == null
     );
 
     setIsServicesTableDataLoading(true);
-    handleServicesRequest(http, DSL, setTableItems, mode, dataSourceMDSId[0].id).finally(() =>
-      setIsServicesTableDataLoading(false)
-    );
+    handleServicesRequest(
+      http,
+      DSL,
+      setTableItems,
+      mode,
+      setServiceMap,
+      dataSourceMDSId[0].id
+    ).finally(() => setIsServicesTableDataLoading(false));
 
     setIsServicesDataLoading(true);
-    Promise.all([
-      handleServiceMapRequest(http, serviceMapDSL, mode, dataSourceMDSId[0].id, setServiceMap),
-      isServiceTrendEnabled
-        ? handleServiceTrendsRequest(http, '1h', setServiceTrends, mode, [], dataSourceMDSId[0].id)
-        : Promise.resolve(null),
-    ]).finally(() => setIsServicesDataLoading(false));
+    if (isServiceTrendEnabled) {
+      handleServiceTrendsRequest(
+        http,
+        '1h',
+        setServiceTrends,
+        mode,
+        [],
+        dataSourceMDSId[0].id
+      ).finally(() => setIsServicesDataLoading(false));
+    } else {
+      setIsServicesDataLoading(false);
+    }
   };
 
   const addFilter = (filter: FilterType) => {

public/components/trace_analytics/components/traces/span_detail_panel.tsx

@@ -30,15 +30,15 @@
 export function SpanDetailPanel(props: {
   http: HttpSetup;
   traceId: string;
   colorMap: any;
   mode: TraceAnalyticsMode;
   dataSourceMDSId: string;
   dataSourceMDSLabel: string | undefined;
   spanFilters: TraceFilter[];
   setSpanFiltersWithStorage: (newFilters: TraceFilter[]) => void;
   page?: string;
   openSpanFlyout?: any;
   data?: { gantt: any[]; table: any[]; ganttMaxX: number };
   setGanttData?: (data: { gantt: any[]; table: any[]; ganttMaxX: number }) => void;
   isApplicationFlyout?: boolean;
   payloadData: string;
@@ -132,7 +132,6 @@
   useEffect(() => {
     if (!props.payloadData) {
       props.setGanttChartLoading?.(false);
-      console.error('No payloadData provided to SpanDetailPanel');
       return;
     }
 

public/components/trace_analytics/requests/services_request_handler.ts

@@ -27,8 +27,8 @@ export const handleServicesRequest = async (
   DSL: any,
   setItems: any,
   mode: TraceAnalyticsMode,
+  setServiceMap: (map: ServiceObject) => void,
   dataSourceMDSId?: string,
-  setServiceMap?: any,
   serviceNameFilter?: string
 ) => {
   return handleDslRequest(
@@ -215,6 +215,7 @@ export const handleServiceViewRequest = (
   DSL: any,
   setFields: any,
   mode: TraceAnalyticsMode,
+  setServiceMap: (map: ServiceObject) => void,
   dataSourceMDSId?: string
 ) => {
   return handleDslRequest(http, DSL, getServicesQuery(mode, serviceName), mode, dataSourceMDSId)
@@ -225,7 +226,8 @@ export const handleServiceViewRequest = (
         http,
         DSL,
         mode,
-        dataSourceMDSId
+        dataSourceMDSId,
+        setServiceMap
       );
       const connectedServices = [
         ...serviceObject[bucket.key].targetServices,