Service Content/View Optimizations (#2383)

* Service Content/View Optimizations

Signed-off-by: Adam Tackett <[email protected]>

* remove console error, address comments on promise

Signed-off-by: Adam Tackett <[email protected]>

---------

Signed-off-by: Adam Tackett <[email protected]>
Co-authored-by: Adam Tackett <[email protected]>
(cherry picked from commit f23c699)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: github-actions[bot]

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

@@ -23,10 +23,7 @@ import { ServiceObject } from '../../../../../public/components/trace_analytics/
 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 {
@@ -134,10 +131,14 @@ export function ServiceDetailFlyout(props: ServiceFlyoutProps) {
     );
 
     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 { setNavBreadCrumbs } from '../../../../../common/utils/set_nav_bread_cru
 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 {
@@ -106,25 +103,19 @@ export function ServiceView(props: ServiceViewProps) {
     );
 
     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(() => {

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

@@ -10,7 +10,6 @@ import React, { useEffect, useRef, useState } from 'react';
 import { ServiceTrends } from '../../../../../common/types/trace_analytics';
 import { coreRefs } from '../../../../framework/core_refs';
 import {
-  handleServiceMapRequest,
   handleServicesRequest,
   handleServiceTrendsRequest,
 } from '../../requests/services_request_handler';
@@ -124,17 +123,28 @@ export function ServicesContent(props: ServicesProps) {
     );
 
     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

@@ -132,7 +132,6 @@ export function SpanDetailPanel(props: {
   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,